Question

我目前在页面上有两个表单，一个更新表单和一个添加表单，我想要做的是提交任何一个表单，拉出该表单的id，以及操作，验证特定表单，然后从网络服务器加载回报。

我通过专门使用每个表单的id来使用它，但是js代码重复了两次，id更喜欢它有点动态。

<script src="assets/js/jquery-1.8.2.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/jquery.validate.js"></script>


<div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="update">                
            <form action="php/update_level.php" method="post" id="form1">
                <h2>Update Level</h2>
                <label>Select Bag Level</label>
                <select id="target" name="levelSelect"> <option selected>Select</option>
                    <?php
                    foreach($result as $row)
                    {?>
                        <option><?php echo $row['Level'] ?></option>
                    <?php
                    }
                    ?>
                </select>
                <div id="upForm">
                </div>
                <div class="message">

                </div>
            </form>
        </div>
        <div class="tab-pane" id="addNew">                
            <form action="php/add_level.php" id="form2">
                <h2>New Level</h2>    
                <label>Level</label>
                <input class="required" maxlength="10" minlenght="1" type="text" name="level" placeholder="Level">
                <label>Description</label>
                <textarea class="required" name="description"  rows="3" placeholder="Description of level type"></textarea>  
                </br>
                <div class="message">

                </div>
                <div class="form-actions">
                <button id="inFormSub" type="submit" class="btn btn-large btn-primary">Submit</button>
                </div>
            </form>                   
        </div>
    </div>

JS：

$('form').submit(function(e){
e.preventDefault();
var id=$(this).attr('id');
var action=$(this).attr('action');

console.log(action + ' ' + id); //works outputs update_bag.php form1 on submit of form1
                                //add_bag.php form2 on submit of form2
$(id).validate({
    submitHandler: function() {


        console.log(action + ' ' + id); //doesnt work
        $(id).find('div.message').load(action, $(id).serializeArray());            
    }
});

JS工作

    $('#form1').validate({
    submitHandler: function() {
        var action = $('#form1').attr('action');

        console.log(action + ' validate1');
        $('#form2').find('div.message').load(action, $('#form1').serializeArray());            
    }
});    

$('#form2').validate({

    submitHandler: function() {
        var action = $('#form2').attr('action');

        console.log(action + ' validate2');
        $('#form2').find('div.message').load(action, $('#form2').serializeArray());            
    }
});

我对JS和Jquery的了解充其量只是很小，而且我可能正好盯着解决方案

Answer 1

您可以在submitHandler上使用表单变量并获取id和action

...
submitHandler: function(form){

    console.log($(form).attr('id'), $(form).attr('action'));    

   ...
}

Answer 2

$(this).attr("id")调用只返回元素的ID，但这不是propper css选择器，所以你需要添加你自己的哈希符号

尝试将呼叫更改为：

$("#"+id).validate({
   //validate code here
})

Answer 3

应用每个元素需要特定数据的插件的常用方法是使用each()遍历元素，这样您就可以在循环中访问this，以便轻松访问单个表单元素而无需复制每个代码

$('#form1,#form2').each(function() {
    var $form = $(this);
    var action = $form.attr('action');
    $form.validate({
        submitHandler: function() {           
            $form.find('div.message').load(action, $form.serializeArray());
        }
    });
});

使用jquery.validate根据使用的表单验证提交的表单

3 个答案: