使用两个提交按钮提交两个 jQuery ajax 表单答案

【问题标题】：Submitting two jQuery ajax form with two submit buttons使用两个提交按钮提交两个 jQuery ajax 表单
【发布时间】：2016-03-15 10:56:34
【问题描述】：

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

});

【问题讨论】：

标签： javascript php jquery ajax forms

【解决方案1】：

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

【讨论】：

【解决方案2】：

这对我有用：

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

【讨论】：

【解决方案3】：

像这样使用提交事件，

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

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

【讨论】：