Radio button selected in one tab getting unchecked in other tabs

Question

I am working on a web page where there are 4 tabs and components are same in every tab.Lets say my 1.jsp file is:

 <div id="studentData" class="student">
   Some elements like Name,Age,Standard
   <div class="textDiv">
     <input type="radio" name="gender" id="genderSelection" class="check" value="F"/>
     <input type="radio" name="gender" id="genderSelection" class="check" value="M"/>
   </div>
 </div>

In another JSP File:(2.jsp)

 <div id="firstTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>
 <div id="secondTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>
 <div id="thirdTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>
 <div id="fourthTabComponents">
    <jsp:include page="1.jsp"></jsp:include>
 </div>

Problem I am facing is: I am accessing these elements in js as:(#firstTabComponents #componentId).Whenever I am selecting radio button in one tab , it is getting unchecked in other tabs.

Please let me know if further details are required.

Answer 1

The problem is that all radio buttons have the same name. Due to their nature as soon as one radio button is selected all the remaining radio buttons with the same name would be unchecked.

The answer depends on how you're submitting the form.

Submitting every tab data separately:

This assumes you have a submit button in every tab.

 <div id="firstTabComponents">
    <form id="form1" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>
 <div id="secondTabComponents">
    <form id="form2" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>
 <div id="thirdTabComponents">
    <form id="form3" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>
 <div id="fourthTabComponents">
    <form id="form4" method="post" action="/handler.jsp">
    <jsp:include page="1.jsp"></jsp:include>
    </form>
 </div>

Submitting data for all tabs altogether:

There are two options.

1. You need to clone your 1.jsp into 4 different files and use different names for all the controls.

2. Use the structure shown above in "Submitting every tab data separately". Use JavaScript to collect data for each form, prepare one dataset (as string in JSON format or query string) and submit it using a separate form or Ajax.

   Below is a code snippet that demonstrate option #2. It serializes each form and adds unique prefix (form1_, form2_, etc) to all element names. All form data strings are combined and could be sent to the server using one of the $.get() or $.post() or $.ajax() methods.

// Gets form data string where all element names have prefix prepended
function getFormStrWithPrefix($el, prefix){
    var str = $el.serialize();
    str = ((str !== "") ? prefix : "" )+  str.replace("&", "&" + prefix);
    return str;
}

$('#btn-submit').on('click', function(e){
   var str = 
       getFormStrWithPrefix($('#form1'), 'form1_')
       + '&' + getFormStrWithPrefix($('#form2'), 'form2_')
       + '&' + getFormStrWithPrefix($('#form3'), 'form3_');

    // For testing purposes only
    $('#console').val(str);
    
   //$.post('server.php', str)
});

#console {
    width:100%;
    height:5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1">
    <fieldset><legend>Form 1</legend>
    Gender<br/>
    <label><input type="radio" name="gender" value="M"/> Male</label><br/>
    <label><input type="radio" name="gender" value="F"/> Female</label>
    </fieldset>
</form>
<form id="form2">
    <fieldset><legend>Form 2</legend>
    Gender<br/>
    <label><input type="radio" name="gender" value="M"/> Male</label><br/>
    <label><input type="radio" name="gender" value="F"/> Female</label>
    </fieldset>
</form>
<form id="form3">
    <fieldset><legend>Form 3</legend>
    Gender<br/>
    <label><input type="radio" name="gender" value="M"/> Male</label><br/>
    <label><input type="radio" name="gender" value="F"/> Female</label>
    </fieldset>
</form>

<form id="submit">
    Query that will be sent to the server:<br/>
    <textarea id="console"></textarea><br/>
    <p>
    <button id="btn-submit" type="button">Submit</button>
    </p>
</form>

Answer 2

I am able to solve this problem by changing the name property using js.

jQuery("#secondTabComponents .check").attr("name","gender2");