Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

a couple of dynamic form problems 1

Status
Not open for further replies.
stacygrrl

stacygrrl

Technical User
May 4, 2004
8
GB
Greetings all...

I have cobbled together a form setup which allows users to dynamically add as many rows as are needed, then submit the completed form for insertion into a MySQL database. I have the form set up more or less as I want it, but there a couple of things that are giving me difficulty.

1) Whenever a new row is added, the values from the first row are inserted into the new row. I want this new row to be blank.

2) Is there a way I can increment the field names? i.e., first row fields are instrument1, us_date1, etc.. Second row fields are instrument2, us_date2, etc..., and so on.

I'm trying my best to understand what this script is doing, but can't seem to get a handle on it...I'm pretty new at working with .js. I suspect a solution to #2 might help solve #1, but I'd like to hear what you all have to say about it.

Thanks for any suggestions. Code is below.




Code: 
<html>
<head>
<script language="JavaScript" type="text/JavaScript">

function addRow(){
  tBody = document.getElementById('myTab').firstChild;
  tBody.appendChild(tBody.childNodes[1].cloneNode(true));
  theForm = document.forms[0];
  theForm.Item.selectedIndex=-1;
  fNames = ["instrument", "us_date", "hours", "rate", "charge", "notes"];
  for(i=0;i<fNames.length;i++){
    theFields = theForm[fNames[i]];
    theFields[theFields.length-1].value = theFields[0].defaultValue;
  }
}
</script>
</head>

<body>
<form name="FAform" method="get">

<table id=myTab>
<tr>
  <th>Instrument</th>
  <th>Date</th>
  <th>Hours</th>
  <th>Rate</th>
  <th>Charge</th>
  <th>Notes</th>
  </tr>
<tr><td>
<select name="instrument">
  <option value="Option1">Option 1</option>
  <option value="Option2">Option 2</option>
  <option value="Option3">Option 3</option>
</select>
</td><td>
<input name="us_date" type=text id="date1" value="" size="10">
</td>
<td><input name=hours type=text id="hours" value="" size="4"></td>
<td><input name=rate type=text id="rate" value="" size="4"></td>
<td><input name=charge type=text id="charge" value="" size="4"></td>
<td><input name=notes type=text id="notes" value="" size="10"></td>
</tr>
</table>
<input type=button value=AddRow onClick="addRow()">
<input type=submit>

        <p>
          <input type="submit" name="Submit" value="Submit">
          <input type="reset" name="Reset" value="Reset"> 
	      <input type="button" value="Add Row" onClick="addRow()">
        </p></td>
    </tr>
  <p>&nbsp;</p>
</form>

<p>&nbsp;</p>
</body>
</html>
 
Sort by date Sort by votes
its using CloneNode method, so its basically "cloning" the previous row, the only way is to read the innerHTML strip the values using RegularExpressions, or even better, write the inner html ur self...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
stcygrrl,

This was interesting, IE6 rejects innerHTML in this application. Strange, innerHTML did work for Mozilla.

I tested this is IE6, NN7 & MozFF..
Code: 
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
var numRow = 0;
var nwRowId = '';
var tdArray = new Array(6);

function addRow(){
numRow++;
nwRowId = "r" + numRow;
var tbody = document.getElementById('myTab').getElementsByTagName("TBODY")[0];
var nwRow = document.createElement("TR");
nwRow.setAttribute("id", nwRowId);
for(var k = 0; k < tdArray.length; k++){
		var nwTD = document.createElement("TD");
		nwRow.appendChild(nwTD);
		}
tbody.appendChild(nwRow);
//Now that the new row is intact add HTML		
resetHTML();
}

function resetHTML(){
tdArray.length = 0;
var td1HTML = '<select name="instrument' + numRow + '">\n'+
 ' <option value="Option1">Option 1</option>\n'+
 ' <option value="Option2">Option 2</option>\n'+
 ' <option value="Option3">Option 3</option>\n'+
'</select>\n';
var td2HTML = '<input name="us_date' +numRow+ '" type=text id="date1" value="" size="10">';
var td3HTML = '<input name="hours' +numRow+ '" type=text id="hours" value="" size="4">';
var td4HTML = '<input name="rate' +numRow+ '" type=text id="rate" value="" size="4">';
var td5HTML = '<input name="charge' +numRow+ '" type=text id="charge" value="" size="4">';
var td6HTML = '<input name="notes' +numRow+ '" type=text id="notes" value="" size="10">';
tdArray = [td1HTML,td2HTML,td3HTML,td4HTML,td5HTML,td6HTML];
var el = document.getElementById(nwRowId).getElementsByTagName('td');
for(j = 0; j < el.length; j++){
el[j].innerHTML = tdArray[j];
 }
}
</script>
</head>

<body>
<form name="FAform" method="get">

<table id=myTab>
<tbody>
<tr>
  <th>Instrument</th>
  <th>Date</th>
  <th>Hours</th>
  <th>Rate</th>
  <th>Charge</th>
  <th>Notes</th>
  </tr>
<tr><td>
<select name="instrument">
  <option value="Option1">Option 1</option>
  <option value="Option2">Option 2</option>
  <option value="Option3">Option 3</option>
</select>
</td><td>
<input name="us_date" type=text id="date1" value="" size="10">
</td>
<td><input name=hours type=text id="hours" value="" size="4"></td>
<td><input name=rate type=text id="rate" value="" size="4"></td>
<td><input name=charge type=text id="charge" value="" size="4"></td>
<td><input name=notes type=text id="notes" value="" size="10"></td>
</tr>
</tbody>
</table>
<input type=button value=AddRow onClick="addRow()">
<input type=submit>

        <p>
          <input type="submit" name="Submit" value="Submit">
          <input type="button" value="Reset" onClick="location.reload()">
          <input type="button" value="Add Row" onClick="addRow()">
        </p></td>
    </tr>
  <p>&nbsp;</p>
</form>
<p>&nbsp;</p>
</body>
</html>

Shout back if it needs adjustments.

HTH

Great Javascript Resource:
 
Upvote 0 Downvote
Thanks for the replies.

Lrnmore, your script will do the job for me, thanks very much!

Cheers!
stacygrrl
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
858
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
970
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
761
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
450
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top