Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Can't Enter Text into Input Text

    Hi All,

    I created input text in a JavaScript function.

    When I try in browser, I cannot enter text into those fields.

    Can someone tell me why and how to solve this?

    HTML File
    In this file, a function crtTable() will be called to create rows, columns and input text.

    Code:
    <table id="tblDetails" border="1">
    <tr>
    	<td>YEAR</td>
    	<td><input class="txtName" type="TEXT" name="year" id="year"></td>
    	<td></td>
    </tr>
    <tr>
    	<td>NAME 1</td>
    	<td><input class="txtName" type="TEXT" name="name1" id="name1"></td>
    	<td></td>
    <tr>
    <tr>
    	<td>NAME 2</td>
    	<td><input class="txtName" type="TEXT" name="name2" id="name2"></td>
    	<td id="adder" onclick="addRow.call(this)">[+]</td>
    </tr>
    </table> <!--tblDetails-->
    <br>
    <input type="button" value="Create Table" onclick="crtTable()">
    </form>
    <p id="pDetails"></p>
    <table id="tblTax" border="1">
    <tbody id="btblTax" onclick="crtTable()"></tbody>
    </table> <!--tblTax-->
    JavaScript
    All the input text created in below code, cannot be inserted with text.
    Pls help.

    Code:
    // row 2
    	var tr2 = tbody.insertRow(-1);
    	var td1 = tr2.insertCell(-1); td1.innerHTML = "Adjusted Income";	
    	var td2 = tr2.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Adjusted Income 1
    	inp1.name = "inpAdjIncome1";
    	inp1.id = "inpAdjIncome1";
    	inp1.className = "txtCalc";
    	td2.appendChild(inp1);
    	var td3 = tr2.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Adjusted Income 2
    	inp2.name = "AdjIncome2";
    	inp2.id = "AdjIncome2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr2.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr2.insertCell(-1); td5.innerHTML = "";
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr2.insertCell(-1); td.innerHTML = "";
    		}
    	}
    	
    	// row 3
    	var tr3 = tbody.insertRow(-1);
    	var td1 = tr3.insertCell(-1); td1.innerHTML = "+ Balancing Charge";
    	var td2 = tr3.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Balancing Charge 1
    	inp1.name = "BalCharge1";
    	inp1.id = "BalCharge1";
    	inp1.className = "txtCalc";
    	td2.appendChild(inp1);
    	var td3 = tr3.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Balancing Charge 2
    	inp2.name = "BalCharge2";
    	inp2.id = "BalCharge2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr3.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr3.insertCell(-1); td5.innerHTML = "";

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,460
    Thanks
    11
    Thanked 600 Times in 580 Posts
    is this a problem with IE? i shudder to suggest it might be the "document.createElement("input");" bug we all love around here...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Well, it is clearly something you are *NOT* showing us, because if I reduce the code to its very simplest case, it works just fine:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <table id="tblTax" border="1">
    <tbody id="tblBody"></tbody>
    </table> 
    
    <script type="text/javascript">
    var numOfName = 4; //???
    
    var tbody = document.getElementById("tblBody");
    	var tr2 = tbody.insertRow(-1);
    	var td1 = tr2.insertCell(-1); td1.innerHTML = "Adjusted Income";	
    	var td2 = tr2.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Adjusted Income 1
    	inp1.name = "inpAdjIncome1";
    	inp1.id = "inpAdjIncome1";
    	inp1.className = "txtCalc";
    	td2.appendChild(inp1);
    	var td3 = tr2.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Adjusted Income 2
    	inp2.name = "AdjIncome2";
    	inp2.id = "AdjIncome2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr2.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr2.insertCell(-1); td5.innerHTML = "";
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr2.insertCell(-1); td.innerHTML = "";
    		}
    	}
    	
    	// row 3
    	var tr3 = tbody.insertRow(-1);
    	var td1 = tr3.insertCell(-1); td1.innerHTML = "+ Balancing Charge";
    	var td2 = tr3.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Balancing Charge 1
    	inp1.name = "BalCharge1";
    	inp1.id = "BalCharge1";
    	inp1.className = "txtCalc";
    	td2.appendChild(inp1);
    	var td3 = tr3.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Balancing Charge 2
    	inp2.name = "BalCharge2";
    	inp2.id = "BalCharge2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr3.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr3.insertCell(-1); td5.innerHTML = "";
    </script>
    </body></html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I thought of giving you the codes having problem.

    Okay, I will paste the rest of the codes.


    Code:
    function crtTable()
    {
    	var text = "";
    	for (i=1; i<=numOfName; i++)
    	{
    		text = text + document.getElementById("name" + i).value + " and ";
    	} // + " " + numOfName
    	text = text + "<br>" + "Computation of Income Tax Payable for the Year of Assessment " + document.getElementById("year").value ;
    	document.getElementById("pDetails").innerHTML = text; 
    	
    	var tbody = document.getElementById("btblTax");
    	tbody.innerHTML = "";
    	
    	// create header
    	var tr = tbody.insertRow(-1);
    	var td1 = tr.insertCell(-1); td1.innerHTML = "";	
    	var td2 = tr.insertCell(-1); td2.innerHTML = "RM";
    	var td3 = tr.insertCell(-1); td3.innerHTML = "RM";
    	var td4 = tr.insertCell(-1); td4.innerHTML = document.getElementById("name1").value ;
    	var td5 = tr.insertCell(-1); td5.innerHTML = document.getElementById("name2").value;
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr.insertCell(-1); td.innerHTML = document.getElementById("name" + i).value;
    		}
    	}
    	
    	// row 1 
    	var tr1 = tbody.insertRow(-1);
    	var td1 = tr1.insertCell(-1); td1.innerHTML = "<u><b>Section 4(a)<b><u>";	
    	var td2 = tr1.insertCell(-1); td2.innerHTML = "<u>Business 1<u>";
    	var td3 = tr1.insertCell(-1); td3.innerHTML = "<u>Business 2<u>";
    	var td4 = tr1.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr1.insertCell(-1); td5.innerHTML = ""; 
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr1.insertCell(-1); td.innerHTML = "";
    		}
    	}
    	
    	// row 2
    	var tr2 = tbody.insertRow(-1);
    	var td1 = tr2.insertCell(-1); td1.innerHTML = "Adjusted Income";	
    	var td2 = tr2.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Adjusted Income 1
    	inp1.name = "inpAdjIncome1";
    	inp1.id = "inpAdjIncome1";
    	inp1.className = "txtCalc";
    	td2.appendChild(inp1);
    	var td3 = tr2.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Adjusted Income 2
    	inp2.name = "AdjIncome2";
    	inp2.id = "AdjIncome2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr2.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr2.insertCell(-1); td5.innerHTML = "";
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr2.insertCell(-1); td.innerHTML = "";
    		}
    	}
    	
    	// row 3
    	var tr3 = tbody.insertRow(-1);
    	var td1 = tr3.insertCell(-1); td1.innerHTML = "+ Balancing Charge";
    	var td2 = tr3.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Balancing Charge 1
    	inp1.name = "BalCharge1";
    	inp1.id = "BalCharge1";
    	inp1.className = "txtCalc";
    	inp1.type = "text";
    	td2.appendChild(inp1);
    	var td3 = tr3.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Balancing Charge 2
    	inp2.name = "BalCharge2";
    	inp2.id = "BalCharge2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr3.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr3.insertCell(-1); td5.innerHTML = "";
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr3.insertCell(-1); td.innerHTML = "";
    		}
    	}
    }

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Is it because of my browser?

    I did try putting html and JavaScript in one file,and it worked just fine, like you did.

    But if I put it separately and onclick call a function crtTable,my input text cannot work.

    What would be the cause of this problem?
    Last edited by azrina; 07-17-2013 at 12:12 AM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Time to learn to debug.

    I recommend you use Chrome browser for debugging, though you can use any browser. Chrome's debugger has a few advantages over the others and I find it easiest to use.

    So bring up the page in your browers, hit the F12 function key to enable the debugger, and then click on your element that calls crtTable().

    Look in the Console tab of the debugger to see any error messages, for starters.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Have tried as recommended.

    No error is showing.

    Do you have any idea, may be a different approach?

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Show us a live URL? SO we can look at the actual code in place for ourselves?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, I don't understand what do you mean by live URL?

    So I post the the full code, no more no less.

    index.html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>ISI-Tac</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="funIndex.js"></script>
    </head>
    <div id="cssContent">
    <body>
    <form id="frmDetails" name="form1">
    <table id="tblDetails" border="1">
    <tr>
    	<td>YEAR</td>
    	<td><input class="txtName" type="TEXT" name="year" id="year"></td>
    	<td></td>
    </tr>
    <tr>
    	<td>NAME 1</td>
    	<td><input class="txtName" type="TEXT" name="name1" id="name1"></td>
    	<td></td>
    <tr>
    <tr>
    	<td>NAME 2</td>
    	<td><input class="txtName" type="TEXT" name="name2" id="name2"></td>
    	<td id="adder" onclick="addRow.call(this)">[+]</td>
    </tr>
    </table> <!--tblDetails-->
    <br>
    <input type="button" value="Create Table" onclick="crtTable()">
    </form>
    <p id="pDetails"></p>
    <table id="tblTax" border="1">
    <tbody id="btblTax" onclick="crtTable()"></tbody>
    </table> <!--tblTax-->
    </body>
    </html>
    funIndex.js
    Code:
    if ((typeof Function.prototype.createDelegate) == 'undefined') 
    {
    	Function.prototype.createDelegate = function(obj, args)
    	{
    		var method = this;
    		return function() 
    		{
    			var callArgs = args || arguments;
    			return method.apply(obj || window, callArgs);
    		};
    	}
    }
    /***----------------------------------TO ADD ROW-------------------------------------------*/
    var numOfName = 2;
    function addRow( )
    {
        ++numOfName;
    	
        // change the current <td> back into an ordinary one with no content and no onclick hooked up
        this.id = null;
        this.innerHTML = "";
        this.onclick = function() { /* do nothing */ };
    
        // then add row to the entire table:
        var row = document.getElementById("tblDetails").insertRow(-1);
    	// create col 1
        var td1  = row.insertCell(-1);
        td1.innerHTML = "NAME " + numOfName;
    	// create col 2
        var td2  = row.insertCell(-1);
        var inp  = document.createElement("input");
        inp.name = "name" + numOfName;
    	inp.id = "name" + numOfName;
        inp.className = "txtName";
        td2.appendChild(inp);
    	// create col 3
        var td3  = row.insertCell(-1);
        td3.innerHTML = "[+]";
        td3.id = "adder"; // this becomes the new adder
        td3.onclick = addRow.createDelegate(td3);
    }
    
    function crtTable()
    {
    	var text = "";
    	for (i=1; i<=numOfName; i++)
    	{
    		text = text + document.getElementById("name" + i).value + " and ";
    	} // + " " + numOfName
    	text = text + "<br>" + "Computation of Income Tax Payable for the Year of Assessment " + document.getElementById("year").value ;
    	document.getElementById("pDetails").innerHTML = text; 
    	
    	var tbody = document.getElementById("btblTax");
    	tbody.innerHTML = "";
    	
    	// create header
    	var tr = tbody.insertRow(-1);
    	var td1 = tr.insertCell(-1); td1.innerHTML = "";	
    	var td2 = tr.insertCell(-1); td2.innerHTML = "RM";
    	var td3 = tr.insertCell(-1); td3.innerHTML = "RM";
    	var td4 = tr.insertCell(-1); td4.innerHTML = document.getElementById("name1").value ;
    	var td5 = tr.insertCell(-1); td5.innerHTML = document.getElementById("name2").value;
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr.insertCell(-1); td.innerHTML = document.getElementById("name" + i).value;
    		}
    	}
    	
    	// row 1 
    	var tr1 = tbody.insertRow(-1);
    	var td1 = tr1.insertCell(-1); td1.innerHTML = "<u><b>Section 4(a)<b><u>";	
    	var td2 = tr1.insertCell(-1); td2.innerHTML = "<u>Business 1<u>";
    	var td3 = tr1.insertCell(-1); td3.innerHTML = "<u>Business 2<u>";
    	var td4 = tr1.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr1.insertCell(-1); td5.innerHTML = ""; 
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr1.insertCell(-1); td.innerHTML = "";
    		}
    	}
    	
    	// row 2
    	var tr2 = tbody.insertRow(-1);
    	var td1 = tr2.insertCell(-1); td1.innerHTML = "Adjusted Income";	
    	var td2 = tr2.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Adjusted Income 1
    	inp1.name = "inpAdjIncome1";
    	inp1.id = "inpAdjIncome1";
    	inp1.className = "txtCalc";
    	td2.appendChild(inp1);
    	var td3 = tr2.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Adjusted Income 2
    	inp2.name = "AdjIncome2";
    	inp2.id = "AdjIncome2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr2.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr2.insertCell(-1); td5.innerHTML = "";
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr2.insertCell(-1); td.innerHTML = "";
    		}
    	}
    	
    	// row 3
    	var tr3 = tbody.insertRow(-1);
    	var td1 = tr3.insertCell(-1); td1.innerHTML = "+ Balancing Charge";
    	var td2 = tr3.insertCell(-1); 
    	var inp1 = document.createElement("input"); // input Balancing Charge 1
    	inp1.name = "BalCharge1";
    	inp1.id = "BalCharge1";
    	inp1.className = "txtCalc";
    	inp1.type = "text";
    	td2.appendChild(inp1);
    	var td3 = tr3.insertCell(-1);
    	var inp2 = document.createElement("input"); // input Balancing Charge 2
    	inp2.name = "BalCharge2";
    	inp2.id = "BalCharge2";
    	inp2.className = "txtCalc";
    	td3.appendChild(inp2);
    	var td4 = tr3.insertCell(-1); td4.innerHTML = "";
    	var td5 = tr3.insertCell(-1); td5.innerHTML = "";
    	
    	if (numOfName > 2)
    	{
    		for (i=3; i<=numOfName; i++)
    		{
    			td = tr3.insertCell(-1); td.innerHTML = "";
    		}
    	}
    }
    Last edited by azrina; 07-17-2013 at 03:31 AM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Put your code up on the web someplace. Give us the URL to that place.

    You know, like "http://www.yoursite.com/dummytest.html"

    If you really must attach files, okay. I would rather you didn't but I will look at them if you do. <sigh/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, I dont know where to put the code.

    I have attached the code above, full code.

    Pls look into it.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Code worked perfectly for me.

    Yes, in separate files.

    I can only guess that you aren't putting your "funIndex.js" file into the right directory or something like that.

    Or maybe you aren't using a web server and are trying to do this all in files???
    But even that worked for me, once I allowed the "blocked content".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New Coder
    Join Date
    Jul 2010
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I can only guess that you aren't putting your "funIndex.js" file into the right directory or something like that.
    It is in the right directory, or else, function addRow wont work too.

    Or maybe you aren't using a web server and are trying to do this all in files???
    Yes, I'm not using web server. Do I really need to use web server?
    Is that wrong to separate html and javascript?

    But even that worked for me, once I allowed the "blocked content".
    What browser you use? I use IE9 and I even have tried with diff version of IE, Chrome, Opera, Firefox, different pc, still it didnt work.

    When I run at IE, at the bottom of the window, msg prompted "IE restricted this webpage from running scripts" and I click a button "Allow Blocked Content", still it cannot work.

    What is that thing you have that I don't to make it run perfectly?

    What kind of settings do I have to do?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Yes, I used MSIE version 9, same as you, when I tried running it from the file system.

    Yes, I got the "IE restricted this webpage..." message and clicked on "Allow...". And then it all worked. 100%.

    So I am totally mystified as to why you are having problems.

    (I ran it in Chrome, when I used it from a webserver, by the way. It worked 100% there, as well.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •