我正在嘗試使用文本框和下拉菜單在HTML代碼中進行驗證

Question

我目前正在嘗試計算的代碼是我有一個下拉框，這是必填項。 如果從該下拉框中選擇“完成”，則會出現一個文本框。 如果從該下拉框中選擇“放棄”，則會出現另一個下拉框以及其他選項。

選擇第一個下拉菜單后，我嘗試將驗證添加到這些第二個選項上。 在我的代碼中，我將第一個下拉框“ ActionDD”標記為必填字段。 但是我無法使用文本框“ REMtextBox”或“ ReasonDD”下拉框來執行此操作，因為它們永遠不會同時出現。

這是我的表格的代碼

<form name=StudentForm action="javascript:window.close();">   
<div class="DDbox">
<select name="Action" id="ActionDD" required onchange="showHide()">
    <option value="">Action:</option>
    <option value="complete">Complete</option>
    <option value="abandon">Abandon</option>
    <option value="transfer">Transfer</option>
</select>
</div>
<br>
<div class="COMPLETEbox" id="COMPLETEbox" >
    <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;"/><br>

<select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;">
    <option value="">Reason:</option>
    <option value="NoShow">No Show</option>
    <option value="Unfixable">Unfixable</option>
    <option value="other">Other</option>
</select><br><br>
    <br>
  <input type="submit" value="submit" onclick="checkform();">
</div>
</form>

這是我一直在為JavaScript編寫的代碼，用於在按下Submit按鈕時檢查條件。

 function checkform() {
    if (document.getElementById('ActionDD').value ="abandon" && (document.getElementById('ReasonDD').value =""))
        {
            validationMessage = validationMessage + 'Enter Reason';
            valid = false;
        }
        else valid = true;
}
</script>

我正在尋找一種解決方案，用於檢查第一個下拉列表是否選擇了值，然后從第一個下拉列表中選擇的值出現的相應文本框或下拉列表都已選擇。

在此先感謝您的幫助。

Answer 1

試試下面的代碼。 想法是在更改ActionDD下拉菜單時設置/刪除“ required”屬性。 希望能幫助到你。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>HTML code with text-boxes and drop-downs</title>

    <script type="text/javascript">

        var actionBox,
            reasonBox,
            completeBox,
            remTextBox,
            selectedAction,
            isFormValid, 
            validationMessage = "Not all required fields are filled in; ";

        function init() {
            actionBox = document.getElementById('ActionDD');
            reasonBox = document.getElementById('ReasonDD');
            completeBox = document.getElementById('COMPLETEbox');
            remTextBox = document.getElementById('REMtextBox');
            selectedAction = actionBox.value;

            remTextBox.style.display = 'none';
            remTextBox.removeAttribute("required");

            reasonBox.style.display = 'none';
            reasonBox.removeAttribute("required");

            isFormValid = false;
        }

        function checkform() {
            // Include other logic if needed here...
        }

        function showHide() {
            init();

            if (selectedAction == 'complete') {
                remTextBox.style.display = 'block';
                remTextBox.setAttribute("required", "required");
            }
            else if (selectedAction == 'abandon') {
                reasonBox.style.display = 'block';
                reasonBox.setAttribute("required", "required");
            }
        }
    </script>

    <style>
    </style>
</head>
<body>
    <form name="StudentForm">
        <div class="DDbox">
            <select name="Action" id="ActionDD" required onchange="showHide()">
                <option value="">Action:</option>
                <option value="complete">Complete</option>
                <option value="abandon">Abandon</option>
                <option value="transfer">Transfer</option>
            </select>
        </div>
        <br>
        <div class="COMPLETEbox" id="COMPLETEbox">
            <input class="hidden-items" type="text" name="RemNUM" id="REMtextBox" placeholder="Remedy Number" min="1" maxlength="10" style="display:none;" /><br>

            <select class="hidden-items" name="Reason" id="ReasonDD" style="display:none;">
                <option value="">Reason:</option>
                <option value="NoShow">No Show</option>
                <option value="Unfixable">Unfixable</option>
                <option value="other">Other</option>
            </select>
            <br>
            <br>
            <br>
            <input type="submit" value="submit" onclick="checkform();">
        </div>
    </form>
</body>
</html>

Answer 2

您在JavaScript驗證功能中犯了一個小錯誤，您沒有執行比較（x == y），而是進行了賦值（x = y）。

除此之外，還有一種略微不同的技術來獲取選擇框選定的值。

這是您的代碼，稍有更改：

 function checkform() {
    var action = document.getElementById('ActionDD'),
          reason = document.getElementById('ReasonDD');

    if (action.options[action.selectedIndex].value =="abandon" && reason.options[reason.selectedIndex].value =="")
    {
        validationMessage = validationMessage + 'Enter Reason';
        valid = false;
    }
    else valid = true;
}

希望能有所幫助。

Answer 3

嘗試這個。

function checkform() {
    if (document.getElementById('ActionDD').value =="abandon" && (document.getElementById('ReasonDD').value ==""))
        {
          //Your validation message                
          return false;
        }
        else  return true;
}
</script>

onchange（）

 function showHide() {
if(document.getElementById('ActionDD').value =="abandon")
{
 document.getElementById("ReasonDD").style.display= 'block';
 document.getElementById("ReasonDD").required = true;
}
else 
 document.getElementById("ReasonDD").style.display= 'none';

}

更改您的html一點。從按鈕中刪除checkform（）並添加到表單，如下所示。

<form name=StudentForm onsubmit="return checkform()" action="javascript:window.close();">

我正在嘗試使用文本框和下拉菜單在HTML代碼中進行驗證

問題描述

3 個解決方案

解決方案1
1 已采納 2016-09-15 09:30:55

解決方案2
0 2016-09-15 05:42:46

解決方案3
0 2016-09-15 07:51:28

我正在嘗試使用文本框和下拉菜單在HTML代碼中進行驗證

問題描述

3 個解決方案

解決方案1 1 已采納 2016-09-15 09:30:55

解決方案2 0 2016-09-15 05:42:46

解決方案3 0 2016-09-15 07:51:28

解決方案1
1 已采納 2016-09-15 09:30:55

解決方案2
0 2016-09-15 05:42:46

解決方案3
0 2016-09-15 07:51:28