CODEWITHSUNDEEP
javascripthtmlformsvalidationdrop-down-menu
tbrock29
tbrock29

Reputation: 29

I am trying to validate within my HTML code with text-boxes and drop-downs

The code I am currently trying to work out is I have one drop down box that is a required drop-down. If "Complete" is selected from that drop down box a text box appears. If "Abandon" is selected from that drop down box a second drop down box appears with other options.

I am trying to add validation onto those 2nd options after the first drop down is selected. In my code I have the first drop down box "ActionDD" marked as a required field. But I can not do that with the textbox "REMtextBox" or the "ReasonDD" drop down box since they will never appear at the same time.

Here is the code for my form

<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>

Then here is the code I have been working on for my JavaScript to check conditions when the Submit button is pressed.

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

I am looking for a solution for how to check if the first drop down has a value selected, then whatever corresponding textbox or drop down appears from the choice that was made in the first drop down has a value selected.

Thanks in advance for any help.

Upvotes: 0

Views: 75

Answers (3)

jl_
jl_

Reputation: 5539

Try the below code. Idea is to set/remove the 'required' attribute during onchange of the ActionDD drop-down. Hope it helps.

<!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>

Upvotes: 1

A_D
A_D

Reputation: 189

Try this.

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';

}

Change your html little bit.Remove checkform() from button and add to form as shown below.

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

Upvotes: 0

codelock
codelock

Reputation: 780

You have a little mistake in your JavaScript validation function, instead of a comparison (x==y) you did an assignment (x=y).

In addition to that, there is a slightly different technique for getting aselectbox selected value.

This is your code with a little change:

 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;
}

Hope it helps a bit.

Upvotes: 0

Related Questions