html form value

I am creating a html form with textboxes. I want default values to be shown in the textboxes when the page loads.

see code below:

<form action="" onsubmit="">    
  Zip Code: <input id="address" type="textbox" value="">  
  Zip Code:<input id="address" type="textbox" value="78728"/>
  Radius:<input id="radius" type="textbox" value="#session.preferences.view_Radius_Map#"/>miles
  <input type="button" value="Add Radius" onclick= "drawCircle()">
  <input type="button" value="Undo" onclick=" Undo()">
  <input type="button" value="Reset" onclick= "clearMap()">
</form>

for some reason when I try to remove the line that has no value for the Zip Code, the value for the second Zip Code textbox (which has a value set for the zip code) does not display. What is causing this and 开发者_StackOverflowhow can I correct this so that I have to textbox fields Zip Code and Radius in which the default values are displayed when the page loads?

---

It works fine for me when I remove the first zip code <input>: http://jsfiddle.net/LFYnH/

---

Try to give the second field a different id. You have two input fields with the same id="address".

Do like this:

Zip Code: <input id="address" type="textbox" value=""/>  
Zip Code: <input id="address2" type="textbox" value="78728"/>

---

try giving them different id. Eg. "Address" and "Address2"

---

An id is intended for a single use. If you require it to be on more than one element you should use a class instead.

---

How are you removing the line without a value in it? With Javascript, JQuery?

Both of those lines shouldn't have the same ID. Make them like address1 and address2 or something.

You can then use JQuery or something to remove the first one (or just hide it), by doing like:

$('address1').hide();

You can also check if it doesn't have a value by looking at it's value through JQuery as well:

$('address1').val();

---

Some of your input tags are missing the closing '/'

Zip Code: <input id="address" type="textbox" value="">  

That could be causing a problem.

---

Change the id in the first two input tags to classes so that they can be re-used and make sure all of your input tags(and other tags) are properly closed. The first input you have isn't properly closed.

---

using jQuery you can do something like this:

For each input text set a default value

<input type='text' data-default='your default text' />

Then you have to add two step in javascript. First load the default text into the field when the page loads and listen for focus event

jQuery(document).ready(function(){
    jQuery(input)
        .each(function(index, element){
            jQuery(element).val(jQuery(element).data('default'));
        })
        .focus(function(evt){
             var taget = evt.target;
             if(jQuery(target).data('default') == jQuery(target).val()) jQuery(target).val("");
        });
});

When the input get the focus it checks if the current text is the default text and in this case javascript empty the field otherwise your text is safe into the text box

Remember that ID are unique you can't have two elements with the same id "address"

Hope this helps