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

add multiple rows to table from drop down selections

Status
Not open for further replies.
smitheroo

smitheroo

Programmer
Aug 30, 2008
15
0
0
GB
Hi, I'm looking for some help to combine scripts please. I'm only used to working with really basic javascript.

I've got 5 drop downs and an add button, when the 2nd drop down is clicked it shows a hidden drop down on the third and so on till the fifth drop down.
When I click 'add' I want to be able to repeat add rows to the table above the drop downs.

Currently, it writes one new row to my prefered destination table (just above the drop downs), then after running through the drop downs again and clicking 'add' again it adds to the table at the top of the page, which is repeatable.

I can't get repeatable new rows added to the table above the drop downs, only one.

I'd really appreciate some help.

Ian



...........

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

	<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>


<script type="text/javascript">

<!--//

function addAction()

{

document.getElementById('addedproduct').value=document.getElementById('problem2').value;

document.getElementById('addedproblem').value=document.getElementById('product2').value;

document.getElementById('addedprocess').value=document.getElementById('process2').value;

}

//-->

</script>






<script type="text/javascript">
function ianinsRow()
{
var x=document.getElementById('ianTable').insertRow(0);
var y=x.insertCell(0);
var z=x.insertCell(1);
var a=x.insertCell(2);
var b=x.insertCell(3);
var c=x.insertCell(4);
y.innerHTML="<input type=\"radio\" name=\"addedradio\" id=\"addedradio\">";
z.innerHTML="<input type=\"text\" name=\"addedproduct\" id=\"addedproduct\" style=\"border:1px solid #000;\">";
a.innerHTML="<input type=\"text\" name=\"addedproblem\" id=\"addedproblem\" style=\"border:1px solid #000;\">";
b.innerHTML="<input type=\"text\" name=\"addedprocess\" id=\"addedprocess\" style=\"border:1px solid #000;\">";
c.innerHTML="&nbsp;";
}
</script>

	<style type="text/css">

	.hide {
		display: none;
		}

</style>

</head>

<body>

<table id="ianTable" border="1">
<tr>
<td align="left">&nbsp;

</td>
<td align="left">&nbsp;

</td>
<td align="left">&nbsp;

</td>
<td align="left">&nbsp;

</td>
<td align="left"></td>
</tr>
</table>
<br />





<table summary="">
<tbody>
<tr>
<td style="background-color:#eeeeee; text-align:left;">
<b>page title</b>
</td>
<td style="background-color:#eeeeee; text-align:right;">
<b>xxxxxxxx</b>
</td>
</tr>
</tbody>
</table>
<table summary="">
<tbody>
<tr>
<td>
<b>xxxxx xxxxxxxxxx</b>
</td>
<td align="right">
<b>Process</b>&nbsp;&nbsp;&nbsp;Complaints</td>
</tr>
</tbody>
</table>
<table summary="">
<tbody>
<tr>
<td align="left">Mr xxxxxxxxxxx</td>
<td align="left">DOB:&nbsp;&nbsp;xxxxxxxxxxx</td>
</tr>
</tbody>
</table>
<form action="xxxxxxxxxx.htm" name="captureProcessComplaint_CategoriseComplaint" method="POST">
<div style="height: 125px; overflow:auto">
<table>
<tbody>
<tr>
<td align="left" colpan="4">
<b>Issues List</b>
</td>
</tr>
<tr>
<td align="left">
<b>Primary</b>
</td>
<td align="left">
<b>Product</b>
</td>
<td align="left">
<b>Problem</b>
</td>
<td align="left">
<b>Process</b>
</td>
<td align="left"></td>
</tr>
<!-- hidden fields -->
<tr>
<td align="left">
<input type="text" name="addedradio" id="addedradio" style="border:1px solid #fff;">
</td>
<td align="left">
<input type="text" name="addedproduct" id="addedproduct" style="border:1px solid #fff;">
</td>
<td align="left">
<input type="text" name="addedproblem" id="addedproblem" style="border:1px solid #fff;">
</td>
<td align="left">
<input type="text" name="addedprocess" id="addedprocess" style="border:1px solid #fff;">
</td>
<td align="left"></td>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td>
<b>What</b>
</td>
</tr>
<tr>
<td>
<select name="what" multiple="true" size="5">
<option value="NULL">Please select...</option>
<option value="001">Take Money out</option>
<option value="002">Pay Money in</option>
<option value="003">Transfer Money</option>
<option value="004">Change the details on my account / product</option>
</select>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<b>Where</b>
</td>
</tr>
<tr>
<td>
<select name="where" id="where" multiple="true" size="5" onChange="ShowContent('problem2'); HideContent('problem'); return true;">
<option value="NULL">Please select...</option>
<option value="In a Branch">In a Branch</option>
<option value="Using a Cashpoint">Using a Cashpoint</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<b>Problem</b>
</td>
</tr>
<tr>
<td>
<select name="problem" id="problem" multiple="true" size="5" disabled="true">
<option value="">First select option for Where...</option>
</select>

