1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:15 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

split value

         

tigerfrog

5:11 pm on Oct 31, 2011 (gmt 0)

10+ Year Member



Repost, but with much clearer, cut down code!

I've currently got a group of dropdowns that update a total on my site. I want to add an 'add to cart' button too but this requires each drop down having 2 values (one to update total and one to go towards the 'add to cart button'). I've researched this but still have no idea how to go about getting 2 values from one dropdown though.

What I've done is create an explanation page where I have one form for the running total, and then a completely seperate form for the add to cart. Both work independanly, but I want to effectively combine them. Here's the page:
[tigerfrog.co.uk ]

code for running total is:
Head
<script language="JavaScript" type="text/javascript"> 

function calc2(){ 
 var totalStr = '';       // for testing only 
 var totalValue=0; 
 var DDL; 
 var cnt = 0;              // for testing only 
 for (var j=1; j<=2; j++) { 
 DDL = document.getElementById('dropDownList'+j); 
 temp = DDL.options[DDL.selectedIndex].value; 
 totalValue += Number(temp); 
 if (DDL.selectedIndex != 0) { totalStr += '|'+temp; cnt++; } // cnt++ is for testing only 
 } 
 document.forms[0].total.value=totalValue; 
} 
</script>


Body
<form id="dropDownForm2" name="dropDownForm2">
<td class="style14">&nbsp;<select id="dropDownList1" class="style10" name="D10" onchange="calc2();">
<option selected="" value="10">item1</option>
<option value="20">item2</option>
<option value="30">item3</option>
</select> <br />
</td>
<td class="style14">&nbsp;<select id="dropDownList2" class="style10" name="D11" onchange="calc2();">
<option href="alloy.htm" selected="" value="11">item4</option>
<option value="12">item5</option>
<option value="13">item6</option>
</select><br />
total </td>
<input class="style10" name="total" onfocus="blur()" readonly="" size="4" style="width: 46px; height: 22px;" type="text" value="958" /></form>



The code for the add to cart is: 
<form action="http://www.romancart.com/cart.asp" method="post">
<input name="storeid" type="hidden" value="43579" />
<input name="itemcode" type="hidden" value="TF Series" />Frameset
<select name="itemname2">
<option value="TF100" value="TF100">item1</option>
<option value="TF300C" value="TF300">item2</option>
<option value="TF400C" value="TF400">item3</option>
</select><br />
Groupset <select name="itemname5">
<option value="SL T1" value1="SL T1">item4</option>
<option value="SLR T1" value1="SLR T1">item5</option>
</select><br />
<input type="submit" value="Add to basket" />
</form>


If I had 2 values from each drop down in the first group of dropdowns then I could get it working, but I'm not sure how to do this.

Any help will be great,

Phil

rocknbil

6:54 pm on Nov 1, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



no idea how to go about getting 2 values from one dropdown though.


I'm not really sure what you're doing here. :-) There is no "value1" attribute:

<option value="SL T1" value1="SL T1">item4</option>

... and only one value in the previous. There is also no href attribute for <option>. At any rate, your post title actually has the answer to get multiple values from one drop down: split. You'll have to figure some way to automate the output of the select lists to get both values. You'll also want to combine calc2() and any functions for ""add to cart". Play with this example to give you an idea . . . 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Split</title> 
<script type="text/javascript"> 
function checkForm(form) { 
 var msg=''; 
 ind = document.getElementById('dropDownList1').selectedIndex; 
 val = document.getElementById('dropDownList1').options[ind].value; 
 values = val.split(":"); 
 if (! values[0]) { values[0]='None Selected'; } 
 if (! values[1]) { values[1]='0.00'; } 
 document.getElementById('my-selected').innerHTML=values[0]; // itemcode 
 document.getElementById('my-totals').innerHTML=values[1]; // cost? 
 if (form) { 
 if (document.getElementById('dropDownList1').selectedIndex==0) { 
 msg += 'Please select an item to add to cart.'; 
} 
if (msg != '') { alert(msg); return false; } 
else { 
// uncomment for actual use 
// return true; 
// Remove for actual use 
alert('Would submit OK here'); 
return false; 
} 
 } 
} 
</script> 
</head> 
<body> 
<form action="" onsubmit="return checkForm(this);"> 
<p><select id="dropDownList1" class="style10" name="D10" onchange="checkForm();"> 
<option value="">select</option> 
<option value="TF100:10">item1</option> 
<option value="TF200:20">item2</option> 
<option value="TF100:30">item3</option> 
</select> 
</p> 
<p><strong>Selected:</strong> <span id="my-selected">None Selected</span>  
<strong>Total:</strong> $<span id="my-totals">0.00</span></p> 
<p><input type="submit" value="Add Me"></p> 
</form> 
</body> 
</html>

tigerfrog

