php to jquery on form submit

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.

dfmiller · Accepted Answer · 2013-01-03 18:22:59Z

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)

answered Jan 3, 2013 at 18:22

dfmiller

1,21413 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siamak Motlagh · Accepted Answer · 2013-01-03 18:23:15Z

1

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.

answered Jan 3, 2013 at 18:23

Siamak Motlagh

5,1547 gold badges47 silver badges66 bronze badges

Comments

Leng · Accepted Answer · 2013-01-03 18:16:27Z

0

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/

answered Jan 3, 2013 at 18:16

Leng

2,9972 gold badges23 silver badges30 bronze badges

Comments

Arun · Accepted Answer · 2013-01-03 18:18:08Z

0

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 

 });

answered Jan 3, 2013 at 18:18

Arun

6855 silver badges20 bronze badges

Comments

Seain Malkin · Accepted Answer · 2013-01-03 18:23:00Z

0

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.

answered Jan 3, 2013 at 18:23

Seain Malkin

2,29319 silver badges20 bronze badges

Collectives™ on Stack Overflow

php to jquery on form submit

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related