<select class="hide" name="problem2" id="problem2" multiple="true" size="5" onChange="ShowContent('product2'); HideContent('product'); return true;">
<option value="Dummy content to be captured">Dummy content to be captured</option>
<option value="aaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="bbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
</select>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<b>Product</b>
</td>
</tr>
<tr>
<td>
<select name="product" id="product" multiple="true" size="5" disabled="true">
<option value="">First select option for Problem...</option>
</select>

<select class="hide" name="product2" id="product2" multiple="true" size="5" onChange="ShowContent('process2'); HideContent('process'); return true;">
<option value="Dummy content to be captured">Dummy content to be captured</option>
<option value="aaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="bbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
</select>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<b>Process</b>
</td>
</tr>
<tr>
<td>
<select name="process" id="process"multiple="true" size="5" disabled="true">
<option value="">First select option for Product....</option>
</select>

<select class="hide" name="process2" id="process2" multiple="true" size="5" onChange="selectionProcess('process')">
<option value="Dummy content to be captured">Dummy content to be captured</option>
<option value="aaaaaaaaaaaaaaaa">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="bbbbbbbbbbbbbbbbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%">
<tr>
<td align="right" colspan="2">
<input type="button" name="Add" id="Add" value="Add" onClick="addAction(); ianinsRow()">
</td>
<tr></tr>
<td align="left">
<input type="button" id="BackButton" name="BackButton" value="Back" returnCode="BackButton" onClick="document.location='xxxxxx.htm';" class="NavButton">
</td>
<td align="right">
<input type="submit" id="ContinueButton" name="ReturnCode0" value="Continue" returnCode="ReturnCode0" onClick="parent.setReturnCode('ReturnCode0');" class="NavButton">
</td>
</tr>
</table>
<div id="hiddenselectactiondiv" style="visibility: hidden">
<input type="text" id="currentSelectionList" name="currentSelectionList">
<input type="text" id="currentDropdownList" name="currentDropdownList">
<input type="text" id="selectedIssue" name="selectedIssue">
<input type="text" id="whatCode" name="whatCode" value="">
<input type="text" id="whatDescription" name="whatDescription" value="">
<input type="text" id="whereCode" name="whereCode" value="">
<input type="text" id="whereDescription" name="whereDescription" value="">
<input type="text" id="problemCode" name="problemCode" value="">
<input type="text" id="problemDescription" name="problemDescription" value="">
<input type="text" id="productCode" name="productCode" value="">
<input type="text" id="productDescription" name="productDescription" value="">
<input type="text" id="processCode" name="processCode" value="">
<input type="text" id="processDescription" name="processDescription" value="">
<input type="submit" id="AddButton" name="AddButton" value="Add" returnCode="AddButton" onClick="parent.setReturnCode('AddButton');" class="NavButton">
<input type="submit" id="ShowListButton" name="ShowListButton" value="ShowListButton" returnCode="ShowListButton" onClick="parent.setReturnCode('ShowListButton');" class="NavButton">
<input type="submit" id="RemoveButton" name="RemoveButton" value="Remove" returnCode="RemoveButton" onClick="parent.setReturnCode('RemoveButton');" class="NavButton">
</div>
</form>




</body>
</html>
 
Sort by date Sort by votes
Hi

When you add a new row you set the same 4 [tt]id[/tt]s again and again. The [tt]id[/tt], meaning identifier, must be unique per document.

There may be other error, but this should be the first one to correct.

Feherke.
 
Upvote 0 Downvote
Hi,

Thanks for looking. Yeah, you're right id's should be unique, I think I might try another direction. I'm told by a friend that I should try 'document.writein' method. I know I have the ingredients all there, I just need to be a better chef :~]
 
Upvote 0 Downvote
Hi

I never heard about 'document.writein'...