7:06 pm on Nov 1, 2011 (gmt 0)

10+ Year Member



Rocknbil,

this is really helpful. I'm massively out of my depth and the example code looks like it's going to do everything I want it to do. I'll have a play now.

Thanks again

tigerfrog

8:05 pm on Nov 1, 2011 (gmt 0)

10+ Year Member 



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Split</title> 
<script type="text/javascript"> 
function checkForm(form) { 
 var msg=''; 
 ind = document.getElementById('dropDownList1').selectedIndex; 
 val = document.getElementById('dropDownList1').options[ind].value; 
 values = val.split(":"); 
 if (! values[0]) { values[0]='None Selected'; } 
 if (! values[1]) { values[1]='0.00'; } 
 document.getElementById('my-selected').innerHTML=values[0]; // itemcode 
 document.getElementById('my-totals').innerHTML=values[1]; // cost? 
 if (form) { 
 if (document.getElementById('dropDownList1').selectedIndex==0) { 
 msg += 'Please select an item to add to cart.'; 
} 
if (msg != '') { alert(msg); return false; } 
else { 
// uncomment for actual use 
// return true; 
// Remove for actual use 
alert('Would submit OK here'); 
return false; 
} 
 } 
} 
</script> 
</head> 
<body> 
<form action="http://www.romancart.com/cart.asp" method="post" >
<input name="storeid" type="hidden" value="43579" />
<input name="itemcode" type="hidden" value="TF Series" />Frameset
<select id="dropDownList1" class="style10" name="itemname2" onchange="checkForm();"> 
<option value="">select</option> 
<option value="TF100:10">item1</option> 
<option value="TF200:20">item2</option> 
<option value="TF100:30">item3</option> 
</select> 
 
<p><strong>Selected:</strong> <span id="my-selected">None Selected</span> 
<strong>Total:</strong> $<span id="my-totals">0.00</span></p> 
<p><input type="submit" value="Add to basket" /></p> 
</form> 
</body> 
</html>


This has come together nicely and does everything, expect on add to cart, it submits both values together, ie TF100:10. I'd only want it to submit the first part, the TF100. I guess this is what you meant by combining calc2() and any functions for "add to cart".

I'm massively out of my depth here, so any tips on how to ensure only the first value goes to the cart will be fantastic. Hopefully it's easy

Thanks

Phil

rocknbil

5:07 pm on Nov 2, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I guess this is what you meant by combining calc2() and any functions for "add to cart".


No - that's this bit. I've changed it to "what you would do if it's live": 


if (form) { 
 if (document.getElementById('dropDownList1').selectedIndex==0) { 
 msg += 'Please select an item to add to cart.'; 
 } 
 if (msg != '') { alert(msg); return false; } 
 else { return true; } 
}


... but you need to re-add this:
method="post" onsubmit="return checkForm(this);">

Basically when the function is called via onchange of the select,

onchange="checkForm();">

there's no reference to the form passed to checkForm() so it won't attempt submit. When the form is submitted,

method="post" onsubmit="return checkForm(this);">

it passes a reference to the form so the variable form exists, the if can validate any fields you need and return true if no errors are found, submitting the form.

The solution should be very simple - **if** you have access to cart.asp, and you should really handle it there instead of in Javascript. You just duplicate the same behavior. 


<% 
if Request.Form("dropDownList1") Then 
 selectArray = Split(Request.Form("dropDownList1"), ":") 
 itemcode=selectArray(0) 
 price=selectArray(1)  
End if 
%>


If you must do it in Javascript, which will make it Javascript dependent and fail if JS is disabled, which makes it a Very Bad Idea, you'd have to figure out some way to create two new variables and append them to the form on submit.

This is untested (and did I say, it is a Very Bad Idea?) but something like this could work . . . 


if (form) { 
 if (document.getElementById('dropDownList1').selectedIndex==0) { 
 msg += 'Please select an item to add to cart.'; 
 } 
 if (msg != '') { alert(msg); return false; } 
 else {  
 // Let's just use "dropdown1" as the selected code value by changing the value of the option . . .  
 document.getElementById('dropDownList1').options[ind].value=values[0]; 
 // create a hidden field for the price 
 var newfield = document.createElement('div'); 
 newdiv.innerHTML = '<input type="hidden" name="product-1-price" value="' . values[1] . '">'; 
 // We already have a reference to the form in the variable "form" 
 // no need to use document.getElementById again (doesn't have an id anyway) 
 form.appendChild(newdiv); 
 return true;  
 } 
}


It's kinda convoluted . . . but it could work. I'd do option 1, more stable and not JS dependent.

tigerfrog

6:38 pm on Nov 2, 2011 (gmt 0)

10+ Year Member



You're a star - thanks very much. I'll get this all working now.

Thanks again,

Phil
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:15 pm May 13, 2026