CODEWITHSUNDEEP
htmlif-statement
Artemis F
Artemis F

Reputation: 72

if then statement in html5

I am working in creating a website. I have a page where I have a drop down list and I want to make it so that when the user selects the option "Other" a text box comes up. How do I do that?

Here's my code:

 <!DOCTYPE html>
 <html>
 <html lang = "en">
 <body>

 <p id="demo"></p>

 <h1>What would you like it to say?</h1>

 <p>Commmon Requests:</p>

 <form action="input" action="random.html" method="get">
 <select name="requests">
 <option value="blank"> </option>
 <option value="good morning sir">Good Morning Sir</option>
 <option value="good morning madam">Good Morning Madam</option>
 <option value="other">Other</option>   
 <input type="submit" value="Submit">
 </select>
 </form>

 <br><br><textarea rows="3" cols="30">
 Write a request here if you would like to hear it.
 </textarea>

 </body>
 </html>

Upvotes: 0

Views: 76588

Answers (4)

John Woodruff
John Woodruff

Reputation: 1666

Attach an "onchange" event to your select element with a function which checks which option is the selected value and if it is the "Other" option, change a hidden text box from being hidden to being visible. Example below:

<form action="input" action="random.html" method="get">
    <select id="requestDropDown" name="requests" onchange="checkOption()">
        ....
    </select>
    <input type="text" id="otherBox" style="visibility:hidden;"/>
</form>

I added the input element which is hidden and will be shown if you select the "other" option.

Then, in the checkOption() function do your checking to see if Other is selected and change visibility based on that. For example:

function checkOption(){
    //This will fire on changing of the value of "requests"
    var dropDown = document.getElementById("requestDropDown");
    var textBox = document.getElementById("otherBox");

    if(dropDown.value == "other"){
        textBox.style.visibility = "visible";
    }

}

It's simple and concise.

Upvotes: 3

Sudarshan Tanwar
Sudarshan Tanwar

Reputation: 3607

Working Demo

html

<body>
<p id="demo">
</p>
<h1>
    What would you like it to say?</h1>
<p>
    Commmon Requests:</p>
<form action="input" id="form1" action="random.html" method="get">
<select name="requests" onchange="check(this)">
    <option value="blank"></option>
    <option value="good morning sir">Good Morning Sir</option>
    <option value="good morning madam">Good Morning Madam</option>
    <option value="other">Other</option>
    <input type="submit" value="Submit">
</select>
</form>
<br>
<br>
<textarea rows="3" cols="30">

Write a request here if you would like to hear it.

Javascript

function check(that) {
        if (that.value === "other") {
            var textBox = document.createElement('input');
            textBox.setAttribute("type", "text");
            textBox.setAttribute("id", "newTextBox");
            document.getElementById('form1').appendChild(textBox);
        }

        else {
            var box = document.getElementById('newTextBox');
            if (box)
                box.parentNode.removeChild(box);
        }
    }

Upvotes: 2

IcyFlame
IcyFlame

Reputation: 5199

The following works too:

<!DOCTYPE html>
 <html lang = "en">
 <body>

        <p id="demo"></p>

        <h1>What would you like it to say?</h1>

        <p>Common Requests:</p>

        <form action="input" action="random.html" method="get">

        <select name="requests" onchange="checkIfOther();" id="dropDown1">

        <option value="blank"> </option>
        <option value="good morning sir">Good Morning Sir</option>
        <option value="good morning madam">Good Morning Madam</option>
        <option value="other">Other</option>

        </select>

        <input type="submit" value="Submit"/>
        </form>

        <div id="other" style="display:none">

            <label>Other(Please explain):</label><input type="text" id="otherText"/>


        </div>

        <br><br><textarea rows="3" cols="30">
        Write a request here if you would like to hear it.
        </textarea>

 </body>
 </html>

<script>

    function checkIfOther(){

        a = document.getElementById("dropDown1");        

        if(a.value == "other")           

            document.getElementById("other").setAttribute("style","display:inline");

        else

            document.getElementById("other").setAttribute("style","display:none");


        }

</script>

Upvotes: 0

tverghis
tverghis

Reputation: 999

This is fairly simple to achieve using Javascript. Do not use HTML for anything other than structuring your website content.

<form method="post" action="">
<select name="requests" onchange="openbox(this);">
    ...
    <option value="other">Other</option>
</select>
</form>
...
<textarea rows="3" cols="30" hidden>
Write a request here if you would like to hear it.
</textarea>

And in Javaascript,

function openbox(requests) {
    if(requests.selectedIndex == 3) {
       //Remove the 'hidden' property'
    } else {
       //Add the 'hidden' property
    }
}

EDIT: When you said text box, I thought of an alert for some reason. W3C School Reference: http://www.w3schools.com/tags/att_global_hidden.asp

Upvotes: 1

Related Questions