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


Submitting two jQuery ajax form with two submit buttons

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

这是我的剧本,但不起作用?我发送请求的地方。我想激活这样的scrpts以供参与者提交,有什么办法吗?

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

});

您错过了一些"它应该是$("#form_comment")和$("#form_post")。。。

这对我有效:

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

使用这样的提交事件,

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