How to make <input> field visit when <option> is selected

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How to make <input> field visit when <option> is selected

Post by simonmlewis »

Hello
This is my first time in this part of the forum.

I am no good at Javascript, so any help here as well as a solution would be really useful.

I have a form where there are several fields. One of them is a <select option> dropdown.

Within that dropdown is "Replacement", "Alternative" and "Refund".

What I want is for when the user select Alternative that a <input type = 'text'> field to *magically* appear on the right or below (doesn't matter where) that field. Basically so they can only complete that field when Alternative is selected.

I don't want to do it by disabling the field till they select - I want it dynamic so it gives the user that field.

I'm sure this is just a HIDE/DISPLAY type script as I have been looking.

For example, I found this:

Code: Select all

<script type="text/javascript" language="javascript">
<!--
function UpdateSelect()
{
select_value = document.report_form.preference.value;
var id = 'hide_this_row';
var obj = '';
obj = (document.getElementById) ? document.getElementById(id) : ((document.all) ? document.all[id] : ((document.layers) ? document.layers[id] : false));
 
if(select_value <> "alternative")
{
obj.style.display = ( obj.style.display != "none" ) ? "none" : "";//Hide Fields
}
else
{
obj.visibility = "show";//Show Fields
}
}
// -->
</script>
But it was only for values that were amounts, and to be honest, I don't quite understand the code either. Would be good to start learning it at the same time.

Thanks in anticipation...

SML
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
granite
Forum Commoner
Posts: 44
Joined: Mon Feb 09, 2009 10:52 am

Re: How to make <input> field visit when <option> is selected

Post by granite »

Well, for showing/hiding the input:

Code: Select all

<script>
function updateSelect(obj){
    span = document.getElementById("salt");
    if(obj.options[this.selectedIndex].value == "alt"){
        if(span.style.display=="none")
            span.style.display = "block";
        else
            span.style.display = "none";
    }
}
</script>
<select onchange="updateSelect(this)">
<option value="rep">Replacement</option>
<option value="alt">Alternative</option>
<option value="ref">Refund</option>
</select>
<span id="salt" style="display:none;" ><input type="text" name="salt" /></span>
If you want to add an input when the given option is selected, get rid of the original input and the 'style' in the span tag; instead of using 'display' in the function, use the innerHTML property to write the input field inside the span:

Code: Select all

span.innerHTML = "<input type=\"text\" name=\"salt\" />";
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How to make <input> field visit when <option> is selected

Post by simonmlewis »

No text box is appearing.
Also - not sure what you mean in the part about innerHTML and how that helps. Yes, I do want the user to be able to enter data into the text box if it appears.

Code: Select all

<script>
function updateSelect(obj){
    span = document.getElementById("alt");
    if(obj.options[this.selectedIndex].value == "alternative"){
        if(span.style.display=="none")
            span.style.display = "block";
        else
            span.style.display = "none";
    }
}
</script>
 
<script>
function formCheck(formobj){
    // Enter name of mandatory fields
    var fieldRequired = Array("firstname", "lastname", "email", "phone", "address", "postcode", "itemname", "orderid", "returnreason");
    // Enter field description to appear in the dialog box
    var fieldDescription = Array("Firstname","Lastname","Email","Phone","Address","Postcode", "Item Name", "Order ID", "Return Reason");
    // dialog message
    var alertMsg = "You haven't quite finish the form:\n";
    
    var l_Msg = alertMsg.length;
    
    for (var i = 0; i < fieldRequired.length; i++){
        var obj = formobj.elements[fieldRequired[i]];
        if (obj){
            switch(obj.type){
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            case "select-multiple":
                if (obj.selectedIndex == -1){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            case "text":
            case "textarea":
                if (obj.value == "" || obj.value == null){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            default:
            }
            if (obj.type == undefined){
                var blnchecked = false;
                for (var j = 0; j < obj.length; j++){
                    if (obj[j].checked){
                        blnchecked = true;
                    }
                }
                if (!blnchecked){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
            }
        }
    }
 
    if (alertMsg.length == l_Msg){
        return true;
    }else{
        alert(alertMsg);
        return false;
    }
}
// -->
</script>
 
If you would like to return an item to us, please fill out all sections of the following form.
<br/><br/>
Please read our <a href='index.php?page=terms&menu=blank&head=terms and conditions#returns'>Terms and Conditions</a> before submitting this form to us.  If after viewing these pages, you still would like to return a product to us, please supply the information required below to receive your returns ID number and address to send your item.
<br/><br/>
Please complete the following returns form here...<br/><br/>
<form method='post' action='http://www.visualshop.co.uk/support/return.php' name='returnit' onSubmit="return formCheck(this)">
<input type='hidden' name='website' value='JUST BB GUNS'>
<table width='700' cellpadding='4' cellspacing='0' class='table'>
<tr><td valign='top' width='140'>Firstname:</td><td valign='top'><input type='text' name='firstname'><td valign='top'></tr>
<tr><td valign='top'>Lastname:</td><td valign='top'><input type='text' name='lastname'><td valign='top'></tr>
<tr><td valign='top'>Email:</td><td valign='top'><input type='text' name='email'><td valign='top'></tr>
<tr><td valign='top'>Phone:</td><td valign='top'><input type='text' name='phone'><td valign='top'></tr>
<tr><td valign='top'>Address:</td><td valign='top'><textarea name='address' cols="30" rows="4"></textarea><td valign='top'></tr>
<tr><td valign='top'>Postcode:</td><td valign='top'><input type='text' name='postcode'><td valign='top'></tr>
<tr><td valign='top'>Item name:</td><td valign='top'><input type='text' name='itemname'><td valign='top'></tr>
<tr><td valign='top'>Order ID:</td><td valign='top'><input type='text' name='orderid'><td valign='top'></tr>
<tr><td valign='top'>Date of Order:</td><td valign='top'>
 
<table border='0' cellspacing='0' >
<tr><td align=left ><div class='advancedbox'>
<select name=dt >
<option value='01'>01</option>
<option value='02'>02</option>
<option value='03'>03</option>
<option value='04'>04</option>
<option value='05'>05</option>
<option value='06'>06</option>
<option value='07'>07</option>
<option value='08'>08</option>
<option value='09'>09</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>
</td>
<td align=left >
<select name=month value=''></option>
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
 
</td><td align=left >
<input type=text name=year size=4 value=2010></div>
</td></tr></table>
<td valign='top'></tr>
<tr><td>What would you prefer?</td><td>
<select name=preference onchange="updateSelect(this)">
<option value='replacement'>Replacement</option>
<option value='alternative'>Alternative</option>
<option value='refund'>Refund</option>
</select>
<span id="alt" style="display:none;" ><input type="text" name="alternative" /></span>
</td></tr>
<tr><td valign='top'>Return Reason:</td><td valign='top'>
 
<?php $bfg = $_POST['bfg'];
if ($bfg != NULL) { echo "<textarea name='returnreason' cols='30' rows='4'>BFG RETURN: </textarea>";}
elseif ($bfg == NULL) { echo "<textarea name='returnreason' cols='30' rows='4'></textarea>";}
?>
<td valign='top'></tr>
<tr><td valign='top'></td><td valign='top'>
You must return your product within 14 days of receiving your ticket number for you return to remain valid.<br/>
<input type='submit' value='Send Now'><td valign='top'></tr>
</table>
</form>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
granite
Forum Commoner
Posts: 44
Joined: Mon Feb 09, 2009 10:52 am

Re: How to make <input> field visit when <option> is selected

Post by granite »

hehe. Sorry for my lack of attention. Now it works.

Code: Select all

<script>
function updateSelect(obj){
    span = document.getElementById("salt");
    if(obj.options[obj.selectedIndex].value == "alt"){
        if(span.style.display == "none")
            span.style.display = "block";
    }else{
        span.style.display = "none";
        document.getElementById("salti").value = "";
    }
}
</script>
<select onchange="updateSelect(this)">
<option value="rep">Replacement</option>
<option value="alt">Alternative</option>
<option value="ref">Refund</option>
</select>
<span id="salt" style="display:none;" ><input type="text" name="salt" id="salti" /></span>
About innerHTML, that's in case you want no field in the first place, not just that it does't show up. And then, if the user select "alternative", the field will be created inside the span.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How to make <input> field visit when <option> is selected

Post by simonmlewis »

Brilliant thanks a million.
What was it that you missed and how did it cause it to not work?

Can you try and explain how it works anyway please, because it may help me develop little JSs in the future.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How to make <input> field visit when <option> is selected

Post by simonmlewis »

I am trying to understand how to do this on two levels.

ie. Three Radio buttons. If you select one, you get one set of options appear (in a DIV), if you select another, you get a different set.

I'm sure it's straight forward, and perhaps by the time you see this i would have worked it out. but if you get this, please explain.

thanks
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How to make <input> field visit when <option> is selected

Post by simonmlewis »

Have tried this but it doesn't do anything - only works for "salt".

Code: Select all

<script>
function updateSelect(obj)
{
    span = document.getElementById("salt");
    if(obj.options[obj.selectedIndex].value == "alternative")
    {
        if(span.style.display == "none")
            span.style.display = "inline";
    }
    else
    {
        span.style.display = "none";
        document.getElementById("salti").value = "";
    }
}
 
{
    span = document.getElementById("pepper");
    if(obj.options[obj.selectedIndex].value == "refund")
    {
        if(span.style.display == "none")
            span.style.display = "inline";
    }
    else
    {
        span.style.display = "none";
        document.getElementById("refundi").value = "";
    }
}
</script>
<form method='post' action='#'>
<select name='preference' onchange="updateSelect(this)">
<option value="replacement">Replacement</option>
<option value="alternative">Alternative</option>
<option value="refund">Refund</option>
</select>
<br/><br/>
<span id="salt" style="display:none; margin-left: 5px" >Which would you like? <input type="text" name="alternative" id="salti" /></span>
 
<span id="pepper" style="display:none; margin-left: 5px" >How much money would you like?? <input type="text" name="amount" id="refundi" /></span>
 
<br/><input type='submit' name='submit'>
</form>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
granite
Forum Commoner
Posts: 44
Joined: Mon Feb 09, 2009 10:52 am

Re: How to make <input> field visit when <option> is selected

Post by granite »

Try this:

Code: Select all

<script>
function updateSelect(obj)
{
    span = document.getElementById("salt");
    if(obj.options[obj.selectedIndex].value == "alternative")
    {
        if(span.style.display == "none")
            span.style.display = "inline";
    }
    else
    {
        span.style.display = "none";
        document.getElementById("salti").value = "";
    }
    span = document.getElementById("pepper");
    if(obj.options[obj.selectedIndex].value == "refund")
    {
        if(span.style.display == "none")
            span.style.display = "inline";
    }
    else
    {
        span.style.display = "none";
       document.getElementById("refundi").value = "";
    }
}
</script>
<form method='post' action='#'>
<select name='preference' onchange="updateSelect(this)">
<option value="replacement">Replacement</option>
<option value="alternative">Alternative</option>
<option value="refund">Refund</option>
</select>
<br/><br/>
<span id="salt" style="display:none; margin-left: 5px" >Which would you like? <input type="text" name="alternative" id="salti" /></span>
<span id="pepper" style="display:none; margin-left: 5px" >How much money would you like?? <input type="text" name="amount" id="refundi" /></span>
<br/><input type='submit' name='submit'>
</form>
</script>
About your previous post, don't know exactly what you wanted.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How to make <input> field visit when <option> is selected

Post by simonmlewis »

That's brilliant.

I have modified it slightly as I didn't need the value blanking, as I am using it to show or hide a SPAN.

I now got it working for three options, and can see how to change them.

Thank you. Lets hope my query on here about MySQL (not equal to) will be as simple to fix as it's driving me crazy!!!!

S.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply