Dynamic textfield name isssue

**satkannanab** · 07-06-2011, 07:24 AM

Hi all,

I am trying to create one dynamic text field through below script.

Code:

              var sel1 = document.createElement('input');
		sel1.type='text';
		sel1.setAttribute('name', 'capital');

but when i am trying to access the text field by document.getEleementsByName('capital'); the object is becoming null, and when i open view source its , <input submitName='capital' /> where as it supposed to be <input name='capital'/> , so please help me on this.

**jscheuer1** · 07-06-2011, 08:05 AM

If you really mean 'view source', that will only show you what's hard coded on the page. If you mean something else, then it might be showing you the result or lack thereof of the script code. If so, please be specific as to what type of view you are using, in what browser, what version, and using what add on and/or utility for that browser.

As to the script code in your post, it does virtually nothing. It creates the element as specified and as expected, but doesn't attach it to the document in any way.

If I do:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form id="test" action="">
</form>
<script type="text/javascript">
              var sel1 = document.createElement('input');
		sel1.type='text';
		sel1.setAttribute('name', 'capital');
		document.getElementById('test').appendChild(sel1);
</script>
</body>
</html>

I get in the generated source view of Firefox 5 developer tools add on and in IE 9 developer tools utility outerHTML view of the html tag:

Code:

<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form id="test" action="">
<input name="capital" type="text"></form>
<script type="text/javascript">
              var sel1 = document.createElement('input');
		sel1.type='text';
		sel1.setAttribute('name', 'capital');
		document.getElementById('test').appendChild(sel1);
</script>

</body></html>

This holds true in IE 9 for its IE 7, IE 8 and IE 9 modes. The page also presents as expected in both browsers, all three modes in IE.

**satkannanab** · 07-06-2011, 10:02 AM

Hi John,

i am using IE 8, and Firefox;
In Firefox it's coming fine but in IE8 ,developer tools when i see the source its displaying the source as <input submitName='capital'/>

Please help me on this.

**jscheuer1** · 07-06-2011, 02:31 PM

I figured it out. In order for IE to perform as desired here the page must be in standards mode. Use this DOCTYPE:

Code:

<!DOCTYPE html>

as the very first thing in the source code of the page.

You may instead use one of the at least several other standards invoking DOCTYPES.*

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

Or, if that's impossible for some reason, put up a test page somewhere that shows the problem.

*See:

http://www.javascriptkit.com/howto/doctype.shtml

for more info on DOCTYPES. Any on that page should support this, although the frameset ones are probably not applicable.

**satkannanab** · 07-14-2011, 05:32 AM

Hi John,

Please look into the below code and help me in finding the solution.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- JSP name : quickCalculation.jsp-->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="/WEB-INF/CurrencyFormatTaglib.tld" prefix="dotCurrency"%>
<html>
<head>

//Jscript Code for adding row
	function addRow() {
		
		var myTable = '<TABLE>';
 		var arrIdx = 0;
 		var ptable = document.getElementById('capitalTable');
		var index = document.getElementById("psize").value;
		var lastElement = document.getElementById("psize1").value;
		//var index = lastElement;
		
		var row = ptable.insertRow(lastElement);
		myTable += '<hr color="#FFFFFF">';
		// first row start here
   		myTable += '<TR>';
  		// first TD
     	var cellLeft = row.insertCell(0);
		var textNode = document.createTextNode('Kapitaal*:');
		var br12=document.createElement('br');
		var br13=document.createElement('br');
		var br05=document.createElement('br');
		
		cellLeft.appendChild(textNode);
		cellLeft.appendChild(br12);
		cellLeft.appendChild(br13);
		cellLeft.appendChild(br05);
		myTable += '</TD>';
		 //second TD
		myTable += '<TD style="text-align: left; width: 35%">';	
		// add combo
		var m=1;
		var cellRightSel = row.insertCell(1);
		var sel1 = document.createElement('input');
		sel1.type='text';
		sel1.setAttribute('name', 'capital'); 		
		//sel1.name = 'capital';
		sel1.width = '90%';
		sel1.setAttribute("size", "38");
        sel1.setAttribute("maxlength", "20");
        sel1.onchange=function(){ capitalSumCheck(); };
        sel1.onkeypress=function(){ numberonly(this, event)};
		var br=document.createElement('br');
		var br1=document.createElement('br');
		cellRightSel.appendChild(sel1);
		
		
 		
 				
 		document.getElementById("psize").value=parseInt(index) + 1;
		document.getElementById("psize1").value=parseInt(lastElement)+1;
		
		
	return false;
	}  
	
</script>
</head>
<body">
			<s:form action="quickCalculation" id="quickCalculationForm" name="quick">
						<div id="capitals">
							
							<h4><s:text name="rek.dip.header10"></s:text></h4>
							
							
								<table id="capitalTable" class="selection-table" width="100" cellspacing="0">
								<tbody>
								
								<%int count=0; %>
								<s:iterator value="offerCalculationRequest.capitalComponents">
								
 									<tr>
 										<td style="text-align: left; width: 5%;vertical-align: top">
 											<s:text name="rek.dip.capital" />
 										</td>
										<td style="text-align: left; width: 35%;">
											<s:textfield name="capital" maxlength="20"  cssStyle="width:90%" size="20" onkeypress="return numberonly(this, event)" onchange="capitalSumCheck();"/><br/><br/>
											<input type="radio"  name="gender<%= count %>" value="Sexe afhankelijk" id="genderRelatedId<%= count %>" checked onclick="setHiddenValueForGender('<%= count %>',this);" disabled="disabled">Sekseafhankelijk &nbsp;
											<input type="radio" name="gender<%= count %>" value="Sexe neutraal"   id="genderRelatedId1<%= count %>"  onclick="setHiddenValueForGender('<%= count %>',this);" disabled="disabled" >Sekseneutraal
											<input type="hidden"  id="radioHiddenId<%=count %>" name="genderRelated" value="Sekseafhankelijk" />
										</td>
										<td style="text-align: right; width: 10%;vertical-align: middle;vertical-align: top;">
											<s:text name="rek.dip.Origin" />
										</td>
										<td style="text-align: left; width: 35%;vertical-align: top;">
											<input type="radio" name="origin<%=count %>" value="Eigen geld"  id="originId<%=count %>"   onclick="setHiddenValue('<%= count %>',this);" >Eigen geld &nbsp;
											<input type="radio" name="origin<%=count %>" id="originId1<%=count %>" value="Vreemd Geld" onclick="setHiddenValue('<%= count %>',this);">Vreemd Geld
											<input type="hidden"  id="radioHiddenOriginId<%=count %>" name="originValue" value='<s:property  value="origin"/>' />
										</td>
										<td id="deleteButtonTdId<%=count %>" style="text-align: right; width: 15%">
											<img id="deleteButtonId<%=count %>" name="deleteButtonName<%=count %>" src="<%=request.getContextPath()%>/images/Icons/Delete  Cancel.gif" width="26" height="26" title="" alt="Remove" onclick="deleteParticular('capitalTable','deleteButtonTdId<%=count %>');"/>
										</td>
									
									</tr>
									
									<% count++; %>
									
								</s:iterator>
								<input type="hidden" name="psize" id="psize" value="<%= count %>"/>
								<input type="hidden" name="psize1" id="psize1" value="<%= count %>"/>
								</tbody>
								</table> 
								
							</div>
							</div>
								<img src="<%=request.getContextPath()%>/images/Icons/Add.gif" width="26" height="26" title="" align="left" alt="ADD" onclick="addRow();"  />
							
						</div>
						
				</s:form>
		
      
</body>
</html>

**jscheuer1** · 07-14-2011, 03:40 PM

There may also be other problems, but assuming that works in other browsers, all you need is a standards invoking DOCTYPE.

Change:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

to (closest standards invoking DOCTYPE to what you have):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Or, as I suggested originally (which has a number of advantages, but some disadvantages):

Code:

<!DOCTYPE html>

Either one should fix it right up.

Thread: Dynamic textfield name isssue

Thread Tools

Search Thread