...

View Full Version : JAVASCRIPT HELP NEEDED Info from a FORM TO a TABLE



brodjah
05-18-2009, 04:52 PM
I am a newbe to web delevlopment.
I have the following form:
<form name="quantityconnect" method="get" action="http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi ">

Quantity:
<select name="Quantity" size="1">
<option value="1">...1...</option>
<option value="2">...2...</option>
<option value="3">...3...</option>
<option value="4">...4...</option>
<option value="5">...5...</option>
<option value="6">...6...</option>
</select>

<input type="submit" value="Add to my basket">

</form>

What I want is for when the "Add to my basket" button is clicked, is for the value selected from the drop down box to be inputted into this table:

<table id="shoppingcart border="1">
<tr bgcolor="#ff0000">
<th align="center"><b>Item</b></th>
<th align="center"><b>Quantity</b></th>
<th align="center"><b>Price</b></th>
<th align="center"><b>Sum</b></th>
</tr>
<tr cellpadding="5">
<td><p><img src="20questionsbasket.jpg" alt="20questions" title="20 Questions">20 Questions Electronic Mind Reader</p></td>
<td>QUANTITY INSERTED HERE</td>
<td>9.77</td>
<td></td>
</tr>
<tr>
</table>

I have experimented many different ways unsuccessfully, and am now assuming i need to use some sort of javascript... Any1 have any code to help?

Thanks
Mike

Philip M
05-18-2009, 05:13 PM
Try this (additional code in blue):-


<form name="quantityconnect" method="get" action="http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi ">

<script type = "text/javascript">
function insertQty () {
document.getElementById("q").innerHTML = document.quantityconnect.Quantity.value
}
</script>

<select name="Quantity" size="1" onchange = "insertQty()">
<option value = "None">Select</option>
<option value="1">...1...</option>
<option value="2">...2...</option>
<option value="3">...3...</option>
<option value="4">...4...</option>
<option value="5">...5...</option>
<option value="6">...6...</option>
</select>

<input type="submit" value="Add to my basket">

</form>

<table id="shoppingcart border="1">
<tr bgcolor="#ff0000">
<th align="center"><b>Item</b></th>
<th align="center"><b>Quantity</b></th>
<th align="center"><b>Price</b></th>
<th align="center"><b>Sum</b></th>
</tr>
<tr cellpadding="5">
<td><p><img src="20questionsbasket.jpg" alt="20questions" title="20 Questions">20 Questions Electronic Mind Reader</p></td>
<td id = "q">QUANTITY INSERTED HERE</td>
<td>9.77</td>
<td></td>
</tr>
<tr>
</table>


He thought he saw a Rattlesnake
That questioned him in Greek:
He looked again, and found it was
The Middle of Next Week.
"The one thing I regret," he said,
"Is that it cannot speak!"
- Lewis Carroll

bdl
05-18-2009, 05:27 PM
So, is the form supposed to be submitting data to the table, or to the script referenced by 'http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi'? Something's missing here. Please be more specific.

brodjah
05-18-2009, 06:14 PM
So, is the form supposed to be submitting data to the table, or to the script referenced by 'http://www.doc.ic.ac.uk/~gu1/cgi-bin/formnew1.cgi'? Something's missing here. Please be more specific.

Its meant to submit to the table. The address was there as an example from when i was trying things myself. Sorry.

Philip, thankyou for the code, unfortionatly it doesnt seem to have worked. Any other ideas?

Philip M
05-18-2009, 06:25 PM
Philip, thankyou for the code, unfortionatly it doesnt seem to have worked. Any other ideas?

It works for me.

adios
05-18-2009, 07:40 PM
Why the submit button, if you're not uploading? Confusing.


function setQuantity(f)
{
var v, sel = f.elements.Quantity;
var showEl = document.getElementById('showEl');
if (v = sel.value)
showEl.replaceChild(document.createTextNode(v), showEl.firstChild);
else showEl.replaceChild(document.createTextNode('QUANTITY INSERTED HERE'), showEl.firstChild);
}


Quantity:
<select name="Quantity" size="1">
<option value="">select quantity</option>
<option value="1">...1...</option>
<option value="2">...2...</option>
<option value="3">...3...</option>
<option value="4">...4...</option>
<option value="5">...5...</option>
<option value="6">...6...</option>
</select>

<input type="button" value="Add to my basket" onclick="setQuantity(this.form)">


<td id="showEl" width="220">QUANTITY INSERTED HERE</td>

Philip M
05-18-2009, 07:54 PM
I would have thought that sensibly the selected quantity should appear in the <td> as soon as the selection is made, and not onsubmit or when a button is clicked.

adios
05-18-2009, 08:06 PM
Good point.


<select name="Quantity" size="1" onchange="setQuantity(this.value)">


function setQuantity(val)
{
var showEl = document.getElementById('showEl');
if (val)
showEl.replaceChild(document.createTextNode(val), showEl.firstChild);
else showEl.replaceChild(document.createTextNode('QUANTITY INSERTED HERE'), showEl.firstChild);
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum