根据所选的单选按钮启用文本框

时间:2017-09-18 10:09:27

标签: javascript html

这是我在multiple dropdowns and radio buttons提供的上一个问题的扩展。

这是我的问题,我可以选择所有单选按钮并验证它们,但这里是棘手的部分,有comments文本区域,并且从单选按钮设置,如果任何一个匹配到neutralv3),则评论框的文本应为hello,如果任何单选按钮与Strongly Disagree匹配,则评论框应输入任何文字。这是我更新的HTML。

<table>
    <tr>
        <td>I was trained adequetly for my current position *</td>
        <td><input name="cprb1" type="radio" value="V1" /></td>
        <td><input name="cprb1" type="radio" value="V2" /></td>
        <td><input name="cprb1" type="radio" value="V3" /></td>
        <td><input name="cprb1" type="radio" value="V4" /></td>
        <td><input name="cprb1" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I am skillfull enough to fulfill my responsibility *</td>
        <td><input name="cprb2" type="radio" value="V1" /></td>
        <td><input name="cprb2" type="radio" value="V2" /></td>
        <td><input name="cprb2" type="radio" value="V3" /></td>
        <td><input name="cprb2" type="radio" value="V4" /></td>
        <td><input name="cprb2" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I have enough time to fulfill all my responsibility *</td>
        <td><input name="cprb3" type="radio" value="V1" /></td>
        <td><input name="cprb3" type="radio" value="V2" /></td>
        <td><input name="cprb3" type="radio" value="V3" /></td>
        <td><input name="cprb3" type="radio" value="V4" /></td>
        <td><input name="cprb3" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I have required to work a proper number of hours *</td>
        <td><input name="cprb4" type="radio" value="V1" /></td>
        <td><input name="cprb4" type="radio" value="V2" /></td>
        <td><input name="cprb4" type="radio" value="V3" /></td>
        <td><input name="cprb4" type="radio" value="V4" /></td>
        <td><input name="cprb4" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I find my current position secure *</td>
        <td><input name="cprb5" type="radio" value="V1" /></td>
        <td><input name="cprb5" type="radio" value="V2" /></td>
        <td><input name="cprb5" type="radio" value="V3" /></td>
        <td><input name="cprb5" type="radio" value="V4" /></td>
        <td><input name="cprb5" type="radio" value="V5" /></td>
    </tr>
    <tr>
        <td>I think my work is appritiate enough *</td>
        <td><input name="cprb6" type="radio" value="V1" /></td>
        <td><input name="cprb6" type="radio" value="V2" /></td>
        <td><input name="cprb6" type="radio" value="V3" /></td>
        <td><input name="cprb6" type="radio" value="V4" /></td>
        <td><input name="cprb6" type="radio" value="V5" /></td>
    </tr>
</table>
Comments
<textarea name="comment" id="cprComment"></textarea>
<input type="submit" value="Submit" onclick="validate()">

这是我的javascript

function validate() {
if (getTheValueForDisagree('cprb1') || getTheValueForDisagree('cprb2') || getTheValueForDisagree('cprb3') || getTheValueForDisagree('cprb4') || getTheValueForDisagree('cprb5') || getTheValueForDisagree('cprb6')) {
                if (document.getElementById("cprComment").value === "") {
                    alert("Comments for How do you feel about your current position? is required");
                    return false;
                }

            }

            if (getTheValueForNeutral('cprb1') || getTheValueForNeutral('cprb2') || getTheValueForNeutral('cprb3') || getTheValueForNeutral('cprb4') || getTheValueForNeutral('cprb5') || getTheValueForNeutral('cprb6')) {
                if (document.getElementById("cprComment").value === "") {
                    document.getElementById("cprComment").value = "Hello";
                }
            }

}
function getTheValueForDisagree(name) {
            var cprb = document.getElementsByName(name);

            for (var i = 0; i < cprb.length; i++) {
                if (cprb[i].value === "V5") {
                    return true;
                }

            }
        }

        function getTheValueForNeutral(name) {
            var cprb = document.getElementsByName(name);
            for (var i = 0; i < cprb.length; i++) {
                if (cprb[i].value === "V3")
                    return true;
            }
        }

并且在选择neutralstrongly disagree的情况下,应根据订单填写评论。例如。如果首先选择strongly disagree,然后在下一个选择Neutral,则文本区域中应该有文本,如果它在另一方面Hello应该在文本区域中

1 个答案:

答案 0 :(得分:0)

希望这会有所帮助..

    function validate() {
        var gr1 = document.querySelector('input[name = "cprb1"]:checked').value;
        var gr2 = document.querySelector('input[name = "cprb2"]:checked').value;
        var gr3 = document.querySelector('input[name = "cprb3"]:checked').value;
        var gr4 = document.querySelector('input[name = "cprb4"]:checked').value;
        var gr5 = document.querySelector('input[name = "cprb5"]:checked').value;
        var gr6 = document.querySelector('input[name = "cprb6"]:checked').value;

        console.log(gr1 + "  " + gr2 + " " + gr3 + "  " + gr4 + " " + gr5 + "  " + gr6);

        if (gr1 === "V5" || gr2 === "V5" || gr3 === "V5" || gr4 === "V5" || gr5 === "V5" || gr6 === "V5" ) {
            if (document.getElementById("cprComment").value === "") {
                alert("Comments for How do you feel about your current position? is required");
                return false;
            }

        }

        if (gr1 === "V3" || gr2 === "V3" || gr3 === "V3" || gr4 === "V3" || gr5 === "V3" || gr6 === "V3" ) {
            if (document.getElementById("cprComment").value === "") {
                document.getElementById("cprComment").value = "Hello";
            }
        }

    }