使用jquery发布多个变量

I am trying to pass multiple variables from one php file to another via jquery but nothing is happening at all and i also can see that there is error in javascript code but i can not firgure out what is really wrong !

HTML Code :

<form id="edit" action="" method="POST">
    <input type="text" name="name" value="wael">
    <input type="text" name="phone" value="0103941454">
    <input type="text" name="address" value="address">
    <input type="submit" name="submit" value="Send">
</form>
<div style="display:none;" id="feedback"></div>

Jquery code :

    $(document).ready(function(){
    $('#edit').submit(function(){
        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            };
        });
    });
});

PHP Code :

<?php

echo "Just testing functionality!":

?>

Please I need help to figure out what is wrong with this code.

add return false; to the end of your .submit() function to prevent the form from submitting

 $('#edit').submit(function(){
    $.ajax({
        type:'POST',
        url:'edit.php',
        dataType:'json',
        data:$('#edit').serialize(),
        success:function(data) {
            $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
        }
    });
    return false; //here. otherwise the form will submit to its self not edit.php
});

For posting form data it is good to use JQuery Form plugin which provide easy way to send data and receive response.

http://malsup.com/jquery/form/

Check this, and check examples where you will find easy and simple examples.

Also, using this plugin, you will have no need to fetch the form data in your jquery or use the jquery ajax function. The data will be directly posted to the form action by ajax when submitted.

Hope this will help.

In your JS code, you have to stop the form from being submitted, use e.preventDefault(), and there was a syntax error at the end of the success callback. Try this -

$(document).ready(function(){
    $('#edit').submit(function(e){
        e.preventDefault();
      //^^^^^^^^^^^^^^^^^^^ Added this.
        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            }
           //^ There was a comma here. Remove it.
        });
    });
});

Now, with this, your code will execute without syntax errors, but your success callback will not called because, you have dataType:'json', so the return value from php will have to be valid json otherwise there will be a parsing error and your success callback will not be called.

To detect that, you need to use the error callback. This is a more complete AJAX call -

$(document).ready(function(){
    $('#edit').submit(function(e){
        e.preventDefault();
        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                console.log("success");
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            },
            error: function( jqXHR,textStatus,errorThrown ){
                console.log(textStatus);
            }
        });
    });
});

With your PHP code, which returns invalid JSON, the parsing error will be thrown.
Try using json_encode() in your PHP if you want to return JSON data.
For example, try this in your edit.php file -

<?php
    header("Content-Type: application/json");
    echo json_encode("Just testing functionality!");
?>

try this code

 $(document).ready(function(){
    $('#edit').submit(function(event){

        event.preventDefault();

        $.ajax({
            type:'POST',
            url:'edit.php',
            dataType:'json',
            data:$('#edit').serialize(),
            success:function(data) {
                $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
            }
        });
    });
});

I have made two changes here .

1. event.preventDefault();

for prevent the default action.

2. success:function(data) {
                    $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
                }

instead of

        success:function(data) {
            $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
        };

apart from what Kamehameha and kanishka-panamaldeniya wrote down, you can achieve your goal in this way:

 data: { name:wael ,phone:0103941454, address:address }

and

type:'post'

As said you need to call preventDeafult function on the event object; This function prevent the submit action to occur.

$('#edit').submit(function(event) {
    event.preventDefault();

As a form of optimization you can also refer to $(this) inside your ajax call, instead to doing a new DOM traversing with $(#edit).serialize().

$.ajax({
    type:'POST',
    url:'edit.php',
    dataType:'json',
    data:$(this).serialize(), // <- modified here
    success:function(data) {
        $('#feedback').html(data).fadeIn().delay(5000).fadeOut();
    }
});

and then yes, as @Kamehameha said, you need to return valid json from your edit.php, so

//edit.php
echo json_encode("Just testing functionality!");