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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Populating presets 1

Status
Not open for further replies.
jags22

jags22

Programmer
Oct 17, 2001
44
US
I have a page w/ a list of people. This list has 3 text boxes associated w/ them individually (ie jon has 3 boxes, jane has 3 boxes etc). What I am looking to do is put 3 boxes at the top of the page that I would call presets. I enter the preset and hit a (link or input or whatever) next to the individual and it populates his/her 3 boxes w/ the same values.
The list of names will be dynamic.

What would I want to pass to the script? I think it should be straight forward so if anyone knows where I could find something similar to this, I would appreciate it. Thx.

Here is the jsp: it may help


<html>
<h1>E</h1>
<form name="AttendanceSheetForm" method="get">
<p>Blah <br>
blah <br>

blah<br><br/>
</p>

<table cellspacing="0" cellpadding="5" border="1">
<tr class="cellcontent">
<td>Presets</td>

<td align="center"><input type="text" size="3" maxlength="3" name="0-1"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="0-2"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="0-3"></td>
</tr>
</table>
<table cellspacing="0" cellpadding="5" border="1">
<tr class="cellheader">

<th>Name</th>
<th>Achievement</th>
<th>Skills</th>
</tr>
<tr class="cellcontent">
<td>AutoTerm, First<a href="#" onclick="fun(1)">&nbsp;&nbsp;&nbsp;use Preset</a></td>

<td align="center"><input type="text" size="3" maxlength="3" name="1-1"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="1-2"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="1-3"></td>
</tr>
<tr class="cellcontent">
<td>Autoterm, Second<a href="#" onclick="fun(2)">&nbsp;&nbsp;&nbsp;use Preset</a></td>

<td align="center"><input type="text" size="3" maxlength="3" name="2-1"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="2-2"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="2-3"></td>
</tr>
<tr class="cellcontent">
<td>Autoterm, Third<a href="#" onclick="fun(3)">&nbsp;&nbsp;&nbsp;use Preset</a></td>

<td align="center"><input type="text" size="3" maxlength="3" name="3-1"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="3-2"></td>
<td align="center"><input type="text" size="3" maxlength="3" name="3-3"></td>
</tr>
</table>
<p><input type="submit" name="cancel" value="Cancel" class="linkbutton">
<input type="submit" name="save" value="Save" class="linkbutton">

<input type="reset" value="Clear" class="linkbutton">
</p>
</form>
</html>
 
Sort by date Sort by votes
like so?
Code: 
<html>
<h1>E</h1>

<script type="text/javascript">
function fun(x) {
	var form = document.forms["AttendanceSheetForm"];
	var pre1 = form.elements["0-1"].value;
	var pre2 = form.elements["0-2"].value;
	var pre3 = form.elements["0-3"].value;
	form.elements[x + "-1"].value = pre1;
	form.elements[x + "-2"].value = pre2;
	form.elements[x + "-3"].value = pre3;
}
</script>

<form name="AttendanceSheetForm" method="get">
<p>Blah <br>
   blah <br>
   blah<br><br/>
</p>

<table cellspacing="0" cellpadding="5" border="1">
  <tr class="cellcontent">
    <td>Presets</td>
    <td align="center"><input type="text" size="3" maxlength="3" name="0-1"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="0-2"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="0-3"></td>
  </tr>
</table>
<table cellspacing="0" cellpadding="5" border="1">
  <tr class="cellheader">
    <th>Name</th>
    <th>Achievement</th>
    <th>Skills</th>
  </tr>
  <tr class="cellcontent">
    <td>AutoTerm, First<a href="#" onclick="fun(1)">&nbsp;&nbsp;&nbsp;use Preset</a></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="1-1"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="1-2"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="1-3"></td>
  </tr>
  <tr class="cellcontent">
    <td>Autoterm, Second<a href="#" onclick="fun(2)">&nbsp;&nbsp;&nbsp;use Preset</a></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="2-1"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="2-2"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="2-3"></td>
  </tr>
  <tr class="cellcontent">
    <td>Autoterm, Third<a href="#" onclick="fun(3)">&nbsp;&nbsp;&nbsp;use Preset</a></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="3-1"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="3-2"></td>
    <td align="center"><input type="text" size="3" maxlength="3" name="3-3"></td>
  </tr>
</table>
<p>
	<input type="submit" name="cancel" value="Cancel" class="linkbutton">
  <input type="submit" name="save" value="Save" class="linkbutton">
  <input type="reset" value="Clear" class="linkbutton">
</p>
</form>
</html>

-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
Upvote 0 Downvote
Jeff,

It sure looks like it should work, but for some reason it isn't. The first link changes the second text box of the preset group to the same value of the first box of the preset group. The second link changes the 3 box of the preset to the same as the first box of the preset. Any ideas?
 
Upvote 0 Downvote
hmmm... you get what you pay for. ;-)

actually it looks like form field names consisting only of numbers is confusing IE.

try adding a letter like "f" to the beginning all of the text inputs' names, then fix the function:
Code: 
<script type="text/javascript">
function fun(x) {
    var form = document.forms["AttendanceSheetForm"];
    var pre1 = form.elements["f0-1"].value;
    var pre2 = form.elements["f0-2"].value;
    var pre3 = form.elements["f0-3"].value;
    form.elements["f" + x + "-1"].value = pre1;
    form.elements["f" + x + "-2"].value = pre2;
    form.elements["f" + x + "-3"].value = pre3;
}
</script>


anyway, it's good practice imho to name form fields beginning with a letter or underscore so they translate easily to javascript variables

-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
Upvote 0 Downvote
Works like a champ. Thanks Jeff.

P.S. ("hmmm... you get what you pay for"). You can put it on my tab.[2thumbsup]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

emozley
  • Locked
  • Question
Waiting for a div to exist before populating
Replies
3
Views
78
feherke
feherke
CADTenchy
  • Locked
  • Question
trouble dynamically populating option select pulldowns
Replies
1
Views
34
CADTenchy
CADTenchy
PushCode
  • Locked
  • Question
need help looping through and populating text fields
Replies
2
Views
50
PushCode
PushCode
cyclopsvs
  • Locked
  • Question
set selectedIndex after populating select box
Replies
6
Views
60
cyclopsvs
cyclopsvs
middletree
  • Locked
  • Question
JS populating select box--problem
Replies
5
Views
47
middletree
middletree

Part and Inventory Search

Sponsor

Back
Top