asked on

Submitting Form Variables

Hi,

I have this basic ecommerce page that needs to have the weight and price in the drop-down menu so it gets submitted with the form based on the users selection. At the moment the weight & price are included in the top part of the form and I would like to change this so they are part of the drop-down choice (Form Tag). So if someone selects "250 grams then the price will be $31.50, 500 grams will be $50, 20 kg will be $1000. The weight is the part in the javascript that says "SetWt (250);" and the price is the part that says "SetPrice (31.50);". I'd really appreciate some help thanks.

An example of how I see this looking but this doesn't work obviously is like this:

<option value="250" SetWt (250); SetPrice (31.50);>250 grams</option>
<option value="500" SetWt (500); SetPrice (50);>500 grams</option>
<option value="20000" SetWt (20000); SetPrice (1000);>20 kg </option>

Please include all of the form in your code.

Here is the code as it is now:

<FORM onsubmit=" SetDesc ('Product1');
                                    SetCode ('001');
                                    SetPcat (1);
                                    SetWt (250);
                                    SetPrice (31.50);
                                    if (ReadForm (this));
                                    CallView ();
                                    ClearAll ();
                                    return false;"
            action="javascript: void (0);" method=post>
<select name="os1">
              <option value="250">250 grams</option>
              <option value="500">500 grams</option>
              <option value="20000">20 kg </option>
</select>
<br><br>
Quantity :
<input name="quantity" type="text" class="inputarea" id="quantity" value="1" size="3" maxlength="5">
<br>
<br>
<input name="submit" type="image" id="submit" src="graphics/addtobag.gif" alt="add to bag" width="85" height="22" border="0">
</form>

lil_puffball

I'm not sure exactly where you want to store the price and weight, and I don't know what the other functions (like setCode, setDesc,setPcat, etc.) do, but here is an example:

<script>
var price=new Array();
price[250]="31.50";
price[500]="50";
price[20000]="1000";
function SetWt(){
alert("Weight is "+document.forms[0].os1.value);
return document.forms[0].os1.value;
}
function SetPrice(){
alert("Price is "+price[document.forms[0].os1.value]);
return price[document.forms[0].os1.value];
}
</script>

<FORM onsubmit="SetWt();SetPrice();return false;" action="javascript: void (0);" method=post>
<select name="os1">
<option value="250">250 grams</option>
<option value="500">500 grams</option>
<option value="20000">20 kg </option>
</select>
<br><br>
Quantity :
<input name="quantity" type="text" class="inputarea" id="quantity" value="1" size="3" maxlength="5">
<br>
<br>
<input name="submit" type="image" id="submit" src="graphics/addtobag.gif" alt="add to bag" width="85" height="22" border="0">
</form>

radicalcat

ASKER

hi lil puffball,

I think you are on the right track here but there is still a problem. I have uploaded the pages in a basic form for testing and I hope you can have a look and see what I'm trying to do.

