php to jquery on form submit - php

Question

i have this code which ask user to input value and submit.
html
<form id="myForm" method="post" action="saving.php">
<p><label for="input1">Input 1:</label>
<input type="text" size="10" name="input1" id="input1" />
</p>
<input id="save" name="save" type="submit" value="save" />
</form>
<p><span id="thevalue"></span><span id="existornot"></span></p>
js
$("#myForm").submit(function(event) {
event.preventDefault();
$("#myForm").validate(
{ rules: {input1: "required",},
messages: {input1: "message error input"},
});
if( $("#myForm").valid()){
var $form = $("#myForm" ),
url = $form.attr( "action" ),
insertedVal=$("#input1").val();
$.post(url,{input1:insertedVal},
function(){
//displaying value condition
$("#thevalue").html(insertedVal);
// ... msg from php to be inserted to #existornot
});
}
});
saving.php
<?php
if(!empty($_POST['input1']))
{
$inputone= mysql_real_escape_string(trim($_POST['input1']));
$result = mysql_query("SELECT COUNT(*) FROM `test_table` WHERE `name` = '$inputone' ");
if (mysql_result($result, 0, 0) > 0)
{
echo "is duplicate data" ;
}
else
{
mysql_query("INSERT INTO `test_table`(name) VALUES ('$inputone')") ;
echo "is updated to db" ;
}
}
else
{
echo "could not be empty" ;
}
?>
How to pass those message of 'is duplicate data' or ' is updated to db' from the php to the javasript, to tell user that the submit process is fail or success ?
Thanks in advance for any advice.

Answer 1

Change the function call after the jQuery post to accept the data variable and process the results:
$.post(url,{input1:insertedVal},
function(data){
//displaying value condition
$("#thevalue").html(insertedVal);
// ... msg from php to be inserted to #existornot
if (data != 'is updated to db') {
alert(data);
}
});
}
(Data will contain what has been echoed in your save function)

Answer 2

The response from php file is in the ajax callback function. so you should add a parameter to your function like this:
$.post(url,{input1:insertedVal},function(resp)
{
// resp is the callback from php.
console.log(resp);
$("#thevalue").html(insertedVal);
});
For more information that how ajax works, you can follow this link: 5 Ways to Make Ajax Calls with jQuery
hope to help.

Answer 3

Like this:
$.post(url,{input1:insertedVal},
function(data){
//displaying value condition
$("#thevalue").html(insertedVal);
// ... msg from php to be inserted to #existornot
$("#existornot").html(data);
});
}
By adding the "data" variable to the callback function(), that "data" variable will be updated with whatever php echo's as output. You can then insert that "data" into #existornot in the callback function.
Please see the API here: http://api.jquery.com/jQuery.post/

Answer 4

If you want to print the value returned from php please check the jquery $.post
$.post(url,{input1:insertedVal},
function(data){
//displaying value condition
$("#somediv_id").html(data);
$("#thevalue").html();
// ... msg from php to be inserted to #existornot
});

Answer 5

The $.post callback function will be passed a argument containing the server response. So your $.post request should look like
$.post(url, {input1: insertedVal}, function(response) {
console.log(response); // should output the server message echoed.
});
It's also usually best to use JSON as a server response.