The radio camera selected in one tab does not appear in the other tabs

The problem is that all radio buttons have the same name. Due to their nature, once one radio button is selected, all other radio buttons with the same name will be deselected.

The answer depends on how you submit the form.

Sending each deposit separately :

Each tab is assumed to have a submit button.

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

      

        
        
        
      

    

Sending data for all tabs in general :

There are two options.

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

• Use the structure shown above under "Submitting Each Tab Separately". Use JavaScript to collect data for each form, prepare one dataset (as a JSON string or query string) and submit it using a separate form or Ajax.

  Below is a code snippet demonstrating option # 2. It orders each shape and adds a unique prefix ( form1_
  
  , form2_
  
  etc.) to all element names. All lines of form data are concatenated and can be submitted to the server using one of the methods $.get()
  
  or $.post()
  
  or $.ajax()
  
  .

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