綁定功能提交事件

Question

我正嘗試綁定一個簡單的函數來一個提交事件，即：

1. 檢索所有輸入字段的值
2. 設置表單的action屬性
3. 提交表單

通過this answer的啓發 - 我想出了下面的代碼：

$(document).ready(function() { 
    $('#fbook').bind('submit', function(event) { 
     event.preventDefault(); 
     var baseURL = $(this).children('#base').val(); 
     var hotelID = $(this).children('#destination').val(); 
     var dateIn = $(this).children('#show-date-in').val(); 
     var location = baseURL + "&hotelID=" + hotelID + "&dateIn=" + dateIn; 
     $(this).attr('action', location); 
     $(this).submit(); 
    }); 
}); 

而且隨着HTML和JS here's的的jsfiddle：http://jsfiddle.net/mattvic/2wRHc/47/

不幸的是，doesn't的工作，我只是不容看到我錯在哪裏。我希望有人能夠發現錯誤。

非常感謝！

Answer 1

您的代碼將進入無限循環，因爲$(this).submit()調用綁定到表單元素的提交處理程序，這會觸發調用$(this).submit()的處理程序，該處理程序會調用綁定到表單元素的提交處理程序，依此類推。

如果您使用窗體本身的submit方法，就可以避免遞歸：

this.submit(); 

Answer 2

改變你的jQuery這樣的：

$(document).ready(function() { 
    $('#fbook').submit(function(event) { 
     var baseURL = $('#base', this).val(); 
     var hotelID = $('#destination', this).val(); 
     var dateIn = $('#show-date-in', this).val(); 
     var location = baseURL + "&hotelID=" + hotelID + "&dateIn=" + dateIn; 
     $(this).attr('action', location); 

    }); 
}); 

Answer 3

由於表單包含submit類型的按鈕，你的$(this).submit()不起作用。請嘗試以下方法 -

$(document).ready(function() { 

    $('#booking-button').click(function(event) 
    { 
     event.preventDefault(); 
     var baseURL = $("#fbook").children('#base').val(); 
     var hotelID = $("#fbook").children('#destination').val(); 
     var dateIn = $('#show-date-in').val(); 
     var location = baseURL + "&hotelID=" + hotelID + "&dateIn=" + dateIn; 
     $("#fbook").attr('action', location); 
     $("#fbook").submit(); 
    }); 
}); 

jsfiddle示例。