homepage Welcome to WebmasterWorld Guest from 54.237.235.12
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
split value
tigerfrog



 
Msg#: 4381701 posted 5:11 pm on Oct 31, 2011 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4381701 posted 6:54 pm on Nov 1, 2011 (gmt 0)

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



 
Msg#: 4381701 posted 7:06 pm on Nov 1, 2011 (gmt 0)

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



 
Msg#: 4381701 posted 8:05 pm on Nov 1, 2011 (gmt 0)

<!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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4381701 posted 5:07 pm on Nov 2, 2011 (gmt 0)

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



 
Msg#: 4381701 posted 6:38 pm on Nov 2, 2011 (gmt 0)

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

Thanks again,

Phil

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved