Member Avatar for dips255

I have a form on which there is a textbox for entering mobile number. Below this I have a check box saying 'Verify number' on selecting which user gets sms for validation code. Now on the update panel I have to show the textbox for mobile in readonly form and display message next to it saying 'Verification pending' or 'Verified' depending on the status. Also I have given a link called 'Edit' on clicking which text box for mobile will become editable and the message will disappear; instead again the check box for verify number will be displayed. I need help to change the display of message and check box.

  • 3 Contributors
  • 8 Replies
  • 121 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by adaykin

Dani AI

Generated

This thread shows the classic cross-browser gotcha: an IE-only script that manipulates the form UI (making the mobile textbox editable, swapping the status text for a checkbox, toggling the Edit/Cancel link) and then fails in Firefox. posted a working-IE example; and flagged browser-side debugging and element-lookup issues. The fastest, most robust fixes are to stop injecting raw HTML strings and to account for the page lifecycle (especially if this is inside an ASP.NET UpdatePanel).

Use a safer DOM approach and re-initialize after any partial postback:

  • Create and remove real DOM nodes (createElement / appendChild) instead of building HTML fragments with innerHTML. That avoids lost handlers and parsing differences across browsers (see MDN on innerHTML and createElement).
  • Make the input editable by toggling the element state and styles, and replace the status node with a programmatically created checkbox + label when going into edit mode.
  • If this is inside an ASP.NET UpdatePanel, partial postbacks will replace DOM nodes. Either render stable client IDs from the server (or ClientIDMode="Static") or re-run your initialization code on the UpdatePanel’s endRequest so dynamically-added controls and event hooks are recreated.

Example pattern (vanilla JS — create/append, clear nodes, toggle state):

function enterEditMode() {
  var fld = document.getElementById('mobileField');
  fld.readOnly = false;
  fld.style.background = '#fff';

  var area = document.getElementById('verifyArea');
  area.textContent = '';

  var cb = document.createElement('input');
  cb.type = 'checkbox';
  cb.name = 'verifyMobile';
  cb.value = '1';
  area.appendChild(cb);
  area.appendChild(document.createTextNode(' Verify mobile number.'));

  document.getElementById('editLink').textContent = 'Cancel';
}

Troubleshooting: use the browser console to find “null” or type errors, confirm IDs are unique and present when the script runs, and check partial postback behavior if using ASP.NET. Helpful refs: MDN on createElement (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and innerHTML (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML).

Recommended Answers

All 8 Replies

Member Avatar for dips255

I've used following code and it works fine with IE but not with fire fox.

function editmobile()
{	
	document.getElementById("mobile").readOnly=false;
	document.getElementById("mcncode").readOnly=false;
	document.getElementById('mobile').style.background ="#FFFFFF";
	document.getElementById('mcncode').style.background ="#FFFFFF";
	document.getElementById('divsms').innerHTML="<font color=blue><input type='checkbox' name='smsalert' value='1' >Verify mobile number.</font>"
	document.getElementById('divmobileedit').innerHTML="<a href='javascript:canceleditmobile()' >Cancel</a>"
}
function canceleditmobile()
{	
	document.getElementById("mobile").readOnly=true;
	document.getElementById("mcncode").readOnly=true;
	document.getElementById("mobile").value=document.myfrm.originalmobile.value;
	document.getElementById("mcncode").value=document.myfrm.originalmcncode.value;
	document.getElementById('mobile').style.background ="#F4F4F4";
	document.getElementById('mcncode').style.background ="#F4F4F4";
	document.getElementById('divsms').innerHTML=document.myfrm.strmconf.value;
	document.getElementById('divmobileedit').innerHTML="<a href='javascript:editmobile()' >Edit</a>"
}
Member Avatar for ~s.o.s~

Firefox comes with a pre-packaged feature called Error Console (Tools -> Error Console) which highlights all the Javascript errors on your web page. You can also grab hold of Firebug, an advanced Javascript debugging utility which is a Firefox plugin.

Member Avatar for adaykin

Interesting I tried doing something similar, and in the web developer plugin debug console in firefox I got a message saying that the element is null. Mine was working in ie too, but not in firefox.

Member Avatar for adaykin

Ok, instead of using name in forms, you need to use id for firefox

Member Avatar for ~s.o.s~

You *always* need to use ID 's instead of NAME 'S when using document.getElementById .

Member Avatar for adaykin

well I did solve it using names I can post code if you want...my point is use both. Were you able to solve it dips?

Member Avatar for ~s.o.s~

Just because it works doesn't mean it is correct and will surely always work. IE has a peculiar habit of working with NAME when it doesn't find an element with a given ID. So document.getELementById('someId') will first look for an element with an ID of ' someId ' and failing to find so will look for an element having NAME ' someId '. That's why it *works* in IE in your case. It it worked with NAME , don't you wonder why they kept the name of the function as getElementById ?

Member Avatar for adaykin

Just because it works doesn't mean it is correct and will surely always work. IE has a peculiar habit of working with NAME when it doesn't find an element with a given ID. So document.getELementById('someId') will first look for an element with an ID of ' someId ' and failing to find so will look for an element having NAME ' someId '. That's why it *works* in IE in your case. It it worked with NAME , don't you wonder why they kept the name of the function as getElementById ?

I think you are a little confused....

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.