基于复选框打开的php页面打开

时间:2016-10-27 16:53:19

标签: javascript jquery html checkbox

我创建了一个包含5个选项的下拉菜单。同一页面上还有6个复选框以及一个NEXT按钮(输入类型)。单击下拉列表的第一个选项启用前三个复选框,第二个选项启用后三个(禁用前三个)复选框。现在我想为不同的下拉选项打开不同的php页面。 让我总结一下,我从下拉菜单中选择选项1然后从复选框中选中选项3,当我点击下一页时,从下拉菜单中选择目标1的下一页应该打开。下拉列表中有5个不同页面可供5个选项使用。因此它应该与下拉列表相关联,并且已选中的复选框应该进入数据库。

这是代码

    <select id="Objective" form="theForm" name="category" >
            <option value="0" selected="1">Choose from dropdown</option>
        <option value="bet">beta</option>
        <option value="theth">thetha</option>
        <option value="p">pi</option>
        <option value="ps">psi </option>
        <option value="alph">alpha</option>
    </select>

<input type="checkbox" class="dissable" onclick="check();" value="1" /> Laptops
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Computers 
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Art 
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Computers Peri
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Movies
<input type="checkbox" class="dissable" onclick="check();" value="2"/> Beauty 

<script>
$("#Objective").on("change", function () {
    $(".dissable[value='1']").prop("disabled", false);
    $(".dissable[value='2']").prop("disabled", false);
    if ($(this).val() == "theth") {
        $(".dissable[value='1']").prop("disabled", true);
    } else if ($(this).val() == "bet") {
        $(".dissable[value='2']").prop("disabled", true);
    } else {
        $(".dissable[value='1']").prop("disabled", true);
        $(".dissable[value='2']").prop("disabled", true);

    }
}).trigger('change');

<input type='submit' name='submit' value='Next' align='right'/>

我想我已经明确了问题,如果仍有疑问仍然存在,请询问..

1 个答案:

答案 0 :(得分:1)

嗯,它可能是一个转录错误,但似乎缺少结束脚本标记。此外,要将其提交到您的php文件,请务必使用具有所需操作的表单标记。

<form id="myform" action="yourphpfile.php" method="post">
<select id="Objective" form="theForm" name="category" >
    <option value="0" selected="1">Choose from dropdown</option>
    <option value="bet">beta</option>
    <option value="theth">thetha</option>
    <option value="p">pi</option>
    <option value="ps">psi </option>
    <option value="alph">alpha</option>
</select>

<input type="checkbox" class="dissable" onclick="check();" value="1" /> Laptops
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Computers
<input type="checkbox" class="dissable" onclick="check();" value="2" /> Art
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Computers Peri
<input type="checkbox" class="dissable" onclick="check();" value="1" /> Movies
<input type="checkbox" class="dissable" onclick="check();" value="2"/> Beauty

<input type='submit' name='submit' value='Next' align='right'/>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$("#Objective").on("change", function () {
    $(".dissable[value='1']").prop("disabled", false);
    $(".dissable[value='2']").prop("disabled", false);
    if ($(this).val() == "theth") {

        // update form action for theth
        $("#myform").attr('action', 'theth.php');

        $(".dissable[value='1']").prop("disabled", true);
    } else if ($(this).val() == "bet") {

        // update form action for bet
        $("#myform").attr('action', 'bet.php');

        $(".dissable[value='2']").prop("disabled", true);
    } else {

        // assuming default means no change to form action

        $(".dissable[value='1']").prop("disabled", true);
        $(".dissable[value='2']").prop("disabled", true);
    }
});
function check() {
  // what is this supposed to do?
}
</script>

我也不确定函数check()应该做什么。