Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

The script adds and removes form fields based on user actions

Posted on 2006-11-27
8
Medium Priority
?
255 Views
Last Modified: 2011-04-14
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>
0
Comment
Question by:evry2004
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
8 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18021597
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
 

Author Comment

by:evry2004
ID: 18021748
interesting but i dont use style sheet as i have never use it  can you still help?
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 18021866
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18021936
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
 
LVL 1

Expert Comment

by:csandersii
ID: 18022055
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
 

Author Comment

by:evry2004
ID: 18022129
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
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 18022221
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
 
LVL 1

Expert Comment

by:csandersii
ID: 18025161
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

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question