2012-02-06 83 views
0

我正在通過一組非常簡單的輸入信息和用於出發日期的ui-datepicker來收集酒店預訂選項(日期,夜晚數量,孩子數量等)。jQuery選擇並提交

我使用jQuery來收集這些數據,然後在一個隱藏的(醜陋的第三方)窗體中設置選項的相應'selected'屬性。這一切都很好,我可以看到DOM元素正在改變 - 即隱藏表單中的'selected'選項正在改變。

最後提交表單,再通過jQuery:

$("form[name=idForm]").submit(); 

了問題所在:值不被形式承認即使壽」的選項‘選擇’確定在DOM提交。

代碼:

$(".check").click(function(){ 
    $(".book_result").hide(); /* just to hide verification feedback*/ 
    var date  = $("#datepicker").val(); 
    var nights  = $("#book_nights").val(); 
    var adults = $("#book_adults").val(); 
    var children  = $("#book_children").val(); 
    var access_code  = $("#book_access_code").val(); 
    if (date=='no date selected'){ 
     //all the code for verifying the users' input... 
     return; 
    } 
    else { 
     var newDate = date.split(' - '); 
     var day   = parseInt(newDate[0]-1); 
     var month   = parseInt(newDate[1]-1); 
     var year   = parseInt(newDate[2]); 

     var nights   = nights - 1; 
     var adults   = adults - 1 ; 
     var children = children - 1; 

     if (nights < 0){nights=0}; 
     if (adults < 0){adults=0}; 
     if (children < 0){children=0}; 

     $("#fromday option").eq(day).attr("selected", "selected"); 
     $("#frommonth option").eq(month).attr("selected", "selected"); 
     $("#fromyear option").eq(year).attr("selected", "selected"); 
     $("#nbdays option").eq(nights).attr("selected", "selected"); 
     $("#adulteresa option").eq(adults).attr("selected", "selected"); 
     $("#enfantresa option").eq(children).attr("selected", "selected"); 

     $("#fromday option").eq(day).siblings().removeAttr("selected"); 
     $("#frommonth option").eq(month).siblings().removeAttr("selected"); 
     $("#fromyear option").eq(year).siblings().removeAttr("selected"); 
     $("#nbdays option").eq(nights).siblings().removeAttr("selected"); 
     $("#adulteresa option").eq(adults).siblings().removeAttr("selected"); 
     $("#enfantresa option").eq(children).siblings().removeAttr("selected"); 

     $("#AccessCode").val(access_code); 

     $("form[name=idForm]").submit(); 
    } 

所以,這一切都真的很簡單 - 除了它不工作,我已經失去了近2天來它:(

這就像網頁無法識別隱藏的第三方表單的選擇已被改變 - 我認爲表單提交將讀取DOM中的標籤,不是嗎?

任何幫助將會很棒 - 我已經在SO和google上搜索過類似的問題,但是我並沒有真的找到相同的情況,因此一個for m正在通過jquery操作,然後提交。

這一切都已經在網上在http://www.hotelginorialduomo.com(可恥的,我知道了!) - 只需點擊「進行預訂」 ......

+2

什麼不工作?什麼值不被表單提交所識別?請提供更準確的細節。 – 2012-02-06 12:57:20

+0

@Shadow Wizard - 提交時的表單顯然是調用表單的'action'attr中指定的文件。生成的查詢字符串沒有在DOM中標記爲「selected」的那些選項的值 - 它只是默認爲每個選項的第一個選項。因此,表單提交併不是通過DOM的jquery操作來拾取'selected'這些值... – 2012-02-06 13:07:35

+0

Ha - 你打敗了我 - 感謝Shadow Wizard!我只是打了答案,才發現我不能回答自己的問題 - 少於100個代表。我發佈了這個內容:好吧 - 它已經排序了...... 問題是這樣的: $(「#fromday option」)。eq(day).attr(「selected」,「selected」); 雖然這確實操縱了HTML選擇選項的「選定」屬性,但它並未被表單提交作爲改變後的值進行提取。相反,這工作... $(「#fromday」)。val(day); 男人,我很高興完成了! Over n out ... S – 2012-02-06 14:08:47

回答

0

嘗試與這種代碼正確地選擇的值:

$("#fromday").val(day); 

對於這項工作,讓每個<option>具有適當的值,例如第二天:

<option value="2">2</option> 

此外,不要刪除「選定」屬性 - 除非你有一些隱藏在這個背後的意思。

+0

謝謝 - 我只是查看舊帖子,發現你已將原「評論」的答案添加爲後期 - 對於遲到的「接受」後悔。乾杯,SC – 2012-09-02 09:51:42

+0

乾杯,遲到比從未更好。 :) – 2012-09-02 09:57:16

0

你有沒有註冊到您的形式submit事件處理程序?像下面的東西可能存在:

$("form[name=idForm]").submit(function() { 
    // do things like validation 
}); 

如果沒有,你不能(據我所知)直接觸發了jQuery submit()功能。你已經做以下,以提交表單:

$("form[name=idForm]")[0].submit(); 

此外,一定要檢查gmkv's reply on the jQuery API site

+0

感謝您的建議 - 我會去嘗試一下,然後回發... – 2012-02-06 13:15:58

+0

好的 - 經過調查,似乎您的建議更多的是表單不會提交的情況。在這個問題中,表單沒有提出任何問題,但它並沒有提取