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

时间:2014-11-09 18:04:04

标签: javascript php jquery ajax forms

这里我只想在一个页面中使用两个提交按钮,但它不通过帖子发送任何数据?

    <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);
        }
    });
});

});

3 个答案:

答案 0 :(得分:1)

你错过了一些&#34; 它应该是$(&#34;#form_comment&#34;)和$(&#34;#form_post&#34;)......

答案 1 :(得分:1)

这对我有用:

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

答案 2 :(得分:0)

使用像这样的提交事件,

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

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