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>
evry2004Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
You still can use it in this case even if you don't use it for anything else.  It is the easiest and best way to do this.  The line I said that needed to be added to the style sheet code can be added to the tag itself with the style attribute.  For example ...

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

Style sheets are a very powerful way to control the content and design on your website.  If you place this info in an external file (external style sheet) then you can make site wide changes by just modifying it.  There is information on style sheets in many good books or throughout the web but some of my favorite sites on it are:

http://www.w3schools.com/css/default.asp
http://www.csszengarden.com/
http://css.maxdesign.com.au/index.htm
http://alistapart.com/stories/practicalcss/
http://www.dezwozhere.com/links.html

Let me know if you have any questions.

bol
0
 
b0lsc0ttIT ManagerCommented:
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
0
 
evry2004Author Commented:
interesting but i dont use style sheet as i have never use it  can you still help?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
b0lsc0ttIT ManagerCommented:
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
0
 
csandersiiCommented:
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.
0
 
evry2004Author Commented:
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>
0
 
b0lsc0ttIT ManagerCommented:
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
0
 
csandersiiCommented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.