<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getsuggestion()
{
var seltxt=$('#selstate').val();
//alert(seltxt);
$.ajax({
type: "POST",
url: "getstate.php",
data:{state: seltxt },
dataType: 'json',
success: function(data){
//alert(data['test']);
if(data['test']==0)
{
$("#suggestion").text("");
alert("No suggestion");
}
$.each(data,function(key,value)
{
//alert(key);
if(key!="test")
{
str=str+value+",";
$("#suggestion").text(str);
}
});
},
error: function(error,txtStatus) { alert(txtStatus);}
});
}
</script>
</head>
<body>
<form name=f1 method=post>
<table>
<tr>
<td>Select State:</td>
<td><input type=text id=selstate onkeyup="getsuggestion();">
</td>
</tr>
<tr> <td></td>
<td><div id="suggestion"></div>
</td>
</tr>
</table>
</form>
</body>
</head>
</html>
Hi,I want to make a suggestion list.For that I've used text box for getting input from the user.But now I want the values, stored in database,to be retrieved in the form of list.Here I am getting values in text the format.How do I conver text box into list?Or what should I do to append list to the text box?
You can use autocomplete feature of jQuery UI.You can download from http://jqueryui.com/download
You should use something like jQuery UI-Autocomplete: http://jqueryui.com/demos/autocomplete/
It provides all the stuff needed to do as you ask and also the demos required for you to learn how to do it yourself.
Related
I noob and get mad when submit php form, convert input value to json, and other php file get it.
html
<form action="submit.php" method="post" name="form1" id="myform">
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
</form>
<script src="script.js"></script>
script.js
$('#myform').submit(function (event) {
name = $('#name').val();
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
contentType: 'application/json',
data: JSON.stringify(data),
dataType: 'json'
});
return false
});
php file
header('Content-Type: application/json');
$name_dirty = json_decode($_POST['name']);
echo $name_dirty;
Can someone help me? submit.php got blank, I cant get the value that I submit from html page. Big Thanks
Your Html
<table width="100%" border="0" style="font-size: 65px;">
<tr>
<td>Name</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<tr>
<td></td>
<td><button id="submit">Submit</button></td>
</tr>
</table>
<script src="script.js"></script>
Your JS
$('#submit').click(function() {
name = $('#name').val()
var data = {
name: name
}
$.ajax({
type: "POST",
url: 'submit.php',
data: data
dataType: 'json'
complete: function (resultData) {
alert('data has been send')
})
})
In your php:
<?php
print_r($_POST['data'])
A few notes. Make sure you check your paths. In my answer i assumed that the problem is in the code and not in wrong paths. Also when you use form tag you can use a submit button like <input type="submit" value="Submit"> to submit your form without using Javascript. It would work in your case but it's just another way to tackle your issue.
In my answer i removed your form tags and triggered the action on button click. There will be no redirect to the page but you can set a redirect inside the js if it is important to you, on success function of the ajax that i added. At the moment i just throw an alert message when it works successfully.
I make index.php like this:
<script src="js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#sload").load('save1.php',function(forma){
$(".csave").click(function(){
$.ajax({
type: 'POST',
url: $('#form1').attr('action'),
data: $('#form1').serialize(),
success: function(data) {
alert(data);
}
})
return false;
});
});
});
</script>
SAVE
<div id="sload"></div>
save1.php like this :
<table>
<form method="post" name="form1" id="form1" action="input1.php">
<tr>
<td>Date</td><td>:</td><td><input name="date" id="date"/></td>
</tr>
<tr>
<td>Location</td><td>:</td><td><input name="location" id="location" /></td>
</tr>
</form>
and input1.php
<? session_start();
include "db.php";
$date=$_POST['date'];
$location=$_POST['location'];
mysql_query("insert into hal (date,location) values ('$date','$location')");
?>
after I click SAVE not an error, but the database is stored in an empty field. Submit form after form load is blank
Thanks.
You need to separate the logic of loading and saving like this:
Here's an example (based on your code) as a single page script test.php:
<?php
// Load Form
if (isset($_GET['loadForm']))
{
exit('<form method="post" name="form1" id="form1" action="test.php">
<table>
<tr>
<td>Date</td><td>:</td><td><input name="date" id="date"/></td>
</tr>
<tr>
<td>Location</td><td>:</td><td><input name="location" id="location" /></td>
</tr>
</table>
</form>');
}
// Handle Form Save
if (count($_POST) > 0)
{
// TODO
exit('got form data: '. print_r($_POST, true));
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// When Page Loads
$(document).ready(function()
{
// Load Form
$('#sload').load('test.php?loadForm');
// Handle Save Click
$('.csave').click(function()
{
$.ajax({
type: 'POST',
url: $('#form1').attr('action'),
data: $('#form1').serialize(),
success: function(data) {
alert(data);
}
});
});
});
</script>
SAVE
<div id="sload"></div>
When I click save, this is what the output is:
To complete this code, add the db row inserting code where it says TODO. Hope this helps.
Update
Here's the split version:
index.php
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// When Page Loads
$(document).ready(function()
{
// Load Form
$('#sload').load('save1.php');
// Handle Save Click
$('.csave').click(function()
{
$.ajax({
type: 'POST',
url: $('#form1').attr('action'),
data: $('#form1').serialize(),
success: function(data) {
alert(data);
}
});
});
});
</script>
SAVE
<div id="sload"></div>
save1.php
<form method="post" name="form1" id="form1" action="input1.php">
<table>
<tr>
<td>Date</td><td>:</td><td><input name="date" id="date"/></td>
</tr>
<tr>
<td>Location</td><td>:</td><td><input name="location" id="location" /></td>
</tr>
</table>
</form>
input1.php
<?php
session_start(); // what's this for? you aren't using session on this file
// this is not safe! use mysqli or pdo and escape post values!!!
include "db.php";
$date=$_POST['date'];
$location=$_POST['location'];
mysql_query("insert into hal (date,location) values ('$date','$location')");
?>
i am making a website in which i am to embbed the functionality of delete using multiple checkbox. here is my code. my problem is
1. Ajax call is not working.
2. how can i make search from database for array .
<?php
if(isset($_POST['Delete']))
{
$array=$_POST['check_box'];
}
?>
<form method="post" id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while($selectnumberarr=mysql_fetch_array($selectnumber))
{
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" id="<?php $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}?>
<input type="submit" name="Delete" id="delete">
</table>
</form>
and below is my ajax and javascript code.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
any help would be appriciated
your code is almost correct. You need to remove `onChange="show()" for input checkbox, because if you have jquery then you don't need to put events on HTML elements.
Use jquery 'on' method for compatibility for latest php library.
Replace your jquery code with following jquery code :-
<script>
$(document).ready(function(){
$('#delete').on('click',function()
{
var cat_id = $('.check_box:checked').map(function() {
return this.id;
}).get().join(',');
console.log(cat_id);
$.ajax({
type: "POST",
url: "checkbox.php",
data: { "kw ":cat_id },
datatype:'json',
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
Use ".check_box" instead of "element" in jquery to prevent checks for all checkboxes, instead of desired ones.
Hope it helps.
Why you don't use an array for sending the checkboxes like:
HTML part:
<?php
if (isset($_POST['check_box'])) {
var_dump($_POST['check_box']);
echo "ajax call is working";
}
?>
<form id="form">
<table width="200" border="1">
<tr>
<td>select</td>
<td>NAme</td>
<td>Action</td>
</tr>
<?php
while ($selectnumberarr = mysql_fetch_array($selectnumber)) {
?>
<tr>
<td><input type="checkbox" name="check_box[]" class="check_box" value="<?php echo $selectnumberarr[0]; ?>" /> </td>
<td><?php echo $selectnumberarr[1]; ?></td>
</tr>
<?php
}
?>
</table>
<input type="button"name="delete" id="delete" value="Delete" />
</form>
JQuery part:
<script type="text/javascript">
$(document).ready(function(){
$('#delete').click(function() {
$.ajax({
type: "POST",
url: "checkbox.php",
data: $('#form').serialize(),
cache: false,
success: function(html)
{
alert("true");
}
});//end ajax
});
});
</script>
So you can easily get an array of the selected checkboxes in php with:
$idsArray = $_POST["check_box"];
this looks now like:
array(
"1", "2","etc.."
);
so this array contains all the ids of the selected checkboxes for delete.
at the first , excuse me for my bad english
i working in ubuntu for a jquery/ajax system
my codes in below:
index.html
...
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form name="stuSelForm" id="stuSelForm">
<table id="inputTable">
<tr><td colspan="3" align="center">Stu From</td></tr>
<tr>
<td> </td>
<td>St No : </td>
<td><input type="text" name="StNo" id="StNo" /></td>
</tr>
<tr>
<td></td>
<td>name : <br/> family : </td>
<td><input type="text" name="Fname" id="Fname" /><br/><input type="text" name="Lname" id="Lname" /></td>
</tr>
<tr>
<td colspan="3" align="right"><input type="submit" id="send" name="send" value="show" /></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="js/jscodes.js"></script>
...
js file :
$(document).ready(function()
{
$('#stuSelForm').submit(function(event)
{
var form = $(this);
inputs = form.find("input");
serializedData = form.serialize();
inputs.attr("disabled","disabled");
$.ajax({
url:'process.php',
type:'POST',
data: serializedData,
dataType:'text',
cache: false,
success : function(data,textStatus,jqXHR){ alert(data); },
error : function(jqXHR,textStatus,errorThrown) { alert(textStatus+jqXHR.status+jqXHR.responseText+"..."); },
complete : function(jqXHR,textStatus)
{
inputs.removeattr("disabled");
}
});
event.preventDefault();
});
});
and process.php :
<?php
header("Content-Type: text/html");
$StNo = $_POST['StNo'];
echo $_POST['StNo'];
?>
now all things are ok but the return value isn't StNo
it is whole content of process.php
it's mean
please help me why this happen
are this for php extensions or a mistake from me or ...
tanx for ur help
It sounds like the php is not running. Are you running your HTML file which calls the php file through localhost / a server or directly from the directory? You need the php server to evaluate your php script.
problem in your header:
you write in jquery dataType: text but you write in php header("Content-Type: text/html");
change it for get success:
like this:
$.ajax({
url:'process.php',
type:'POST',
data: serializedData,
cache: false,
success : function(data,textStatus,jqXHR){ alert(data); },
error : function(jqXHR,textStatus,errorThrown) { alert(textStatus+jqXHR.status+jqXHR.responseText+"..."); },
complete : function(jqXHR,textStatus){inputs.removeattr("disabled");}
});
I remove dataType:, because jquery default settings is dataType:'html'
and you don't need write dataType in this case
I'm playing around with Ajax, jQuery and PHP in an attempt to get familiar with the combination of them and how they integrate with each other. Here's my 1st attempt, it's a very simple form submission that does nothing special, just trying to see how ajax handles requests and responses.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>My 1st AJAX attempt</title>
<link href="http://www.ht-webcreations.com/test/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#wait').hide();
$("#emailContactus").submit(function(){
$('#wait').show(),
$.ajax({
data: $(this).serialize(),
type: "POST",
url: 'includes/ajax.php?action=emailContactus',
success: function(data) {
console.log("Success posting emailContactus"),
$('#wait').hide(),
$('#notifications').html(data).addClass('ajaxsuccess').show();
},
error: function (xhr, textStatus, errorThrown) {
console.log("Success posting emailContactus: "+ textStatus, errorThrown);
},
complete: function(data){
$('#wait').hide(),
$('#notifications').html(data).addClass('ajaxsuccess').show();
}
});
return false;
});
});
</script>
</head>
<body>
<div id="wait"><img src="http://www.ht-webcreations.com/test/loading_ajax.gif" width="80" height="80"></div>
<div id="notifications"></div>
<form name="emailContactus" id="emailContactus" method="post">
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>name</td>
<td><label for="name"></label>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
ajax.php:
<?
///////////////// AJAX REQUESTS /////////////////
switch($_REQUEST['action']){
case('emailContactus'): if($_POST['name']=='a') { echo $value = 'User is A'; } else { echo $value = 'User is NOT A'; }
break;
case('addContact'): echo 'Contact added!';
break;
default: break;
}
?>
The problem in this simple example (working demo here) is that though I expect the data response to be appended to the #notifications div, instead it's being outputted to the very top of the document, even before any HTML has been loaded. Please have a look and suggest what needs to be changed. Also, I will be glad to hear all your comments on my code as I would like to be pointed to the right direction from the start. Thanks!