Or do you mean [tt]document.writeln[/tt] ? If yes, I suggest to keep him as friend and do not rely on his JavaScript advices. :-(

[tt]document.writeln()[/tt] is useful to enter dynamic parts into the [tt]document[/tt] being rendered. But after the rendering is finished, so [tt]document[/tt] is closed, [tt]document.writeln()[/tt] will create, a new [tt]document[/tt], discarding the old one. Not what you want in this case.

Make some experiments in FireFox using FireBug extension or the JavaScript shell bookmarklet. Type in some [tt]document.open()[/tt], [tt]document.writeln()[/tt] and [tt]document.close()[/tt] commands to see how the browser reacts.

Feherke.
 
Upvote 0 Downvote
Thanks for the advice, especially the firebug.


I've been trawling through articles and think I can use this script.

I just need to work out how to have three drop downs instead of 1 before it passes the selections to the text box.

Can anyone help please?

many thanks

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function copy() {
var sel = document.getElementById("names");
var text = sel.options[sel.selectedIndex].value;
var out = document.getElementById("output");
out.value += text+"\n";
}
 </script>

</head>

<body>


<form name="myForm" id="myForm">


<select id="names">
 <option>Product One</option>
 <option>Product Two</option>
 <option>Product Three</option>
 <option>Product Four</option>
 </select>
 <input type="button" onclick="copy()" value="Copy">
 <textarea id="output"></textarea>
</form>

</body>
</html>
 
Upvote 0 Downvote
Hello,

i've managed to bodge this script to pass text from three drop downs. It's probably very verbose, but I'm a javascript amateur.

Any suggestions to clean it up would be appreciated.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function copy() {
var sel = document.getElementById("names");
var text = sel.options[sel.selectedIndex].value;
var sel2 = document.getElementById("names2");
var text2 = sel2.options[sel2.selectedIndex].value;
var sel3 = document.getElementById("names3");
var text3 = sel3.options[sel3.selectedIndex].value;
var out = document.getElementById("output");
out.value += text + text2+ text3+"\n";
}
 </script>

</head>

<body>


<form name="myForm" id="myForm">

<select id="names3">
 <option>Product One</option>
 <option>Product Two</option>
 <option>Product Three</option>
 <option>Product Four</option>
 </select>
<select id="names2">
 <option>Product One</option>
 <option>Product Two</option>
 <option>Product Three</option>
 <option>Product Four</option>
 </select>
 <select id="names">
 <option>Product One</option>
 <option>Product Two</option>
 <option>Product Three</option>
 <option>Product Four</option>
 </select>
 
 <input type="button" onclick="copy()" value="Copy">
 <textarea id="output"></textarea>
</form>

</body>
</html>
 
Upvote 0 Downvote
Hi

That looks good.

I would mention only one thing, but nowadays this is more just matter of style. ( I learned JavaScript long time ago when machines were slow and [tt]getElementById()[/tt] took considerable time for some browsers. )
Code: 
[gray]// these must be global, declare them outside of function[/gray]
[b]var[/b] sel;
[b]var[/b] sel2;
[b]var[/b] sel3;
[b]var[/b] out;

[gray]// set references to the objects as soon as the document is loaded[/gray]
window.onload=[b]function[/b]() {
  sel = document.getElementById([i]"names"[/i]);
  sel2 = document.getElementById([i]"names2"[/i]);
  sel3 = document.getElementById([i]"names3"[/i]);
  out = document.getElementById([i]"output"[/i]);
}

[gray]// then just use those references[/gray]
[b]function[/b] copy()
{
  [b]if[/b] (!out) [b]return[/b]; [gray]// do nothing if the references were not set yet[/gray]

  [b]var[/b] text = sel.options[sel.selectedIndex].value;
  [b]var[/b] text2 = sel2.options[sel2.selectedIndex].value;
  [b]var[/b] text3 = sel3.options[sel3.selectedIndex].value;
  out.value += text + text2+ text3+[i]"\n"[/i];
}
Declaring and setting those text, text2 and text3 variables is pointless here, they are probably just slowing down the execution, but barely measurable.

Anyway, I suggest to go with the coding style which is more clear for you, for now.


Feherke.
 
Upvote 0 Downvote
thanks for that lesson. you're a gent.

Just one more thing, do you know if it's possible to put a radio button at the start of the text results? in here:

out.value += text + text2+ text3+"\n";
 
Upvote 0 Downvote
Hi

No. You can not put any HTML element inside the [tt]textarea[/tt].

But why a [tt]textarea[/tt] anyway ? Want it to be editable ? If not, use a [tt]div[/tt]. Replace this two lines :
Code: 
[s]out.value += text + text2+ text3+"\n";[/s]
out.innerHTML += "<input type=\"radio\">" + text + text2 + text3 + "<br>\n"; 

[s]<textarea id="output"></textarea>[/s]
<div id="output"></div>

Feherke.
 
Upvote 0 Downvote
Thanks for inner html update, excellent!

I just had a text area from the example script I found earlier.

thanks for your replies, you're a great help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
152
lexer
lexer
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
124
nanbread
nanbread
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
153
malpa
malpa
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
173
Kennelbloke
Kennelbloke
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
132
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top