CODEWITHSUNDEEP
jqueryajaxforms
Chaz
Chaz

Reputation: 817

Why is my jQuery AJAX firing on any button not just submit?

This is my first time trying to use AJAX form submission. I've got it working BUT the submit fires when I click any button, not just submit. I intend to eventually wire up the clear button to a form clearing action, but as of now it submits the form instead.

HTML

<form id="testForm" role="form" action="" method="">
    <div class="form-group" >
        <label for="testArea" class="sr-only">Enter your text.</label>
        <textarea class="form-control" name="testArea" rows="15" id="testArea" placeholder="..."></textarea>
    <button name="submitTest" type="submit"  class="btn btn-primary" >Submit</button>
    <button  class="btn btn-primary">Clear</button>
</form>

JS

$("#testForm").submit(function(event){
    event.preventDefault();
    var serializedData = $(this).serialize();
    $.ajax({
        url     : "processor.php",
        type    : "post",
        data    : serializedData,
        success : function(data) {
            $('#testForm').html(data);
        }
    })
});

I assumed .submit would fire on the form's true submission, that's wrong?

Upvotes: 2

Views: 123

Answers (2)

Kevin B
Kevin B

Reputation: 95026

Simply turn your clear button into a reset button:

<button type="reset" class="btn btn-primary">Clear</button>

This not only makes it not submit the form, but it makes it clear the form when clicked.

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92893

Tie your code to the button.click event instead:

$("#testForm [name='submitTest']").click(function(event){

Incidentally, the "clear" button is probably not necessary. It's just something to be clicked on by accident, followed by quiet swearing. Clear the field automatically when the "submit" button is clicked, instead.

Upvotes: 4

Related Questions