Solved

The script adds and removes form fields based on user actions

Posted on 2006-11-27
8
247 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
  • 4
  • 2
  • 2
8 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
 
LVL 54

Expert Comment

by:b0lsc0tt
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 1

Expert Comment

by:csandersii
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Both Easy and Powerful How easy is PHP? http://lmgtfy.com?q=how+easy+is+php (http://lmgtfy.com?q=how+easy+is+php)  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now