提交两个带有两个提交按钮的jQuery ajax表单

Question

这里我只想使用两个提交按钮在一个页面，但它没有通过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>

下面是另一种形式：

<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>

这是我的脚本，但不起作用？我要把我的请求发送到那里。我想激活这样的脚本以便提交，有什么办法吗？

$(#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);
        }
    });
});

})；

Answer 1

你错过了一些“它应该是$("#form_comment")和$("#form_post") ...

Answer 2

这对我来说很有效：

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

Answer 3

使用像这样的提交事件，

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

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