Solved

Submitting Form Variables

Posted on 2004-03-21
18
629 Views
Last Modified: 2012-06-21

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>
0
Comment
Question by:radicalcat
  • 9
  • 5
  • 4
18 Comments
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10646535
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>
0
 

Author Comment

by:radicalcat
ID: 10646774
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
0
 
LVL 8

Expert Comment

by:william_jwd
ID: 10648090
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>
0
 

Author Comment

by:radicalcat
ID: 10648134
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.
0
 
LVL 8

Expert Comment

by:william_jwd
ID: 10648208
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>



0
 

Author Comment

by:radicalcat
ID: 10648429
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
0
 
LVL 8

Expert Comment

by:william_jwd
ID: 10648682
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...
0
 

Author Comment

by:radicalcat
ID: 10648824
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
0
 

Author Comment

by:radicalcat
ID: 10649510
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
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 8

Expert Comment

by:william_jwd
ID: 10649573
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>
0
 

Author Comment

by:radicalcat
ID: 10651997
hi william,

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

Expert Comment

by:lil_puffball
ID: 10653524
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>
0
 

Author Comment

by:radicalcat
ID: 10653685
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
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10654137
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>
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 10654150
After taking another look, I take it that you define the values that need to be set in the option value. If so, use this code instead, this will change the setCode, setDesc, and setPcat parametres as well:

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

Author Comment

by:radicalcat
ID: 10654398
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
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10654412
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(';');
0
 

Author Comment

by:radicalcat
ID: 10654512
lil puffball,

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

cheers rAd
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now