CODEWITHSUNDEEP
phpjquery
Free Soul
Free Soul

Reputation: 25

php to jquery on form submit

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.

Upvotes: 1

Views: 144

Answers (5)

Siamak Motlagh
Siamak Motlagh

Reputation: 5136

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.

Upvotes: 1

Seain Malkin
Seain Malkin

Reputation: 2303

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.

Upvotes: 0

dfmiller
dfmiller

Reputation: 1203

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)

Upvotes: 1

Arun
Arun

Reputation: 685

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 

 });

Upvotes: 0

Leng
Leng

Reputation: 2998

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/

Upvotes: 0

Related Questions