Submit master form with only active detail tab form

PHP
,
1

I have my form which consist of one master form and 2 details parts which on two different tab (submit button is on only main form outside tabs.). I am trying to submit master form with only active tab(either first tab or 2nd tab) form with single click. Currently when i submit try to submit data with active tab only, then its not submitted until mandotry fields of inactive tab are fill here is the code :

  `<form method="POST" action="abc.php">
   <input type="text" name= "mrno"  id= "mrno" > <br>
   <input type="text" name= "name1"  id= "name1" > <br>
    <div class="tab">
    <button class="tablinks" type="button" onclick="openCity(event, 'London')">Value Range          Result</button>
          <button class="tablinks" type="button"onclick="openCity(event, 'Paris')">Fixed Test       Result</button>
    </div>
     <div id="London" class="tabcontent">
     <input type="text" name= "maleage"  id= "maleage" > <br>
      <input type="text" name= "maleedu"  id= "maleedu" > <br>
        </div>

      <div id="Paris" class="tabcontent">
     <input type="text" name= "femage"  id= "femage" > <br>
      <input type="text" name= "femedu"  id= "femedu" > <br> 
           </div>`

Java script code

    `<script>
    function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
       for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
           }
    tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
          }
        document.getElementById(cityName).style.display = "block";
         evt.currentTarget.className += " active";
              }
            </script>

         <input type="submit" name="submit" id="submit" value="Submit"> 
             </form> `
2

Javascript and Jquery are not really my thing, but there is probably a way of doing this with those.
But from the PHP point of view (you posted this in the PHP Forum), it needs to know which tab was selected when the form was submitted.
One way to do that would be to make the tabs radio inputs instead of buttons. That way if the user selects “London” PHP knows to disregard the inputs from the “Paris” tab.
At the same time in the form you can use JS or CSS to show/hide the appropriate tab based on selection, you don’t even need see the radio “dot” if you wish.

3

You would need to post the code that makes these fields mandatory?

4

I believe what you want to do is disable the inputs which are not selected and hidden.

Your tabcontent <div tags each have unique ids with the city names and can be used to define which set of inputs are to be disabled. You are sending the selected city in your JS call but we would need all cities defined with the same values as the ids so I added some hidden inputs defined by class="city" so they can be picked up with JS. Note: I purposely left out the name attribute so these inputs are not sent when you submit the form.

<input type="hidden" class="city" value="London">
<input type="hidden" class="city" value="Paris">

… which then can be picked up with JS.

cities = document.getElementsByClassName("city");

I needed to define the parent objects(divs) where the inputs are as $ so we then look in these divisions for the id.

$(tabcontent);

Like you’ve already done, we can use for() to loop through the cities array to get each city name. We can then compare the city name to cityName to define if the child inputs in this <div are disabled or not.

$(tabcontent);
for (i = 0; i < cities.length; i++) {
	city = cities[i].value;
	if(city == cityName ){
		$("#"+city+" :input").attr("disabled", false);
	}else{
		$("#"+city+" :input").attr("disabled", true);
	}	
}

Now when you submit the form only the visible active inputs are sent. You can add print_r() to check.

<?php
echo "<pre>";
print_r($_POST); 
echo "</pre>";
?>

e.g.

Array
(
    [mrno] => 51452
    [name1] => Drummin
    [maleage] => 35
    [maleedu] => 22
    [submit_form] => Submit
)

I added some labels to those tab controlled inputs so I could see that the inputs were indeed being changed(shown or hidden) . I also changed the name of your submit input to a unique name (submit_form) OTHER THAN submit as that may cause you problems.
This is my version.

<form method="post" action="abc.php">
	<input type="text" name= "mrno"  id= "mrno" > <br>
	<input type="text" name= "name1"  id= "name1" > <br>
	<div class="tab">
		<input type="hidden" class="city" value="London">
		<input type="hidden" class="city" value="Paris">
		<button class="tablinks" type="button" onclick="openCity(event, 'London')">Value Range          Result</button>
		<button class="tablinks" type="button" onclick="openCity(event, 'Paris')">Fixed Test       Result</button>
	</div>
	<div id="London" class="tabcontent">
		<label for="maleage">Maleage:</label> <input type="text" name="maleage"  id="maleage" required > <br>
		<label for="maleedu">Maleedu:</label> <input type="text" name="maleedu"  id="maleedu" required > <br>
	</div>
	
	<div id="Paris" class="tabcontent">
		<label for="femage">Femage:</label> <input type="text" name= "femage"  id="femage" required > <br>
		<label for="femedu">Femedu:</label> <input type="text" name= "femedu"  id="femedu" required > <br> 
	</div>
	
	<input type="submit" name="submit_form" id="submit" value="Submit">
</form>					 
					 
<script>
	function openCity(evt, cityName) {
	
		var i, tabcontent, tablinks, city;
		tabcontent = document.getElementsByClassName("tabcontent");
		tablinks = document.getElementsByClassName("tablinks");
		cities = document.getElementsByClassName("city");			
			
		for (i = 0; i < tabcontent.length; i++) {					
			tabcontent[i].style.display = "none";	
		}		
			
		for (i = 0; i < tablinks.length; i++) {
			tablinks[i].className = tablinks[i].className.replace(" active", "");
		}
		document.getElementById(cityName).style.display = "block";
		evt.currentTarget.className += " active";		
			 
		$(tabcontent);
		for (i = 0; i < cities.length; i++) {
			city = cities[i].value;
			if(city == cityName ){
				$("#"+city+" :input").attr("disabled", false);
			}else{
				$("#"+city+" :input").attr("disabled", true);
			}
		}
	}
</script>

Now of course on the PHP end of processing this form you will need to deal with inputs being different.

5

This slightly modified version has inputs and main submit input disabled and then made active once a tab has been selected.

<form method="post" action="abc.php">
	<input type="text" name= "mrno"  id= "mrno" > <br>
	<input type="text" name= "name1"  id= "name1" > <br>
	<div class="tab">
		<input type="hidden" class="city" value="London">
		<input type="hidden" class="city" value="Paris">
		<button class="tablinks" type="button" onclick="openCity(event, 'London')">Value Range          Result</button>
		<button class="tablinks" type="button" onclick="openCity(event, 'Paris')">Fixed Test       Result</button>
	</div>
	<div id="London" class="tabcontent">
		<label for="maleage">Maleage:</label> <input type="text" name="maleage"  id="maleage" required disabled> <br>
		<label for="maleedu">Maleedu:</label> <input type="text" name="maleedu"  id="maleedu" required disabled> <br>
	</div>
	
	<div id="Paris" class="tabcontent">
		<label for="femage">Femage:</label> <input type="text" name= "femage"  id="femage" required disabled> <br>
		<label for="femedu">Femedu:</label> <input type="text" name= "femedu"  id="femedu" required disabled> <br> 
	</div>
	
	<div id="submit" class="submit_section">
	<input type="submit" name="submit_form" value="Submit" disabled>
	</div>
</form>					 
					 
<script>
	function openCity(evt, cityName) {
	
		var i, tabcontent, tablinks, city;
		tabcontent = document.getElementsByClassName("tabcontent");
		tablinks = document.getElementsByClassName("tablinks");
		cities = document.getElementsByClassName("city");
		submit_section = document.getElementsByClassName("submit_section");				
			
		for (i = 0; i < tabcontent.length; i++) {					
			tabcontent[i].style.display = "none";	
		}		
			
		for (i = 0; i < tablinks.length; i++) {
			tablinks[i].className = tablinks[i].className.replace(" active", "");
		}
		document.getElementById(cityName).style.display = "block";
		evt.currentTarget.className += " active";		
			 
		$(tabcontent);
		for (i = 0; i < cities.length; i++) {
			city = cities[i].value;
			if(city == cityName ){
				$("#"+city+" :input").attr("disabled", false);
			}else{
				$("#"+city+" :input").attr("disabled", true);
			}
		}	
		
		$(submit_section);
		$("#submit :input").attr("disabled", false);
	}
</script>
6

Thanks alot, its solve the issue

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.