asked on

reset javascript not working for dynamic text

Hi ,

I am using the following java script to generate a dependent text-box when "Other" is selected out of the dropdown for market type.

My issue is that, when I use reset link to reset the values, it's working for all the fileds except for the
"other market" text field that shows up when the "other" is selected from the market type dropdown.

I cannot see any reason why it won't work for the "other market" text field, when the same code works for text field fields like "email" and "phone number".

Thanks.

TEST.html

chaitu chaitu

check this.

function otherMarketDisplay(doc,elem) {
txt = doc.options[doc.selectedIndex].value;
document.getElementById(elem).style.display = 'none';
if ( txt.match(elem) ) {
document.getElementById(elem).style.display = 'block';
} 
}

function clearForm() {
   
		document.getElementsByName('Phone Number')[0].value = '';
		alert('before getElementsByName(Email)[0].value = ;');
		document.getElementsByName('Email')[0].value = 'Required';
		alert('AFTER getElementsByName(Email)[0].value = ;');	
		alert('before getElementsByName(Primary Market)[0].value = ;');	 
		document.getElementsByName('Primary Market')[0].selectedIndex = 'Primary Market'; 
		alert('AFTER getElementsByName(Primary Market)[0].value =Primary Market ;');		
		//document.getElementsByName('Company Type')[0].selectedIndex = 'Company Type'; 
		alert('before getElementsByName("Other Market")[0].value = ;');
		document.getElementsByName("Other Market")[0].value = '';
		alert('AFTER getElementsByName("Other Market")[0].value = ;');
		

	}

</script> 
</head>
<body>
<table>

<tr>
<tr>
<td><div class="formLabel">Phone Number </td>
<td><input name="Phone Number" value="<%=phoneNumber%>" type="text" onfocus ="clearText(this)" style="width:294px;"/></td>
</tr>

<tr>
<td><div class="formLabel">E-mail Address </td>
<td><input id="validate" name="Email" value="<%=email%>" type="text" onfocus ="clearText(this)" style="width:294px;"/></td>
</tr>

<td><div class="formLabel" style="text-align:left">market type?</td>

<td><select id="validate" name="Primary Market"  style="width:300px;" onchange="otherMarketDisplay(this,'otherMarket');">
<option value="<%=primaryMarket %>"><%=selectedPrimaryMarket %></option>
<option value="ATech">ATech</option>
	<option value="Btech">Btech</option>
	<option value="DTech">DTech</option>
	<option value="GTech">GTech</option>
	<option value="LabTech">LabTech</option>
	<option value="MTech">MTech</option>
	<option value="otherMarket">Other</option>
</select>
</td>
</tr>

<tr>
<tbody id="otherMarket" style="display: none;">
<tr>
<td><div class="formLabel" style="text-align:left">Other Market</div></td>
<td><input type="text" name="Other Market" value="<%=otherMarket%>"  onfocus ="clearText(this)"/></td>
</tr>
</tbody>

<tr>
<td width=80>		
<td align="left"><a href="javascript:clearForm()">Reset Form</a></td>
</tr>
</table>

</body>
</html>

Open in new window

chaitu chaitu

i didnt find 'Company Type' drop down so i commented it.apart from this when you are givning names or id's to text boxes and dropdowns gdont use spaces in between the names;

use 'Company_Type' Other_Market

chaitu chaitu

check this on how to reset the form.

http://www.javascript-coder.com/javascript-form/javascript-reset-form.phtml

function clearForm(oForm) {
var frm_elements = document.forms[0].elements;
for (i = 0; i < frm_elements.length; i++)  
{  

    field_type = frm_elements[i].type.toLowerCase();  
    switch (field_type)  
    {  

    case "text":  
    case "password":  
    case "textarea":  
    case "hidden":  
        frm_elements[i].value = "";  
        break;  
    case "radio":  
    case "checkbox":  
        if (frm_elements[i].checked)  
        {  
            frm_elements[i].checked = false;  
        }  
        break;  
    case "select-one":  
    case "select-multi":  
        frm_elements[i].selectedIndex = -1;  
        break;  
    default:  
        break;  

    }  

}

Open in new window

ASKER CERTIFIED SOLUTION

Gopal2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Gopal2

ASKER

It was an issue of confusion because of the way the variables / labels were set up with the same name as per the requirements.That had to be worked on carefully to over come the confusion for the java script.