如何在同一个php页面上显示和隐藏多个表单[关闭]

I have four type forms to show on the same page based on the value selected in Dropdown. if

Condition 1: If Rear Tire and 2WD Selected i want to show form name= "RA"

Condition 1: If Rear Tire and MFWD Selected i want to show form name= "RB"

Condition 1: If Front Tire and MFWD Selected i want to show form name= "FA"

Condition 1: If Front Tire and 2WD Selected i want to show form name= "FB"

I get it to work by creating Multiple pages but that make the page load slow and not friendly rather i want to load based on the selected values on the same page

<select class="FrontRearTire">
    <option value="">Select Tire</option>
    <option value="RearTire">Rear Tyre</option>
    <option value="FrontTire">Front Tire</option>
</select>

<select class="TractorType">
    <option value="">Select Tractor</option>
    <option value="2WD">2WD</option>
    <option value="MFWD">MFWD</option>
</select>

<div class="RearTire2WD" style="display:none;">
    <form>RearTire2WD</form>
</div>

<div class="RearTireMFWD" style="display:none;">
    <form>RearTireMFWD</form>
</div>

<div class="FrontTire2WD" style="display:none;">
    <form>FrontTire2WD</form>
</div>

<div class="FrontTireMFWD" style="display:none;">
    <form>FrontTireMFWD</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $('.FrontRearTire').change(function(){
        var frontRearTire= $('.FrontRearTire').val();
        var tractorType= $('.TractorType').val();
        show(frontRearTire,tractorType);
    });
    $('.TractorType').change(function(){
        var frontRearTire= $('.FrontRearTire').val();
        var tractorType= $('.TractorType').val();
        show(frontRearTire,tractorType);
    });
    function show(frontRearTire,tractorType){
        var showDiv = "."+frontRearTire+tractorType;
        $(showDiv).show().siblings("div").hide();
    }
</script>

Giving Description in few minutes.

A quick n dirty way of doing this without lots of JS would be to re-load the page every time a form option is picked.

On each <select> add the following code:

<select onChange="this.form.submit()">

That will reload the page after a CBO is updated.

From there, run an if statement on your next dropdown.

if($_POST['tyre'] == 'rear' && $_POST['type'] == '2WD') {
    require_once '_rbForm.php';
}

Like I said, quick n dirty. It's not perfect, but it does what you're asking and quickly.

There is a solution with only using javascript:

function check()
{

  var select1=document.getElementById('s1').value;
  var select2=document.getElementById('s2').value;
  
  if ((select1==1)&&(select2==1)){
     document.getElementById('default').innerHTML = document.getElementById("RA").innerHTML;
  }
  else if ((select1==1)&&(select2==2)){
     document.getElementById('default').innerHTML = document.getElementById("RB").innerHTML;
  }
  else if ((select1==2)&&(select2==1)){
     document.getElementById('default').innerHTML = document.getElementById("FA").innerHTML;
  }
  else if ((select1==2)&&(select2==2)){
     document.getElementById('default').innerHTML = document.getElementById("FB").innerHTML;
  }

}

<select onchange="check();" id="s1">
  <option value="0" selected disabled>Select element</option>
  <option value="1">Rear Tire</option>
  <option value="2">Front Tire</option>
</select>

<select onchange="check();" id="s2">
  <option value="0" selected disabled>Select element</option>
  <option value="1">2WD</option>
  <option value="2">MFWD</option>
</select>

<div id="default"></div>
<div id="RA" style="display: none;">Form RA</div>
<div id="RB" style="display: none;">Form RB</div>
<div id="FA" style="display: none;">Form FA</div>
<div id="FB" style="display: none;">Form FB</div>

</div>

You can show and hide DIVs on the same page with pure Javascript (not even jQuery):

function showMe(what) {
 var targ = what.options[what.selectedIndex].value;
 var allDivs = document.getElementsByClassName('output');
 for (i = 0; i < allDivs.length; i++) allDivs[i].style.display = 'none';
 document.getElementById('div_' + targ).style.display = 'block';
}

Then the HTML:

<select name="zob" onchange="showMe(this)">
<option value='' selected>-- select --</option>
<option value="1">RA</option>
<option value="2">RB</option>
<option value="3">FA</option>
<option value="4">FB</option>
</select>
<hr>
<div id='div_1' class='output'>This is option 1 selected</div>
<div id='div_2' class='output'>This is option 2 selected</div>
<div id='div_3' class='output'>This is option 3 selected</div>
<div id='div_4' class='output'>This is option 4 selected</div>

Then the CSS:

.output{
  display: none;
}

See jsFiddle: https://jsfiddle.net/48cp42r7/

<form id=form>

<select id=first onfocus="validate()" onchange ="validate()">
<option disabled=disabled selected=selected>please Choose</option>
<option>Rear Tire</option>
<option>Front Tire</option>

</select>

<select id=seconed onfocus="validate()" onchange ="validate()">
<option disabled=disabled selected=selected>please Choose</option>
<option>MFWD</option>
<option>2WD</option>

</select>
<input type=submit value="go">

</form>

<form id="RA" style="display:none"><input type=submit value="RA"></form>
<form id="RB" style="display:none"><input type=submit value="RB"></form>
<form id="FA" style="display:none"><input type=submit value="FA"></form>
<form id="FB" style="display:none"><input type=submit value="FB"></form>

<script>
function validate(){
var first = document.getElementById("first");
var firstval = first.options[first.selectedIndex].value;
var seconed = document.getElementById("seconed");
var seconedval = seconed.options[seconed.selectedIndex].value;

if(firstval == "Rear Tire" && seconedval ==  "2WD"){
document.getElementById("RA").style.display="";
document.getElementById("RB").style.display="none";
document.getElementById("FA").style.display="none";
document.getElementById("FB").style.display="none";
}else if(firstval == "Rear Tire" && seconedval ==  "MFWD"){
document.getElementById("RA").style.display="none";
document.getElementById("RB").style.display="";
document.getElementById("FA").style.display="none";
document.getElementById("FB").style.display="none";
}
else if(firstval == "Front Tire" && seconedval ==  "MFWD"){
document.getElementById("RA").style.display="none";
document.getElementById("RB").style.display="none";
document.getElementById("FA").style.display="";
document.getElementById("FB").style.display="none";
}
else if(firstval == "Front Tire" && seconedval ==  "2WD"){
document.getElementById("RA").style.display="none";
document.getElementById("RB").style.display="none";
document.getElementById("FA").style.display="none";
document.getElementById("FB").style.display="";
}
else{}

}
</script>

</div>