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');

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

2 个答案: