Select Option opens unique Text Box

Question

I want to have two different select options which have, let's say, options such as EMAIL or PHONE NUMBER, and when you select the EMAIL option a text box opens below it that says "Enter Email" or when you select PHONE NUMBER option a different text box opens below it that says "Enter Phone #:".

Ps. I don't want both text boxes showing at one time, I want them to select which one to fill. If you have a better way of doing this, please let me know your ideas.

<form action="order-step4.php" method="post"> 

    Please fill out these fields:<br /> 
    Recipient: <input type="text" name="recipient" /><br />

    Recipient Email: <input type="text" name="remail" /><br /> 

    Recipient Cell: <input type="text" name="rsms" /><br /> 

    Your Message :<input type="text" name="message" /><br /> 

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

Thank you, Chad.

Right now all I have is the two textbox's that send to the database, but I want them to select which one, as so they aren't confused if they have to enter both or not, etc. And for fluidity. — Chad Cardiff
code<form action="order-step4.php" method="post"> Please fill out these fields:<br /> Recipient: <input type="text" name="recipient" /><br /> Recipient Email: <input type="text" name="remail" /><br /> Recipient Cell: <input type="text" name="rsms" /><br /> Your Message :<input type="text" name="message" /><br /> <input type="submit"> </form>code Watered down example of the code I have currently. — Chad Cardiff

Cris Cris · Accepted Answer · 2013-01-24T04:59:51

Have a drop down option for selecting Phone or Email,and show/hide respective input textbox on dropdown change.

<select id="myChoice">
  <option value="email">Email</option>
  <option value="phone">Phone</option>
</select>

here is function

$('#myChoice').change(function() {
       if ($(this).val() === 'email') {
           //show email
           //hide phone

        } else {
            //hide email
           //show phone
        }
});

Select Option opens unique Text Box

1 Answers