javascript函数解析同一页面上的多个表单

Question

我有一个包含两个选项卡的页面，每个选项卡都包含一个表单。表单以相同的方式解析，只是它们被用于不同的 URL/API。

我想使用相同的函数来解析表单，而不是重复相同的函数，所以我在 URL 中获取哈希以获取选项卡编号，然后将其添加到 jquery 目标，请参见下面的代码：

$(document).ready(function () {
$('#tab-container').easytabs();

var tab = '#tab1'; // when index loaded, there is no hash, so I set tab to be #tab1 by default

window.onhashchange= function() {
   tab = window.location.hash;
   console.log(tab);
};


$(tab + ' form').submit(function(e) {
    e.preventDefault(); // Prevents the page from refreshing

    var url = $(this).attr('action')

    $.ajax({
       type: "POST",
       url: url,
       data: $(tab + ' form').serialize(), // serializes the form's elements.
       success: function(data)
       {
           var result = JSON.parse(data);

           // check to see if there are more than one value in the response. values are separated by commas
           if (result.response.indexOf(",") > -1){ 
                var results = result.response.split(", ");

                // show the results to the left of the form if there are any
                $(tab + ' #results').removeClass('hide');

                for (i=0; i < results.length; i++){
                    $(tab + " #list").append('<li>' + results[i] + '</li>');
                }
           }else{
                results = result;
                $(tab + " #list").append('<li>' + results.response + '</li>');
           }


       }
     });

    return false;
});

这似乎不起作用，因为它仅适用于选项卡 1。任何其他选项卡都会对相应的 URL 进行操作，而不是调用该函数。

我希望能够对表单使用相同的功能，但我不确定如何在更改选项卡时针对特定表单。

感谢任何帮助！ :)

Answer 1

做与 event.target 相关的所有事情（这将是提交的表单）

另外，不要对列表和结果元素使用 ID，它们应该是类。我无法确定，因为我没有 HTML 标记参考。

http://jsfiddle.net/3HkU6/5/

function validateForm(event) {

    // Prevent the page from refreshing
    event.preventDefault();

    var form_el = event.target,
        $form = $(form_el),
        type = $form.attr('method'),
        url = $form.attr('action');

     var $results = $form.siblings('.results'),
         $list = $results.find('.list');


    $.ajax({
       type: type,
       url: url,
       data: $form.serialize(), // serializes the form's elements.
       success: function(data) {
           var results,
               result = JSON.parse(data);

           // check to see if there are more than one value in the response. values are separated by commas
           if (result.response.indexOf(",") > -1){ 

               var results = result.response.split(", ");

                // show the results to the left of the form if there are any
                $results.removeClass('hide');

                for (i=0; i < results.length; i++){
                    $list.append('<li>' + results[i] + '</li>');
                }
           } else {
                results = result;
                $list.append('<li>' + results.response + '</li>');
           }


       }
     });

}


$('form').each(function() {

    this.addEventListener('submit', validateForm);

})

HTML

<div>
   <form>
   </form>

   <div class="results">
       <ol class="list">
       </ol>
   </div>
</div>

Answer 2

只需检查 ID 并做出相应反应

$('#tab1 form, #tab2 form').submit(){
    if( $(this).is( '#tab1 form') ){
        /* any special form 1 handling */
    }else{

    }     
});

至于结果，只需遍历主选项卡内容元素并在该实例中查看

/* defined within submit handler and not inside ajax*/
var $list= $(this).closest('.tabContentClass').find('.listClass');