Question

Following is my HTML code

<div id="dl_address" class="dl-row">
 <div class="dl-col1">
    <span id="dl_addressMarker" class="dl-Marker">*</span>Address:
 </div>
 <div class="dl-col2">
  <input  id="dl_addressMarker" name="p.streetAddress" maxlength="100" size="15"  
                            class="landing-qualpanel-input-standin" type="text" onClick="formOpt(id)" value="Home Address">
 </div>
</div>

And Following is my javascript code

<script language="javascript" type="text/javascript">
function formOpt(x){

    var y=document.getElementById(x).value;
    alert(y);
    }
</script>

I can’t understand why i am getting Undefined. Kindly Help.
Thanks in advance

Answer 1

That’s because you have two elements with the same Id, which isn’t allowed in HTML and which makes it impossible for your function to get the input this way.

Change the id of your input and you’ll be fine.

You could simplify the code by passing the element and not the id :

HTML :

<input  id="dl_addressMarker2" name="p.streetAddress"
      maxlength="100" size="15"  
      class="landing-qualpanel-input-standin" type="text"
      onClick="formOpt(this)" value="Home Address">

JavaScript :

function formOpt(x){
   var y = x.value;
   alert(y);
}