Question

我正在尝试创建一个显示特定元素但不显示其他元素的表单，问题是所有元素都被提交，因此会产生冲突。我知道显示：没有没有工作，但我不知道如何改变它，我的java脚本改变了显示：none取决于以前的形式。

<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 An 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 An Option!")
   }
}
</script>

Answer 1

jQuery方式：

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();
})

阻止表单提交不需要的元素

1 个答案: