Jump to content

Logic problem

justinbriggs1

By justinbriggs1
in JavaScript

Recommended Posts

justinbriggs1 Member

justinbriggs1

Posted
Posted

I've been working on this form all day and due to a lack of planning/understanding I have left myself with a problem.I have a simple table with a number in the left column and an input box on the right. When you type something in the box and press the "add" button, it will add another empty box underneath the original box and increment the number by 1. It works fine, but I would like to have an "if" statement that won't let the method add another box if the current box (the last one in the table) is empty. Here's the code:<html xmlns="http://www.w3.org/1999/xhtml" ><head><script type="text/javascript">function addRowToTable(){ var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length; // if there's no header row in the table, then iteration = lastRow + 1 var iteration = lastRow; var row = tbl.insertRow(lastRow); // left cell var cellLeft = row.insertCell(0); var textNode = document.createTextNode(iteration); cellLeft.appendChild(textNode); // right cell var cellRight = row.insertCell(1); //el can be made at the beginning before you create the row. var el = document.createElement('input'); el.type = 'text'; el.name = 'txtRow' + iteration; el.id = 'txtRow' + iteration; el.size = 40; cellRight.appendChild(el); var contents = document.getElementById(el.name).value; //used for testing document.getElementById("testinput").value = contents; document.getElementById("it").value = iteration; }function removeRowFromTable(){ var tbl = document.getElementById('tblSample'); var lastRow = tbl.rows.length; if (lastRow > 2) tbl.deleteRow(lastRow - 1);}</script></head><body><form action="sample.html"><p><input type="button" value="Add" onclick="addRowToTable();" /><input type="button" value="Remove" onclick="removeRowFromTable();" /><input type="button" value="Submit" onclick="validateRow(this.form);" /></p><p></p><table border="1" id="tblSample"><tr><th colspan="3">Invitation List</th></tr><tr><td>1</td><td><input id = "txtRow1"type="text" name="txtRow1" size="40" /></td></tr></table></form><br><br><input id = "testinput" name="testinput" type="text" /><input id = "it" name="it" type="text" /></body></html>Any help would be appreciatedJW

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

A disabled button is more user-friendly than a click that does nothing. See if you can squeeze this into your addRowToTable function:

			var but = document.getElementById("my_add_row_button");			but.disabled = true;			el.onchange = function () {				if (this.value = "") {					but.disabled = true;				} else {					but.disabled = false;				}			}

Obviously you'll need to add the id to your button for this to work.

Link to comment
Share on other sites
justinbriggs1 Member

justinbriggs1

Posted
  • Author
Posted
A disabled button is more user-friendly than a click that does nothing. See if you can squeeze this into your addRowToTable function:
			var but = document.getElementById("my_add_row_button");			but.disabled = true;			el.onchange = function () {				if (this.value = "") {					but.disabled = true;				} else {					but.disabled = false;				}			}

Obviously you'll need to add the id to your button for this to work.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...