2015-10-07 5 views
3

У меня есть две формы: one и two, и на основе формы, которую я хочу отправить. Я хочу вызвать функцию на основе этого представленного значения в конце моей логики.Множественные селекторы форм JQuery

Я хочу знать, могу ли я получить каждый селектор как индекс массива, цикл или свойство или что-то до 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> 
+0

Почему вы не использовать форму «имя»? 'if (this.className ===" one ") {getFoo(); } else {getBoo(); } ' – Andreas

+0

Эй, Андреас, пытаясь избежать использования if/else по причинам, если бы у меня было более двух форм. –

+0

'var formDependendFunctions = {" one ": getFoo," two ": getBoo}; if (formDependendFunctions [this.className]) {formDependendFunctions [this.className] (это); } ' – Andreas

ответ

1

Дайте общее название для ответов для каждой формы. Я назвал его «ответом»

<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> 
+0

Мне понравилось, что '.serializeArray()' смог фактически вернуть данные. Спасибо @madi. –

1

если вы хотите один подход события попробовать это, но это действительно зависит от того, что ве ваших функций, чтобы сделать

$('.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>