Question

<form action="" method="post">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="text" name=qty" />
<textarea name="message"></textarea>
<input type="submit" class="submit" onclick="formSubmit(event)" />
</form>

now, i using ajax to submit the information to http://example.com/test.php. how to access the inputname,email,phone,message value in test.php, i konw, if don’t use ajax, i can used $_POST[’email’]..to access the passed value.

if i also want to use $_POST[’email’].how do i do? after instructed by someone, i did the following, but in the test.php. it doesn’t access the vaule, what’s wrong with it?

var dataString =  '&name=' + jQuery('input[name=name]').val() +                 
                         '&email=' + jQuery('input[name=email]').val() +
                         '&qty=' + jQuery('input[name=qty]').val() +
                         '&message=' + jQuery('textarea[name=message]').val() +
       jQuery.ajax({
            type: "POST",
            url: "http://www.example.com/test.php",
            data: dataString,

then in test.php i using. $_POST[’email’],$_POST[‘qty’]…it doesn’t work.

the last code: i added class=”ajax-submit” to the

jQuery('form.ajax-submit').submit(function(e) {
    var $this = jQuery(this);
    e.preventDefault();

    if ($this.find('input[name="email"]').val() == '' || $this.find('input[name="qty"]').val() == ''|| $this.find('input[name="message"]').val()=='')) {
    alert("please fill out the required fields");
    return false;
}

    jQuery.ajax({
         type: "POST",
         url: "http://example.com/test.php",
         data: $this.serialize(),
        success: function(response) {
            alert(response);
        },
        error: function() {
                alert('There was an error submitting the form');
            } 
    })
});

Answer 1

Don’t construct the query string by hand. What you have now doesn’t escape the values, which makes it easy to break.

Instead, just let jQuery serialize the form for you:

$('form.ajax-submit').submit(function(e) {
    var $this = $(this);
    e.preventDefault();

    $.ajax({
        url: $this.attr('action') || window.location,
        type: $this.attr('method') || 'post',
        data: $this.serialize(),
        success: function(response) {
            alert(response);
        }
    })
});

This code makes all forms with the class ajax-submit submit via AJAX.

To fix what you have now, just change your data key’s value:

var $form = $('#your_form');

if ($form.find('input[name="email"]').val() == '' || $form.find('input[name="name"]').val() == '') {
    return false;
}

jQuery.ajax({
    type: "POST",
    url: "http://www.example.com/test.php",
    data: $form.serialize(),
    ...