asked on

The script adds and removes form fields based on user actions

using javascript i need to make appear a field to input the mobile or phone number for instance when selecting a drop down box :

<td align="right"><b>CHOOSE:</b></td>
<td><select NAME="contact">
<option> HOW DO YOU WANT TO BE CONTACTED
<option> PHONE
<option> MOBILE
<option> EMAIL
</td></td>
</tr>

b0lsc0tt

evry2004,

Add an input field for each of those to your form and provide that tr or div with a unique id. For example ...

<tr>
<td align="right"><b>CHOOSE:</b></td>
<td><select NAME="contact">
<option value=""> HOW DO YOU WANT TO BE CONTACTED
<option value="phone"> PHONE</option>
<option value="mobile"> MOBILE</option>
<option value="email"> EMAIL</option>
</td>
</tr>
<tr id="phone">
<td>Phone: </td>
<td><input type="text" name="phone"></td>
</tr>

Now in your style sheet code you hide these rows using their ids with a line like this ...

.phone { display: none; }

You can then create a javascript function like the one below ...

function showContact(typeContact) {
document.getElementById(typeContact).style.display='';
}

That function will basically delete the display: none style so the row will show. You should call the function by adding an onchange event to your select tag like the one below. Notice I added value attributes to the options in the html above. You have to have them.

<select name="contact" onchange="showContact(this.value);">

Let me know if you have any questions or need more information.

b0lsc0tt

evry2004

ASKER

interesting but i dont use style sheet as i have never use it can you still help?

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b0lsc0tt

I'm glad that I could help you. Thank you for the grade, the points and the fun question. Enjoy learning and using CSS. :D

bol

csandersii

As b0lsc0tt stated styles (CSS) is a very powerful way to manipulate the visual elements on a page. Another option would be to use JavaScript to populate the form element based on the selection.

evry2004

ASKER

it add the field effectively for instance when i phone the phone field will display but when i select mobile ,mobile field will display without removing the the previous field see below:

//script in the head

<html>
<HEAD><SCRIPT>function showContact(typeContact) {
document.getElementById(typeContact).style.display='';
}
</SCRIPT>
<TITLE>RESERVATION Page</TITLE>
</HEAD>

<td align="right"><b>CHOOSE:</b></td>
<td><select name="contact" onchange="showContact(this.value);">

<option value=""> HOW DO YOU WANT TO BE CONTACTED
<option value="phone"> PHONE</option>
<option value="mobile"> MOBILE</option>
<option value="email"> EMAIL</option>
</td>
</tr>

<tr id="phone" style="display: none;">
<td>PHONE: </td>
<td><input type="text" name="phone"></td>
</tr>
<tr id="mobile" style="display: none;">
<td>MOBILE: </td>
<td><input type="text" name="mobile"></td>
</tr>

b0lsc0tt

OK. There are a couple of ways to do this, as Csandersii mentioned. To provide for the case with the method I first suggested you can modify the function to be like this ...

function showContact(typeContact) {
document.getElementById("phone").style.display='none';
document.getElementById("mobile").style.display='none';
document.getElementById("email").style.display='none';
document.getElementById(typeContact).style.display='';
}

If you have a number of possible contacts then it would be better to dynamically write the one input box than to have them all in the form. In other words the method Csandersii suggested instead of mine. You can use innerHTML to do this. In this case I don't see that you need to change it though.

bol

csandersii

Here is one sample method using JS to enter the form elements based on the selection. This small bit of code is just a scratch on the surface of what is possible yet very versitle.

If you have specific questions just let me know.

--------------------------------------------------------------------------
<script>
function showContact(obj){
      if(obj){
            document.getElementById('fr').innerHTML="<table><tr><td>"+obj+"</td><td><input type='text' name='"+obj+"' value=''/></td></tr>";
      } else {
            alert("Please select your contact method");
      }
}
</script>

<tr>
<td align="right"><b>CHOOSE:</b></td>
<td>
      <select name="contact" id="contact" onchange="showContact(this.value);">
<option value=""> HOW DO YOU WANT TO BE CONTACTED
<option value="Phone"> PHONE</option>
<option value="Mobile"> MOBILE</option>
<option value="Email"> EMAIL</option>
      </select>
</td>
</tr>

<div id="fr"></div>
--------------------------------------------------------------------------

Cheers