Submitting two jQuery ajax form with two submit buttons

Question

Here I just want to use two submit button in a single page, but its not sending any data through post?

    <form name="form_post" id="form-post" method="post">
        <label>
            <span>Title *</span>
            <input type="text" name="post_name" id="post-name" placeholder="Post title...." required>
        </label>
        <label>
            <span>Body *</span>
            <input type="text" name="post_body" id="post-body" placeholder="Post body...." required>
        </label>
        <input type="submit" id="submit_post" value="Submit Post">
    </form>

Here is another form:

<form id="form_comment" method="post">
        <!-- need to supply post id with hidden fild -->
        <input type="hidden" name="postid" value="<?php echo $post_id ?>">
        <label>
            <span>Name *</span>
            <input type="text" name="comment_name" id="comment-name" placeholder="Your name       here...." required>
        </label>
        <label>
            <span>Your comment *</span>
            <textarea name="comment" id="comment" cols="30" rows="10" placeholder="Type your comment here...." required></textarea>
        </label>
        <input type="submit" id="submit_comment" value="Submit Comment">
    </form>

this my script but not working? where I'm sending my request. I want to active such scrpts fro particuler submit, is there any way?

$(#form_post).submit(function(){
var form = $(form);
var submit = $('#submit_post');

form.on('submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
        url: 'ajax_post.php',
        type: 'POST',
        cache: false,
        data: form.serialize(), //form serizlize data
        beforeSend: function(){
            // change submit button value text and disabled it
            submit.val('Submitting...').attr('disabled', 'disabled');
        },
        success: function(data){
            // Append with fadeIn see http://stackoverflow.com/a/978731
            var item = $(data).hide().fadeIn(500);
            $('.wrap').append(item);

            // reset form and button
            form.trigger('reset');
            submit.val('Submit Post').removeAttr('disabled');
        },
        error: function(e){
            alert(e);
        }
    });
});

});

$(#form_comment).submit(function(){
var form = $(form);
var submit = $('#submit_comment');

form.on('submit', function(e) {
    // prevent default action
    e.preventDefault();
    // send ajax request
    $.ajax({
        url: 'ajax_comment.php',
        type: 'POST',
        cache: false,
        data: form.serialize(), //form serizlize data
        beforeSend: function(){
            // change submit button value text and disabled it
            submit.val('Submitting...').attr('disabled', 'disabled');
        },
        success: function(data){
            // Append with fadeIn see http://stackoverflow.com/a/978731
            var item = $(data).hide().fadeIn(500);
            $('.comment-block').append(item);

            // reset form and button
            form.trigger('reset');
            submit.val('Submit Comment').removeAttr('disabled');
        },
        error: function(e){
            alert(e);
        }
    });
});

});

Luca Rocchi · Accepted Answer · 2014-11-09 18:09:04Z

1

you miss some " it should be $("#form_comment") and $("#form_post") ...

answered Nov 9, 2014 at 18:09

Luca Rocchi

6,5001 gold badge25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Husni · Accepted Answer · 2016-03-15 02:56:34Z

1

This works for me:

$('#form_post').on('submit', function(event){
    event.preventDefault();
    $.ajax({
        ...
        ...
        ...
    });
});
$('#form_comment').on('submit', function(event){
    event.preventDefault();
    $.ajax({
        ...
        ...
        ...
    });
});

answered Mar 15, 2016 at 2:56

Husni

1511 silver badge5 bronze badges

Comments

AbhishekTaneja · Accepted Answer · 2014-11-09 18:18:19Z

0

Use submit events like this,

    $('body').on('submit', '#form_comment', function(){
        e.preventDefault();
        $.ajax({
            ...
            ...
            ...
        });
    });

   $('body').on('submit', '#form_post', function(){
        e.preventDefault();
        $.ajax({
            ...
            ...
            ...
        });
   });

answered Nov 9, 2014 at 18:18

AbhishekTaneja

1115 bronze badges

Collectives™ on Stack Overflow

Submitting two jQuery ajax form with two submit buttons

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related