JavaScript决策语句无法正常工作

时间：2019-05-06 01:09:47

标签： javascript

我目前正在处理应该接受用户输入的Web表单。婚姻形式询问用户他们当前是否已婚，如果回答“是”，那么下面还会出现另一个下拉式问题，询问“您已结婚多少次？”。等等等等。我创建了决定声明，但是当我测试婚姻形式并输入“是”时，没有其他提示。

预期结果是，当用户对另一个问题回答“是”时，该问题应该显示在下方。

Marital.php 

    <!doctype html>
<html lang="en">
      <style>
    .navbar {
        overflow: hidden;
        background-color: #333;
        font-family: Arial;
    }

    .active {
        background-color: #4CAF50;
        color: white;
    }
    /* Links inside the navbar */

    .navbar a {
        float: left;
        font-size: 16px;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
</style>
<head>

</head>
<body style="text-align:center;">
    <div style="margin:0 auto; text-align:center;">
        <img src="../Images/CBH Logo 200px.png" alt="CBH Logo" height="80" width="80">
    </div>
    <h2>Johnson Behavioral Health Mental Evaluation Intake Application</h2>
    <br>
    <div class="navbar">
        <a>Education History</a>
        <a class="active" href="Marital.php">Marital History</a>
        <a>Employment History</a>
        <a>Military History</a>
        <a>Substances History</a>
        <a>Social/Personal History</a>
        <a>Physical Health History</a>
        <a>Mental Health History</a>
    </div>
    <form method="POST" id="marital_form" onsubmit="SetSectionComplete('marital')">

        <br></br>
        <table style="margin:0 auto;">
            <tr>
                <td class="Question">
                    Are you currently married?
                </td>
                <td style="width:100px;">
                    <select type="text" id="married" name="married" style="width:100%;" class="needs_saved_marital" required>
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="evermarried_row">
                <td>
                    Have you ever been married?
                </td>
                <td>
                    <select type="text" id="evermarried" name="evermarried" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="howmanymarriages_row">
                <td>
                    How many times have you been married?
                </td>
                <td>
                    <select type="text" id="howmanymarriages" name="howmanymarriages" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                        <option value='4'>4</option>
                        <option value='5 or more'>5 or more</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="divorced_row">
                <td>
                    Have you ever been divorced?
                </td>
                <td>
                    <select type="text" id="divorced" name="divorced" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="widowed_row">
                <td>
                    Are you widowed?
                </td>
                <td>
                    <select type="text" id="widowed" name="widowed" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="children_row" required>
                <td>
                    Do you have any children?
                </td>
                <td>
                    <select type="text" id="children" name="children" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='Yes'>Yes</option>
                        <option value='No'>No</option>
                    </select>
                </td>
            </tr>

            <tr style="display:none" id="howmanychildren_row">
                <td>
                    How many children do you have?
                </td>
                <td>
                    <select type="text" id="howmanychildren" name="howmanychildren" style="width:100%;" class="needs_saved_marital">
                        <option value=''></option>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                        <option value='4'>4</option>
                        <option value='5'>5</option>
                        <option value='6'>6</option>
                        <option value='7 or more'>7 or more</option>
                    </select>
                </td>
            </tr>

        </table>
        <table style="margin:0 auto;">
            <tr>
                <td><button class="reset_button" type="reset" value="Reset" id="marital_reset">Clear Marital</button></td>
                <td><input type="button" value="Back!" onclick="history.back()"></td>
                <td><button class="save_button" formaction="Employment.php" id="marital_save" name="marital_save" value="Submit">Next</button></td>
            </tr>
        </table>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="Marital.js">
        function Marital_Validation() {
            $('#marital_save').css('border-color', '#163c6a');
            $('#marital_save').css('background', 'none');
            $('#marital_save').css('background-color', 'green');
            $('#marital_save').css('color', 'white');
            $('#marital_save').text('Saved');
            $('#marital_indicator').css('background-color', 'green');
        }
    </script>
</body>
</html>

Marital.js 

/*
 Marital variables:

married
evermarried
howmanymarriages
divorced  
widowed  
children
howmanychildren

*/

$(function(){

    $("#married").change(function(){
        var option=$("#married").val();
        if (option==='No'){
            $("#evermarried_row").show();
        }
        if (option==='Yes'){
            $("#howmanymarriages_row").show();
        }
    });

    $("#evermarried").change(function(){
        var option=$("#evermarried").val();
        if (option==='No'){
            $("#children_row").show();
            $("#howmanymarriages_row").hide();
        }
        if (option==='Yes'){
            $("#howmanymarriages_row").show();
        }
    });

    $("#howmanymarriages").change(function(){
        var option=$("#howmanymarriages").val();
        var married=$("#married").val();
        if (option==='1'){
            if (married==='Yes'){
                $("#children_row").show();
                $('#divorced_row').hide();
                $("#widowed_row").hide();
            }
            if (married==='No'){
                $('#divorced_row').show();
            }
        }
        if (option==='2' || option==='3' || option==='4' || option==='5 or more'){
            $('#divorced_row').show();

        }
    });

    $("#divorced").change(function(){
        var option=$("#divorced").val();
        var married=$("#married").val();
        var timesmarried=$("#howmanymarriages").val();
        if (option==='No'){
            $("#widowed_row").show();

        }
        if (option==='Yes'){
            if (timesmarried==='1'){
                $("#widowed_row").hide();
                $("#children_row").show();
            }
            if (timesmarried==='2' || timesmarried==='3' || timesmarried==='4' || timesmarried==='5 or more'){
                $("#widowed_row").show();

            }
        }
    });

    $("#widowed").change(function(){
        $("#children_row").show();
    });

    $("#children").change(function(){
        var option=$("#children").val();
        if (option==='No'){
            $("#howmanychildren_row").hide();
        }
        if (option==='Yes'){
            $("#howmanychildren_row").show();
        }
    });

    $(".needs_saved_marital").change(function(){
        var married=$("#married").val();
        var evermarried=$("#evermarried").val();
        var howmanymarriages=$("#howmanymarriages").val();
        var divorced=$("#divorced").val();
        var widowed=$("#widowed").val();  
        var children=$("#children").val();
        var howmanychildren=$("#howmanychildren").val();

        if (married==='Yes'){
            $("#evermarried").attr('required',false);
            $("#divorced").attr('required',false);
            $("#widowed").attr('required',false);
            $("#howmanymarriages").attr('required',true);
        }
        if (married==='No'){
            $("#divorced").attr('required',false);
            $("#widowed").attr('required',false);
            $("#evermarried").attr('required',true);
        }

        if (evermarried==='Yes'){
            $("#howmanymarriages").attr('required',true);
            $("#divorced").attr('required',true);
            $("#widowed").attr('required',true);
        }
        if (evermarried==='No'){
            $("#divorced").attr('required',false);
            $("#widowed").attr('required',false);
            $("#children").attr('required',true);
        }

        if (howmanymarriages==='2' || howmanymarriages==='3' || howmanymarriages==='4' || howmanymarriages==='5 or more'){
            $("#divorced").attr('required',true);
            $("#widowed").attr('required',true);
        }

        if (children==='Yes'){
            $("#howmanychildren").attr('required',true);
        }
        if (children==='No'){
            $("#howmanychildren").attr('required',false);
        }
    });

});

2 个答案:

答案 0 :(得分：3)

您应该修剪字符串，以避免出现不匹配的错误，并更好地使用隐藏的CSS可见性！

 // like this
 var option=$("#married").val().trim();

 // like this
 <tr style="visibility: hidden;" ></tr>

答案 1 :(得分：2)

它正在按预期方式工作。查看这个小提琴：https://jsfiddle.net/ax6kfjvz/

我猜您在脚本中之后加入了jQuery。或者，您根本不包括jQuery。试试这个模板：

<!doctype html>
<html lang="en">

<head>
  <title>Couples Issues</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="js/your-awesome-script.js"></script>
</body>

</html>

使用库时，必须在脚本之前包含它们，否则浏览器不知道该功能$()的来源。

Here is a good article.

相关问题
最新问题