2012-12-08 94 views
0

我在表格的每一行中保留了一個單選按鈕。 我希望用戶選擇一行,並在提交時將該行發送到服務器。jquery select table with table

因此,當我有單選按鈕中的行時,我的期望是在給定時間只能選擇一個柱,但我可以選擇所有單選按鈕。如何獲取所選內容並將該行信息作爲提交的一部分發送。

<form id="myform1" action="/data" method="post" >  

<table> 
<tr>  

     <td > <input type="text" id="slno1" size="25" value="10" /> </td>  
     <td > <input type="text" id="data" size="10" value="this is a test" /> </td>  
     <td > <input type="radio" value="" id="editable" /> </td>  
    </tr> 
    <tr>  

     <td > <input type="text" id="slno2" size="25" value="10" /> </td>  
     <td > <input type="text" id="data1" size="10" value="this is a test1" /> </td>  
     <td > <input type="radio" value="" id="editable" /> </td>  
    </tr> 
    </table> 
    <input type="submit" id="mysu1" Value="submits" /> 

</form> 

回答

1

好了。首先,你需要讓所有的輸入名字名字......可以說,行標識符...

現在就jQuery的推移,你會做到以下幾點:

//First we select the form and listen to the submit event 
$("#myform1").submit(function(event) { 
    //we get which radio button was selected 
    var theForm = $(this); 
    var theSelectedRadioButton = theForm.find('input[name="row-identifier"]:checked'); 

    //from here we can get the entire row that this radio button belongs to 
    var theSelectedRow = theSelectedRadioButton.parents("tr:first").get(0).outerHTML; 

    //now theSelectedRow should have the row html you want... you can send it to the server using an ajax request and voiding this default action of the form "which is redirect to the action page 
    $.post("YOUR_SERVER_URL", { 
     rowHTML: theSelectedRow 
    }); 
    event.preventDefault(); 
    return false; 
});​ 

關於jQuery的POST方法的詳細信息:http://api.jquery.com/jQuery.post/有關jQuery的形式

更多信息提交的事件在這裏:http://api.jquery.com/submit/

希望這有助於:)

1

爲了能夠在多個選項中只選擇一個單選按鈕,需要使它們具有相同的名稱。而你,因爲你給每個單選按鈕也應該檢查你的代碼,兩個不同的ID屬性

+0

謝謝@koopajah你清除了一個問題。另一個是當我選擇我試圖使用的單選按鈕:$(「:checked」)。val()並選擇該值我該如何做 –