冲突两个 HTML 表单

Question

我有两个相互冲突的表格 我想更改“var form = $('form');”中的表单 ID比如“var form = $('myForm');” 如果我将 id 表单更改为 myForm，请告诉我，在这种情况下，在下面的代码中我可以如何合并：

 $(document).ready(function(){
        var form = $('form');
        var submit = $('#submit');

        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(800);
                    $('.comment-block').append(item);

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

HTML 代码：

<form class="form-horizontal" role="form" id="form" method="post">
                    <!-- need to supply post id with hidden fild -->
                    <input type="hidden" name="filmId" value="<?php echo $row['filmId']?>">
                    <div class="form-group">                        
                        <div class="col-sm-2">
                            <label>Name *</label>
                        </div>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="name" id="comment-name" placeholder="Your Name" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label>Email *</label>
                        </div>
                        <div class="col-sm-10">
                            <input class="form-control"type="email" name="mail" id="comment-mail" placeholder="Your Email" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2">
                            <label>Comment *</label>    
                        </div>  
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="5" name="comment" id="comment" placeholder="Type your comment here...." required></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" class="btn btn-primary" id="submit" value="Submit Comment">
                        </div>
                    </div>
                </form>

Answer 1

你必须使用jquery的Id选择器

$("#formId")

而不是您使用的“表单”类。

您的简化 HTML：

<form id="form1">                 
<input type="submit" id="submit1"/>                    
</form>

<form id="form2">                
<input type="submit" id="submit2"/>               
</form>

简化的 JS：

var form1 = $('#form1');
var submit1 = $('#submit1');
form1.submit(function(e) {
    alert('hey1');
    // prevent default action
    e.preventDefault();
    // send ajax request
});

var form2 = $('#form2');
var submit2 = $('#submit2');
form2.submit(function(e) {
    alert('hey2');
    e.preventDefault();
});

JSFIDDLE中的结果：http://jsfiddle.net/jzb2hn9j/

Answer 2

像这样给每个表单一个id

<form id="firstForm" method="post">
    ..... form data
</form>

<form id="secondForm" method="post">
    ..... form data
</form>

然后就这样选择表格

var formOne = $("#firstForm"),
    formTwo = $("#secondForm");