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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -