Sidetracking
Sidetracking

Reputation: 229

Submitting form with Ajax

So I'm completely lost on how to submit a form with Ajax. I'm fairly new to Javascript and hopefully I'm not in over my head.

When I click submit on my form, nothing happens on my page, not in my SQL database where the info should be stored (double checked process form too).

Here's the code if anyone's willing to help:

Javascript:

$(document).ready(function() {
    $('#form').submit(function() {
        $.ajax({
            url: "../process.php",
            type: "post",
            data: $(this).serialize()
        });
    });
});

HTML:

<form name="contact" method="post" action="" id="form">

    <span id="input">
        <input  type="text" name="first" maxlength="50" size="30" title="First Name" class="textbox">
        <input  type="text" name="last" maxlength="80" size="30" title="Last Name" class="textbox">
        <input  type="text" name="email" maxlength="80" size="30" title="Email" class="textbox">
        <textarea  name="request" maxlength="1000" cols="25" rows="6" title="Request"></textarea>
    </span>

    <input type="submit" value="Submit" class="submit">   

</form>

Upvotes: 1

Views: 568

Answers (2)

mymotherland
mymotherland

Reputation: 8248

I use input type button instead submit button. I validate form field when user click button using click event.When validation pass then call ajax.

something like this,

 <input type="button" value="Submit" class="submit">   

jQuery(function(){
jQuery('.submit').click(function(){
    if(validatemyform()){
    //call ajax here
}
});
});

Upvotes: 0

ahren
ahren

Reputation: 16959

$('#form').submit(function(e) {
    e.preventDefault(); //prevents the page from refreshing
    var $this = $(this); // cache $(this) for later use
    $.ajax({
        url: "../process.php",
        type: "post",
        data: $this.serialize()
    });
}); 

Also could be to do with the dataType property. Or various other things.

Upvotes: 1

Related Questions