Question

I want to have a select option that opens a corresponding text box.

Let’s say these are my selections:

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

When you select the Email selection I want it to show a textbox below it (which wasn’t there before) that says please enter your Email.

OR

When you select the Phone selection I want it to show a textbox below it (which wasn’t there before) that says please enter your Phone Number.

I don’t want both the “Enter Email” and “Enter Phone Number” textboxes showing at the same time. I want them to select which one to open and input their contact info.

I currently have this but don’t know what else to have in it… please help!

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

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

Thanks,
Chad.

Answer 1

Figured it out, used the following javascript for this:

<script type="text/javascript">
function CheckContact(val){
 var element=document.getElementById('email');
 if(val=='email')
   element.style.display='block';
 else
   element.style.display='none';

 var element=document.getElementById('sms');
 if(val=='sms')
   element.style.display='block';
 else
   element.style.display='none';
}
</script>

Then had this in the form:

<select name="contactinfo" id="contactinfo" onchange="CheckContact(this.value);">
  <option>Select Contact Option</option>
  <option value="email">Email</option>
  <option value="sms">Text (SMS)</option>
</select><br />
<div id="email" style="display: none;">Enter Email: <input type="text" name="email" /><br /></div>
<div id="sms" style="display: none;">Enter Cell Number: <input type="text" name="sms" /><br /></div>