the original page without the drop down menus is here (this works but doesn't give the options of the weights that I need to do): http://home.iprimus.com.au/glinted/indexoriginal.html

The new page that I have created from using your instructions is here ( beware that if you submit the form on this page it will probably crash your browser - don't worry it was doing this as well when I tried code earlier before posting the thread) :

http://home.iprimus.com.au/glinted/indextest.html

look forward to hearing back and thanks very much...

rAd

william_jwd

try this,

<script language="javascript">
function setWeightAndPrice(obj) {
values = obj.options[obj.selectedIndex].value.split(';');
SetWt(values[0]);
SetPrice(values[1]);
}
</script>
<FORM onsubmit=" SetDesc ('Product1');
SetCode ('001');
SetPcat (1);
SetWt (250);
SetPrice (31.50);
if (ReadForm (this));
CallView ();
ClearAll ();
return false;"
action="javascript: void (0);" method=post>

<select name="os1" onChange="setWeightAndPrice(this)">
<option value="250;31.50">250 grams</option>
<option value="500;50">500 grams</option>
<option value="20000;1000">20 kg </option>
</select>
<br><br>
Quantity :
<input name="quantity" type="text" class="inputarea" id="quantity" value="1" size="3" maxlength="5">
<br>
<br>
<input name="submit" type="image" id="submit" src="graphics/addtobag.gif" alt="add to bag" width="85" height="22" border="0">
</form>

radicalcat

ASKER

hi william_jwd,

This only adds the weight & Price change to the description (you will see this if you go to the link below and submit the form selecting from the fist product which I applied your script to - submit like you are going to purchase with each product weight) http://home.iprimus.com.au/glinted/indextest2.html

thanks anyway.

william_jwd

I dont understand what you exactly require...
Do you want the description and other fields to be changed.... You can just include them as it is done for weight & price,

<script language="javascript">
function setDetails() {
values = document.forms[0].os1.value;
SetCode (values[0]);
SetDesc (values[1]);
SetPcat (values[2]);
SetWt(values[3]);
SetPrice(values[4]);
}
</script>
<FORM onsubmit=" setDetails();
if (ReadForm (this));
CallView ();
ClearAll ();
return false;"
action="javascript: void (0);" method=post>

<select name="os1">
<option value="001;Product1;1;250;31.50">250 grams</option>
<option value="002;Product2;2;500;50">500 grams</option>
<option value="003;Product3;3;20000;1000">20 kg </option>
</select>
<br><br>
Quantity :
<input name="quantity" type="text" class="inputarea" id="quantity" value="1" size="3" maxlength="5">
<br>
<br>
<input name="submit" type="image" id="submit" src="graphics/addtobag.gif" alt="add to bag" width="85" height="22" border="0">
</form>

radicalcat

ASKER

hi william,

this looks to be close to what is needed but when I submit it won't work on the popup window?

You can see the page with your code on the left product. lil_puffball also gave me a script but this did the same thing

http://home.iprimus.com.au/glinted/indextest3.html

Original without the Drop down menus (you will be able to see the popup window working though)
http://home.iprimus.com.au/glinted/indexoriginal.html

william_jwd

For me, both the links are giving problems opening the popup window. It was working before. I think that you have done some changes in the js files after your previous post. Please check those changes...

radicalcat

ASKER

william, no I haven't changed any other files i only uploaded the new page, the original still works: http://home.iprimus.com.au/glinted/indexoriginal.html

Try refreshing browser etc - i just checked & its showing the pop-up window,

regards rAd

radicalcat

ASKER

Ive updated the price to 500 since this doesn't seem to be that simple, I need to get it right in the pop up window as well (carry price & weight over)

thanks rAd

william_jwd

try this,

<script language="javascript">
function setDetails() {
values = document.forms[0].os1.value;
SetCode (values[0]);
SetDesc (values[1]);
SetPcat (values[2]);
SetWt(values[3]);
SetPrice(values[4]);
}
</script>
<FORM onsubmit=" SetDesc ('Product1');
SetCode ('001');
SetPcat (1);
SetWt (250);
SetPrice (31.50);
if (ReadForm (this));
CallView ();
ClearAll ();
return false;"
action="javascript: void (0);" method=post>

<select name="os1" onChange="setDetails();">
<option value="001;Product1;1;250;31.50">250 grams</option>
<option value="002;Product2;2;500;50">500 grams</option>
<option value="003;Product3;3;20000;1000">20 kg </option>
</select>
<br><br>
Quantity :
<input name="quantity" type="text" class="inputarea" id="quantity" value="1" size="3" maxlength="5">
<br>
<br>
<input name="submit" type="image" id="submit" src="graphics/addtobag.gif" alt="add to bag" width="85" height="22" border="0">
</form>

radicalcat

ASKER

hi william,

This doesn't carry the weight & price over but only in the description. http://home.iprimus.com.au/glinted/indextest4.html

lil_puffball

How about this?

<script>
var price=new Array();
price[250]="31.50";
price[500]="50";
price[20000]="1000";
</script>

<FORM onsubmit=" SetDesc ('Product1');
SetCode ('001');
SetPcat (1);
SetWt (document.forms[0].os1.value);
SetPrice (price[document.forms[0].os1.value]);
if (ReadForm (this));
CallView ();
ClearAll ();
return false;"
action="javascript: void (0);" method=post>

<select name="os1" onChange="setDetails();">
<option value="001;Product1;1;250;31.50">250 grams</option>
<option value="002;Product2;2;500;50">500 grams</option>
<option value="003;Product3;3;20000;1000">20 kg </option>
</select>
<br><br>
Quantity :
<input name="quantity" type="text" class="inputarea" id="quantity" value="1" size="3" maxlength="5">
<br>
<br>
<input name="submit" type="image" id="submit" src="graphics/addtobag.gif" alt="add to bag" width="85" height="22" border="0">
</form>
Quantity :
<input name="quantity" type="text" class="inputarea" id="quantity" value="1" size="3" maxlength="5">
<br>
<br>
<input name="submit" type="image" id="submit" src="graphics/addtobag.gif" alt="add to bag" width="85" height="22" border="0">
</form>

radicalcat

ASKER

hi lil puffball,

thanks for having another go and looking at the code it looks great but it still has a problem with the pop-up unfortunatly.

here is the page I placed your code in: http://home.iprimus.com.au/glinted/indextest5.html

I also thought it may be easy for you if you can download the other pages as well so I zipped them up here which includes all functional fills, the original (non-drop-down menu) file, williams file and your one: http://home.iprimus.com.au/glinted/basic_cart.zip

regards rAd

lil_puffball

Thanks for putting it in a zip, the problem is that the option values have changed from

<option value="250">250 grams</option>
<option value="500">500 grams</option>
<option value="20000">20 kg </option>

to

<option value="001;Product1;1;250;31.50">250 grams</option>
<option value="002;Product2;2;500;50">500 grams</option>
<option value="003;Product3;3;20000;1000">20 kg </option>

If you use the first set of values it should work. :)

If you must use the second set, use this code instead:

<FORM onsubmit=" SetDesc ('Product1');
SetCode ('001');
SetPcat (1);
SetWt (document.forms[0].os1.value.split(';')[3]);
SetPrice (price[document.forms[0].os1.value.split(';')[3]]);
if (ReadForm (this));
CallView ();
ClearAll ();
return false;"
action="javascript: void (0);" method=post>

ASKER CERTIFIED SOLUTION

lil_puffball

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

radicalcat

ASKER

Thanks lil puffball this seems to work now and I have awarded you the points although I would like to say very big thanks to william as well.

lil puffball,

I do want to have more products on one page and if you do have a chance you may also be able to tell me how I can fix that. I will probably be able to work it out eventually but I thought with your expertise then it may only take you a few minutes rather than most likely hours if i do it but I'm trying to work it out as i write. here is the page with two products using your code on them : http://home.iprimus.com.au/glinted/indextest7.html

regards rAd

lil_puffball

Thanks for the points and the A. :)

I think all you need to do to fix this is change the first line of the form code to this:

<FORM onsubmit=" var val=this.os1.value.split(';');

radicalcat

ASKER

lil puffball,

thats done it, thanks - you have made my day :)

cheers rAd