I have records in the mysql database. in the browser, I need to display just the id or the name and it should be clickable, when clicked it should show the other info like email, phone etc..
I can list the names using SELECT but not sure how to link it and show the data..if there is a jquery method to display the data in a div, it would be good ..please advise me how to start with..thanks.
ex
rob
mike
bob
i guess the url will have the remaining data for that record.
clicking on rob, then result should be
Rob
Phone - $phone
Email - $email
Age - $age
make your href link send to another page where you have all stats printed. The best way is having href by ID. So.
rob
mike
bob
Or you can make a toolip out of it and hide all information into dispay none "bubble" :P
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
I think what you want to do is use an ajax to compare the data without a refreshing page so here's my code example that you can improve as your needs :
INDEX.HTML
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#get").click(function()
{
var name = $("#name").val();
$('#1').load("getdata.php?name=" +name);
});
});
</script>
</head>
<body>
NAME : <input type="textbox" id="name" >
<button id="get">Get Name Data</button>
<div id="1" name='divku'></div>
</body>
</html>
GETDATA.PHP
<?php
$name = $_GET['name'];
getname($name);
function getname($name)
{
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("stackoverflow", $con);
$result = mysql_query("SELECT * FROM user where name = '" . $name . "'" );
while($row = mysql_fetch_array($result))
{
echo $row[0] . $row[1] . $row [2];
}
mysql_close($con);
}
?>
I hope this could solve your problem
You can try this method,
foreach ($detailedArr as $arr) {
echo '<a href="javascript:;" name="a_name" id="a_'. $arr['id'] .'" >'. $arr['name'] .'</a>';
echo '<div name="div_detail" id="div_'. $arr['id'] .'" style="clear:both;display:none;" >';
echo 'email : '. $arr['email'];
echo '</div>';
}
here $detailedArr is the array which is having all your records and you can change the design based on your requirement. and in your Javascript code
$(function() {
$("[name=a_name]").click(function() {
var clkId = $(this).attr('id').split('_')[1];
$("[name=div_detail]").hide({animate:'slow'});
$("#div_"+clkId).show({animate:'slow'});
});
});
here I have done with jQuery so you have to include jQuery library
Related
I have code below for a search bar that, upon clicking 'Search', loads a new page with the query results. How do I change it so instead of loading a new page, the query results open in a modal popup within the same page?
index.php
<head>
<title>Search</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form method="POST" action="search.php">
<input type="text" name="q" placeholder="Enter query"/>
<input type="submit" name="search" value="Search" />
</form>
</body>
search.php
<?php
error_reporting(E_ALL);
ini_set('display_errors',1);
include_once('db.php'); //Connect to database
if(isset($_POST['q'])){
$q = $_POST['q'];
//get required columns
$query = mysqli_query($conn, "SELECT * FROM `words` WHERE `englishWord` LIKE '%$q%' OR `yupikWord` LIKE '%$q%'") or die(mysqli_error($conn)); //check for query error
$count = mysqli_num_rows($query);
if($count == 0){
$output = '<h2>No result found</h2>';
}else{
while($row = mysqli_fetch_assoc($query)){
$output .= '<h2>'.$row['yupikWord'].'</h2><br>';
$output .= '<h2>'.$row['englishWord'].'</h2><br>';
$output .= '<h2>'.$row['audio'].'</h2><br>';
$audio_name = $row['audio'];
$output .= "<a href='audio/$audio_name'>$audio_name</a> ";
}
}
echo $output;
}else{
"Please add search parameter";
}
mysqli_close($conn);
?>
You need to use JavaScript on your page to executed an AJAX call to search.php. That PHP file preferable returns JSON data, or complete HTML that can be added to the modal window.
Conceptually:
Use JavaScript to executed AJAX POST to search.php
Have search.php return the data in JSON format.
Have JavaScript catch the returned data, iterate through it and create HTML elements.
Use JavaScript to open a new modal window.
Use JavaScript to add the HTML elements to the modal's body.
You don't necessarily need to use JavaScript to create the modal window. You can create it in plain HTML and fill it and open it using JavaScript.
Welcome to stackoverflow. Here's my solution for that, so first, you have to capture the form submission, the technique is doing GET request using jQuery which I assume you already using jQuery since you are using bootstrap and bootstrap uses jQuery
$('form').submit(function(e){
e.preventDefault() // do not submit form
// do get request
$.get( 'search.php', { q : },function(e){
// then show the modal first
$('#mymodal').modal('show');
// then put the results there
$('#mymodal:visible .modal-container .modal-body').html(e);
});
});
Hi I'm trying to match a user id value from an input on a form to records in my database. I'm trying to show a column (itemname) of data in a dropdown select menu that match a userid value from a forms input. I don't know if I'm properly defining my variables or what im doing wrong but cant see what I'm missing. Any help is greatly appreciated. Thanks.
<?php
// Create the connection to the database
$con=mysqli_connect("xxx","xxx","xxx","xxx");
// Check if the connection failed
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
die();
}
if (isset($_POST['userid']))
{
$userid= $_POST['userid'];
$query = "SELECT itemname
FROM seguin_orders
WHERE username = '".($userid)."'";
$result = mysqli_query($con,$query);
}
?>
FORM WITH DROPDOWN
<form action="xxx" method="post" name="form1">
<select name="xxx"><option value="">-- Select One --</option>
<?php
while ($row = mysqli_fetch_assoc($result))
{
echo '<option value =" ' . $row['itemname'] . ' ">' . $row['itemname'] . '</option>';
}
?>
</select>
<input id="input1" name="input1" type="text" />
</br>
<input id="userid" name="userid" type="text" value="demo#gmail.com" readonly="readonly"/>
<button type="submit" value="Submit">Submit</button>
</form>
==SOLUTION FOR AJAX FORM==
orders.php
<?php
// Create the connection to the database
$con=mysqli_connect("xxx","xxx","xxx","xxx");
// Check if the connection failed
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
die();
}
if (isset($_GET['userid']))
{
$userid= $_GET['userid'];
$query = "SELECT itemname
FROM seguin_orders
WHERE username = '".($userid)."'";
$result = mysqli_query($con,$query);
while ($row = mysqli_fetch_assoc($result))
{
echo '<option value =" ' . $row['itemname'] . ' ">' . $row['itemname'] . '</option>';
}
}
?>
original page with form
This is just basic and simple, for you to understand. You can change it and make more secure. Please, read comments to understand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="#">
<div class="pre-dropdown"> <!-- This class is here to hide this mini form after submit with jquery -->
<input type="text" name="userid" id="userid">
<button id="submitId">Submit Id</button>
</div>
<div class="dropdown"> <!-- This is hidden because there is no data, but when userid is submited, this will be visible -->
<select name="xxx" id="dropdown-select">
<option value="">-- Select One --</option>
</select>
</div>
</form>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$('.dropdown').hide(); // Hide dropdown div when page is loaded, mbetter way will be with css, but it's enough for now
$('#submitId').on('click', function(e){ // Things to do when 'Submit Id' button is clicked
var userid = $('#userid').val(); // Grab user id from text field
e.preventDefault(); // Prevent form from submit, we are submiting form down with ajax.
$.ajax({
url: "orders.php",
data: {
userid: userid
}
}).done(function(data) {
$('.pre-dropdown').hide(); // Hide mini form for user id
$('.dropdown').show(); // show dropdown
$('#dropdown-select').append(data); // append results from orders.php to select
});
});
});
</script>
</body>
</html>
Change form the way you need. I am hidding pre-dropdown because if user submits userid again, we will append results twice.
You did two mistakes
You miss end of if condition ending }, and remove semicolon ; from while loop also string ending is missing.
In short you need a good IDE that can let tell you basic error in your code
Try Changing echo of your code to something like this-->
echo "<option value =\"". $row['itemname'] ."\">". $row['itemname'] . "</option>";
or try using mysqli_fetch_array() rather than mysqli_fetch_assoc()
And More Over change your sql query to something like this
$query = "SELECT itemname FROM seguin_orders WHERE username = '$userid'";
Im new to Jquery and trying to recreate something muddled together a while ago, with a similar function.
i have pasted my code here: http://pastebin.com/SYM45WPw
I have a table which is created base on results of a form on the previous page (this is all working ok) with Student names in the first column, then every column after that has will be a result for testing requirement, simply a drop down with Pass / Fail, and for each person and each requirement i want to go along and pick the result, and submit the results to DB in thhe back ground and then removed the Select option and displays the result.
Currently on the post_result.php i have this, just to text i am getting a result:
if($_POST['studentID'] != ""){
echo "Success";
}
All help is much appreciated,
Edit: (taken from pastebin link)
<?php
ini_set('error_reporting', E_ALL);
$student_name = $_POST['student_name'];
$class = $_POST['class'];
$month = $_POST['month'];
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("select#result").change(function() {
var studentID = $(this).find("input[name='student_name']").val();
var result = $(this).serialize();
$.post('post_result.php', result, function(data) {
// We not pop the output inside the #output DIV.
$("#output-" + studentID).html(data);
});
$("#"+studentID+"-formarea").hide();
return false;
});
});
</script>
</head>
<body>
<?php
require 'db_connect.php';
$header=1;
$query = mysql_query("SELECT * FROM requirements WHERE `class` = '$class' && month = $month ") or die("Error:". mysql_errno());
?>
<table class="tg" border="1">
<tr>
<th class="tg-031e">Student Name</th>
<?php while ($row = mysql_fetch_array($query)) {
echo '<th class="tg-031e">'.$row['requirement'].'</th>';
$header++;
}
?>
</tr>
<?php
for ($i = 0; $i < count($student_name); $i++) {
echo '<tr>';
echo ' <td class="tg-031e">'.$student_name[$i].'</td>';
for ($count = 1; $count < $header; $count++) {
echo '<td><div id="'.$student_name.'-formarea">'
. '<form method="POST" id="form-'.$student_name.'">'
. '<input type="hidden" name="student_name" value="'.$student_name.'" />'
. '<select name="result" id="result"><option selected>Select Result</option>'
. '<option value="Pass">Pass</option><option value="Fail">Fail</option></select>'
. '</form></div>'
. '<div id="output-'.$student_name[$i].'"></div></td>';
}
echo'</tr>';
}
?>
</table>
</body>
</html>
You're serializing a Select element, not the form, and you must serialize the form.
For example:
<form id="myForm" action="blabla" method="blabla">
<select id="result" name="result">
<option>Bla Bla Bla</option>
</select>
<input type="text" name="student_name" />
<!-- ...more elements .... -->
</form>
So you have to replace:
var result = $(this).serialize()
//by:
var result = $("#myForm").serialize()
In the file you are sending data to via Ajax you have 'studentID' as your key but in the form you are serializing, the keys are assigned from the name='' attribute. That would make your keys: 'student_name' and 'result'.
if($_POST['studentID'] != ""){
echo "Success";
}
One way you could make sure of this is by placing the following into the php file your Ajax is sending and receiving. This will print an array of the post content being received by your php file.
print_r($_POST);
The results form that array will show up in the div where you are telling Ajax to place the results.
This is a good way to serialize the form you are working on for Ajax.
var result = $(this).closest('form').serialize();
I am trying to fill a listbox on a webpage and I want the listbox to start blank. Once the button is clicked the listbox should populate. My code below automatically fills the listbox but I would rather have the button do it.
<?php
$dbc = mysql_connect('','','')
or die('Error connecting to MySQL server.');
mysql_select_db('MyDB');
$result = mysql_query("select * from tblRestaurants order by RestName ASC");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SEARCH</title>
</head>
<body>
<form method="post" action="1004mcout.php">
<p><center>SEARCH</CENTER></P>
<select name="RestName">
<?php
while ($nt= mysql_fetch_assoc($result))
{
echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>';
}
?>
</select>
<p> SPACE</p>
<p>Click "SUBMIT" to display the calculation results</p>
<input type="submit" name="Submit" value="Submit" />
<br />
</form>
</body>
</html>
I would either: Preload the data into the page as some ready but invisible html list (maybe a bit n00b), or save the data as a javascript array and a function will load it into the page (better), or do an ajax call to the same page (for simplicity) (probably best, leaves you the option open for updated data after page initiation).
The Ajax route will have to use jQuery (change this_page.php to whichever page this is called):
<?php
while ($nt= mysql_fetch_assoc($result))
$arrData[] = $nt;
//If you want to test without DB, uncomment this, and comment previous
/*$arrData = array(
array('RestID' => "1", 'RestName' => "Mike"),
array('RestID' => "2", 'RestName' => "Sebastian"),
array('RestID' => "3", 'RestName' => "Shitter")
);*/
if(isset($_GET["ajax"]))
{
echo json_encode($arrData);
die();
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function displayItems()
{
$.getJSON("this_page.php?ajax=true", function(data) {
$.each(data, function(index, objRecord) {
var option=document.createElement("option");
option.value=objRecord.RestID;
option.text=objRecord.RestName;
$("#RestName").append('<option value="' + objRecord.RestID + '">' + objRecord.RestName + '</option>');
});
});
}
</script>
<title>SEARCH</title>
</head>
<body>
<form method="post" action="1004mcout.php">
<p><center>SEARCH</CENTER></P>
<select id="RestName"></select>
<p> SPACE</p>
<p>Click "SUBMIT" to display the calculation results</p>
<button type="button" onclick="javascript:displayItems();">Insert options</button>
<br />
</form>
</body>
</html>
Essentially, what it does, it collects the data, checks if there is a request for the ajax data in the url, if not, it prints the rest of the page (with an empty select). If there is an ajax flag in the url, then the php will encode the data into json, print that and stop.
When the User receives the page with an empty select, it clicks the button which will trigger the displayItems() function. Inside that function, it does a jQuery-based ajax call to the same page with the ajax flag set in the url, and the result (which is json), is evaluated to a valid javascript array. That array is then created into options and loaded into the RestName SELECT element.
A final cookie? You could just print the data as options, into the select anyway, just like the previous answers described. Then, inside the displayItems() function, you clear the select before loading it from the jQuery/ajax call. That way, the user will see data right from the beginning, and will only update this with the most recent data from the DB. Clean and all in one page.
<?php
$dbc = mysql_connect('','','')
or die('Error connecting to MySQL server.');
mysql_select_db('MyDB');
$result = mysql_query("select * from tblRestaurants order by RestName ASC");
?>
<html>
<head>
<script>
function displayResult()
{
var x =document.getElementById("RestName");
var option;
<?php
while ($nt= mysql_fetch_assoc($result))
{
echo 'option=document.createElement("option");' .
'option.value=' . $nt['RestID'] . ';' .
'option.text=' . $nt['RestName'] . ';' .
'x.add(option,null);';
}
?>
}
</script>
</head>
<body>
<select name="RestName">
</select>
<button type="button" onclick="displayResult()">Insert options</button>
</body>
</html>
Read more about adding options to select element from java script here
how about this simple way,
is this what you mean,
its not safe, any one can post show=yes but i think you just like users to be able to simply click and see result
<select name="RestName">
<?php
// if show=yes
if ($_POST['show'] == "yes"){
$dbc = mysql_connect('','','')
or die('Error connecting to MySQL server.');
mysql_select_db('MyDB');
$result = mysql_query("select * from tblRestaurants order by RestName ASC");
while ($nt= mysql_fetch_assoc($result))
{
echo '<option value="' . $nt['RestID'] . '">' . $nt['RestName'] . '</option>';
}
}
?>
</select>
<form method="post" action="#">
<input type="hidden" name="show" value="yes" />
<input type="submit" name="Submit" value="Submit" />
</form>
you can also simply use a hidden div to hid listbox and give the button an onclick action to show div, learn how in here: https://stackoverflow.com/a/10859950/1549838
this auto complete extender is working perfectly but i dont whats the reason its stopped working , No javascript error is coming .Here is my code
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$("#autocomplete").autocomplete({
source: "searchEAN.php",
minLength: 2,//search after two characters
select: function(event,ui){
// alert ($value.$id);
alert (ui.item.value);
//do something, like search for your hotel detail page
}
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="autocomplete">Hotel Name: </label>
<input id="autocomplete" name="autocomplete"/>
</div>
</div>
and this is searchEAN.php page code . its return data when i run this page directly by passing terms as query string
<?php
include_once('config.php');
if (isset($_GET['term'])) {
$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends
$qstring = "SELECT Distinct CONCAT(City,',',StateProvince,',',Country) AS value,EANHotelID AS id FROM ActivePropertyList WHERE City LIKE '%".$term."%' GROUP BY value limit 0,10 ";
echo $qstring;
$result = mysql_query($qstring);//query the database for entries containing the term
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
{
$row['value']=htmlentities(stripslashes($row['value']));
$row['id']=(int)$row['id'];
$row_set[] = $row;//build an array
}
echo json_encode($row_set);//format the array into json data
mysql_close();
}
?>
searchEAN.php can be check here .live link and auto complete which is not working can be check here
your echo $qstring; is in your PHP script. Comment it out!
Sorry , Problem solved that is mine mistake , I echo the query to check it but forgot to comment it. thats the reason its no working .
I comment out the
//echo $qstring; in searchEAN.php file
and its working now
thanks