Lewis Smith February 2016

Prevent a form submitting elements that are not needed

I am trying to create a form that shows specific elements but not others, the problem is that all are being submitted and therefore creating conflicts. I know that display:none isn't going to work but I am not sure how to change this, my java script is what changes the display:none depending on a 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>        

Answers


kp singh February 2016

jQuery way:

jQuery(':submit').click(function(e){
   e.preventDefault();
   //below code will disable first and second select box
   jQuery('select:eq(0), select:eq(1)').each(function(){
     jQuery(this).prop('disabled', true);        
   });
   jQuery('form').submit();
})

Post Status

Asked in February 2016
Viewed 1,622 times
Voted 13
Answered 1 times

Search




Leave an answer