CODEWITHSUNDEEP
jqueryhtmljquery-ui
The Learner
The Learner

Reputation: 3917

jquery select form with a table

I have kept a radio button in each entry of the table rowin a form. I want user to select one row and that row should be send to the server on submission.

so, when I have the row in radio button , my expectation is that only one colum can be selected at given time but I am able to select all the Radio buttons. How to get that selected and send that row information as part of the submit.

<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>

Upvotes: 0

Views: 653

Answers (2)

Karim Magdy Mansour
Karim Magdy Mansour

Reputation: 316

Okay .. First you need to give all your inputs the name name... lets say row-identifier...

now as far as jquery goes you will do the following:

//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;
});​

more information about the jquery post method: http://api.jquery.com/jQuery.post/

more information about the jquery form submit event here: http://api.jquery.com/submit/

hope this helped :)

Upvotes: 1

koopajah
koopajah

Reputation: 25552

To be able to select only one radio button among multiple you need to make them have the same name. And you also should check your code because you give to each radio button two different id attributes

Upvotes: 1

Related Questions