javascript - Prevent a form submitting elements that are not needed -
i trying create form shows specific elements not others, problem being submitted , therefore creating conflicts. know display:none isn't going work not sure how change this, java script changes display:none depending on previous form.
<form action="landing.php"> <div id="airport" style="display:none" class="col-md-4"> <select class="form-control" name="destination1"> <?php echo $htmlresult3; ?> </select> </div> <div id="stadium" style="display:none" class="col-md-4"> <select class="form-control" name="destination1"> <?php echo $htmlresult4; ?> </select> </div> <div id="station" style="display:none" class="col-md-4"> <select class="form-control" name="destination1"> <?php echo $htmlresult5; ?> </select> </div> <div id="airport1" style="display:none" class="col-md-4"> <select class="form-control" name="destination2"> <?php echo $htmlresult3; ?> </select> </div> <div id="stadium1" style="display:none" class="col-md-4"> <select class="form-control" name="destination2"> <?php echo $htmlresult4; ?> </select> </div> <div id="station1" style="display:none" class="col-md-4"> <select class="form-control" name="destination2"> <?php echo $htmlresult5; ?> </select> </div> <div class="col-md-4" id="submit" style="display:none"> <input class="form-control" type="submit" value="submit"> </div> </form> <script> function fun(){ var ddl = document.getelementbyid("type1"); var selectedvalue = ddl.options[ddl.selectedindex].value; if (selectedvalue == "stadium") { document.getelementbyid('stadium').style.display = 'block'; document.getelementbyid('airport').style.display = 'none'; document.getelementbyid('station').style.display = 'none'; document.getelementbyid('toptext').style.display = 'block'; document.getelementbyid('submit').style.display = 'block'; } else if (selectedvalue == "airport") { document.getelementbyid('stadium').style.display = 'none'; document.getelementbyid('airport').style.display = 'block'; document.getelementbyid('station').style.display = 'none'; document.getelementbyid('toptext').style.display = 'block'; document.getelementbyid('submit').style.display = 'block'; } else if (selectedvalue == "stations") { document.getelementbyid('stadium').style.display = 'none'; document.getelementbyid('airport').style.display = 'none'; document.getelementbyid('station').style.display = 'block'; document.getelementbyid('toptext').style.display = 'block'; document.getelementbyid('submit').style.display = 'block'; } else{ alert("please choose option!") } } </script> <script> function fun2(){ var ddl = document.getelementbyid("type2"); var selectedvalue = ddl.options[ddl.selectedindex].value; if (selectedvalue == "stadium") { document.getelementbyid('stadium1').style.display = 'block'; document.getelementbyid('airport1').style.display = 'none'; document.getelementbyid('station1').style.display = 'none'; document.getelementbyid('toptext').style.display = 'block'; document.getelementbyid('submit').style.display = 'block'; } else if (selectedvalue == "airport") { document.getelementbyid('stadium1').style.display = 'none'; document.getelementbyid('airport1').style.display = 'block'; document.getelementbyid('station1').style.display = 'none'; document.getelementbyid('toptext').style.display = 'block'; document.getelementbyid('submit').style.display = 'block'; } else if (selectedvalue == "stations") { document.getelementbyid('stadium1').style.display = 'none'; document.getelementbyid('airport1').style.display = 'none'; document.getelementbyid('station1').style.display = 'block'; document.getelementbyid('toptext').style.display = 'block'; document.getelementbyid('submit').style.display = 'block'; } else{ alert("please choose option!") } } </script>
jquery way:
jquery(':submit').click(function(e){ e.preventdefault(); //below code disable first , second select box jquery('select:eq(0), select:eq(1)').each(function(){ jquery(this).prop('disabled', true); }); jquery('form').submit(); })
Comments
Post a Comment