logo标签列表

多个 JQuery 不同的表单选择器

javascriptjquery
4

我有两个表格，one和two，根据提交的表格来调用相应的函数。

我想知道是否可以将每个选择器作为数组索引、循环或属性之类的东西检索到var = tagsOrAnswerers中？然后，我可以将该参数传递给我的被调用的函数。

<html>
     <form class="one">
         <input type="text" name="foo">
         <input type="submit" value="Submit">
     </form>
     <form class="two">
         <input type="text"name="boo">
         <input type="submit" value="Submit">
     </form>
</html>

<script>
       $('.one,.two').submit( function(){
       var fooOrBoo = $(this).find("input[name='foo'],[name='boo']").val();

       getBoo(ifBoo); //run this function if var fooOrBoo = 'boo';
       getFoo(ifFoo); //run this function if var fooOrBoo = 'foo';

});
</script>
为什么不使用“name”表单？if (this.className === "one") { getFoo(); } else { getBoo(); } - Andreas
嘿，安德烈斯，我想避免使用if/else语句，因为如果我有超过两个表单会怎样。 - Asim Mahar
var formDependendFunctions = { "one": getFoo, "two": getBoo }; if (formDependendFunctions[this.className]) { formDependendFunctions[this.className](this); } - Andreas
我建议，如果您想在每次表单提交时调用不同的代码逻辑，则应注册不同的提交事件。编写带有一个提交事件的if块并不是一种好的实践。 - Noldor
2个回答
1

if you want a single event approach try this but it really depend on what your functions ve to do 

 $('.forms > form').submit( function(e){
   e.preventDefault();
   var formN = $('form').index(this);
   switch(formN){
     case 0:
         alert("FUNCTION1");
       break;
     case 1:
         alert("FUNCTION2");
       break;
     //and so on.....
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="forms">
     <form class="one">
         <input type="text" name="foo">
         <input type="submit" value="Submit">
     </form>
     <form class="two">
         <input type="text"name="boo">
         <input type="submit" value="Submit">
     </form>
</div>

1
为每个表单的答案指定一个常见名称。我将其命名为“answer”。
   <div class="forms">
             <form class="one">
                 <input type="text" name="answer">
                 <input type="submit" value="Submit">
             </form>
             <form class="two">
                 <input type="text"name="answer">
                 <input type="submit" value="Submit">
             </form>
</div>

这里是脚本：

<script>
$('.forms > form').submit( function(){
   var data = $( this ).serializeArray();
   console.log(data); // gives the current data of the forms

  //using the data you can call whatever function you want using a switch statment
});
</script>
我喜欢.serializeArray()能够真正地带回数据这一事实。感谢@madi。 - Asim Mahar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接