2011-07-09 79 views
2

我的網站上有很多表單。當表單上的提交被觸發時,我希望收到表單的ID和所選的選項。在JQuery中選擇當前表單的值

HTML

<form name="order"> 
    <select id="count"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select><br/> 
    <input type="text" name="id" value="6" /> 
    <input href="#" type="submit" value="Submit" /> 
</form> 

的JavaScript

var fancyboxOptions = { 
    ajax : { 
     type: "POST", 
     data: { 
      id: null, 
      count: null 
     } 
    } 
} 

$(document).ready(function() { 

    fancyboxOptions.ajax.data.id = $('input[name="id"]').val(); 
    fancyboxOptions.ajax.data.count = $('#count').val(); 

    $('div#buy input').fancybox(fancyboxOptions); 

    $('#count').change(function() { 
     fancyboxOptions.ajax.data.count = $('#count').val(); 
    }); 

有了這個代碼,我收到了第一隻表單數據 - 觸發其他形式我從第一種形式,而不是從接收數據時,提交我按下提交的表單。

我如何重構我的代碼,所以表單提交觸發提交,只給我按下提交的表單中的數據。

PS不要關注fancybox,它的工作很好。

回答

1

可能要更改您的代碼是這樣的

<script> 
$('input[name=id]').parent().change(function(){ 
    fancyboxOptions.ajax.data.id = $(this).find('input[name="id"]').val(); 
    fancyboxOptions.ajax.data.count = $(this).find('#count').val(); 
}); 
</script> 

這將安裝包含名爲ID的輸入欄的每個表單上的變化處理,並回調函數(安裝在parent()表單上)將可以訪問「this」,它可以瀏覽DOM並找到所有與表單節點相關的子字段。

+0

非常感謝,這對我非常有幫助。 – NiLL

1

您是否需要遍歷頁面上的所有表單並在單擊一個按鈕後獲取它們的值?如果是的話,試試這個:

$('form').each(function(){ 
    var currentForm = $(this); 

    var someValue = currentForm.find('input[name="id"]').val(); 

    // do the rest here 
}); 

如果這不是你的問題,那麼也許它是與IDS使用您的輸入,而不是類。你只能使用一次id,所以如果你的其他表單也包括< select id =「count」>那麼當jQuery讀取該值時,它只會返回第一個值。

希望這有助於...