HTMLコード内でテキストボックスとドロップダウンを使用して検証しようとしています

現在解決しようとしているコードは、ドロップダウンボックスが1つ必要です。ドロップダウンボックスから「Complete」を選択すると、テキストボックスが表示されます。そのドロップダウンボックスから[放棄]を選択すると、他のオプションとともに2番目のドロップダウンボックスが表示されます。HTMLコード内でテキストボックスとドロップダウンを使用して検証しようとしています

最初のドロップダウンが選択された後、これらの2番目のオプションに検証を追加しようとしています。私のコードでは、最初のドロップダウンボックス "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のために取り組んできたコードです。私は最初のドロップダウンが選択された値を持っているかどうかを確認し、どのような対応するテキストボックスまたはドロップダウンする方法のためのソリューションを探しています

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

は、最初のドロップダウンで作られた選択肢から表示される値は、選択しました。

ご協力いただきありがとうございます。

出典

2016-09-15 tbrock29

次のコードを試してください。アイデアは、ActionDDドロップダウンのonchange中に '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>

出典

2016-09-15 09:30:55

あなたは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; 
}

は、それが少しお役に立てば幸いです。

出典

2016-09-15 05:42:46 codelock

これを試してください。ボタンから

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の小さなbit.Removeのcheckform（）とは、以下に示すように形成するために追加します。

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

出典

2016-09-15 07:51:28 ADarnal

HTMLコード内でテキストボックスとドロップダウンを使用して検証しようとしています

答えて

関連する問題