CODEWITHSUNDEEP
phpjquery
LearnAWK
LearnAWK

Reputation: 549

How to use jQuery Ajax to pass multiple form values to php?

Why I can not get response from php by using jQuery Ajax? When I click the "page" buttons, the weblink will change from:

 http://localhost/jQuery1.html

to something like:

http://localhost/jQuery1.html?state_chosen=Alabama&Type=&page=1

However, no echo-ed results from PHP.

HTML code:

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("form").change(function(){
        $.ajax({
            type:"POST",
            url:"passdata.php",
            data: $('form').serialize(),
            success: function(data){
               $('#result').html(data);
            }  });
          });  });
     </script>

</head>
<body>

<form >
<select class="dd1" name="state_chosen">
<option selected value = ""> Location </option>
<option value="Alabama" > US: Alabama   </option>
</select>
<select class="dd2" name="type">
<option selected value = ""> Type </option>
<option value="Plumber" > Plumber   </option>
</select>

<button name="page" value="1" >1</button>
<button name="page" value="2" >2</button>   

</form>

<div id="result"></div>
</body>
</html>

passdata.php

<?php
echo '<div>' .$_POST['state_chosen']." <br>". $_POST['type']."<br>". $_POST['page']. '</div>';
?>

Upvotes: 2

Views: 3225

Answers (4)

Rasclatt
Rasclatt

Reputation: 12505

Your jQuery should look something like: 

<script>
$(document).ready(function(){
    // Sorry, I put the form event in the (document) which is wrong.
    $("form").change(function(form) {
        $.ajax({
            type:"POST",
            url:"passdata.php",
            data: $(this).serialize(),
            success: function(data){
               $('#result').html(data);
            }
        });

    // This will stop the form being submitted
    // form.preventDefault; Remove if you need submission

     });
});
</script>

Also, as mentioned by @Robert Cathey, check your $_POST on your passdata.php page. You will get an Undefined index error.

Upvotes: 1

volkinc
volkinc

Reputation: 2128

It's a problem with BUTTON. The form consider button as type=submit So when you pressed to the button it's a submit event was issued. please try the following code.

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    function onFormChange(){
         $.ajax({
             type:"POST",
             url:"passdata.php",
             data: $('form').serialize(),
             success: function(data){
                $('#result').html(data);
             }  
          })
    }
    $(document).ready(function(){
        $( "form > *" ).change(function(event){
            event.preventDefault();
            onFormChange()
         })  
         $( "form" ).submit(function( event ) {
              event.preventDefault();
              onFormChange()
        });
    })
     </script>

</head>
<body>

<form >
<select class="dd1" name="state_chosen">
<option selected value = ""> Location </option>
<option value="Alabama" > US: Alabama   </option>
</select>
<select class="dd2" name="type">
<option selected value = ""> Type </option>
<option value="Plumber" > Plumber   </option>
</select>

<button name="page" value="1" >1</button>
<button name="page" value="2" >2</button>

</form>
<div id="result"></div>
</body>
</html>

Upvotes: 1

cssyphus
cssyphus

Reputation: 40096

I fully tested your code.

The error was just the extra semi-colon ; after the closing brace of the ajax success function.

I often label end braces so I can keep track. E.g. //END ajax block

Use this, it will work:

<script>
    $(document).ready(function(){
        $("form").change(function(){
            $.ajax({
                type:"POST",
                url:"passdata.php",
                data: $('form').serialize(),
                success: function(data){
                    $('#result').html(data);
                }                               //*****here was the error*****
            }); //END ajax
        }); //END form.change()
    }); //END document.ready
 </script>

Upvotes: 2

TomDillinger
TomDillinger

Reputation: 194

Add a console.log to your success function so you can see what your PHP file is actually returning. 

$(document).ready(function(){
    $("form").change(function(){
        $.ajax({
            type:"POST",
            url:"passdata.php",
            data: $(this).serialize(),
            success: function(data){
                console.log(data)
               //$('#result').html(data);
            }  
       });
    }); 
});

Upvotes: 1

Related Questions