...

View Full Version : javascript challenged



dellis777
07-05-2004, 01:09 AM
Hi All,

Have a challenge in a set of code the I am in dev with now. I am attempting to develope a javascript for price calculation in shopping cart but having a major brain f*rt.

I am tying to take a combination of 3 radio groups and a series of check boxes that makes up the 4th group and onclick or onchange etc, to calculate the form and write to a text box. Easy huh. well here is the kicker. the radio and check box groups are populated with data from a database and the value structure is 'text_text_number' on 3 and 'text_number' on the other.

I need to be able to catch, split and calulate this and then post to the text box for the post.

I know I can take the var and split it but having fog on the structure.

Any clue, Boy do I need one.
THanks
dellis777

glenngv
07-05-2004, 03:36 AM
You need to post the related html codes.

dellis777
07-05-2004, 04:37 AM
thanks guess that would help. here is a psuedo code that will represent what I am trying to do. The real code is php dynamic and is a bit long.

<html>
<head>
<title>test calc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form name="form1" method="post" action="">
<p>
<label>Group 1<br>
<input type="radio" name="group1" value="test_test_1">
<!-- need to get the number only onclick or in the function -->
test1
<br>
<input type="radio" name="group1" value="test_test_2">
test2</label>
</p>
<p>
<label>Group 2<br>
<input type="radio" name="group2" value="test_test_3">
test3<br>
<input type="radio" name="group2" value="test_test_4">
test4</label>
</p>

<p>
<label>Group 3<br>
<input type="radio" name="group2" value="test_test_5">
test5<br>
<input type="radio" name="group2" value="test_test_6">
test6</label>
</p>
<p>Group 4<br>
<input name="group4" type="checkbox" id="group4" value="test_7">
</p>
<p>
<input type="text" name="textfield">
Data calculates here</p>
<p>
<input type="submit" name="Submit" value="Submit">
<br>
</p>
</form>
</body>
</html>

glenngv
07-05-2004, 05:35 AM
What do you want to do? Extract and add the numbers in the value attribute of the selected radio buttons and checkbox and then put the sum in the textfield?

dellis777
07-05-2004, 06:16 AM
that sums it up. Being that with is served up from the server the groups will appear for different product.

Garadon
07-05-2004, 07:45 AM
this line just gets the number, on a string.

number=string.split("_")[string.split("_").length-1];

glenngv
07-05-2004, 09:13 AM
this line just gets the number, on a string.

number=string.split("_")[string.split("_").length-1];
For efficiency, you need to split only once. And you need to convert it to number in order to use it for mathematical operation.

var arr = string.split("_");
var num = parseInt(arr[arr.length-1], 10);
alert(num);

dellis777
07-05-2004, 05:58 PM
This what I was starting with as far as the script;

var obj = document.form1;
var ffield = group1;
for (i=0;i<obj.ffield.length;i++) {
if (obj.ffield[i].checked) {
fabs = obj.ffield[i].value.split("_");
return fabs[2];
}
}

or at least this was the 1st attempt. but was having issues with it as I would have to do once of these for every group. so where would I add the code idea that was posted and then after the parse the calculation for the text box.

dellis777
07-06-2004, 01:49 AM
Ok once I got out of the pattern I was working in I applied this version and was able to get the number from the string. Now the issue is to calculate the number and drop it in the box.

base html


<html>
<head>
<title>test calc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">

function doStuff(s){
var arr = s.split("_");
var num = parseInt(arr[arr.length-1], 10);
return num;
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>
<label>Group 1<br>
<input type="radio" name="group1a" id="group1a" value="test_test_1" onClick="doStuff('test_test_1');">
<!-- need to get the number only onclick or in the function -->
test1
<br>
<input type="radio" name="group1a" id="group1a" value="test_test_2" onClick="doStuff('test_test_2');">
test2</label>
</p>
<p>
<label>Group 2<br>
<input type="radio" name="group2" value="test_test_3" onClick="doStuff('test_test_3');">
test3<br>
<input type="radio" name="group2" value="test_test_4" onClick="doStuff('test_test_4');">
test4</label>
</p>
<p>
<label>Group 3<br>
<input type="radio" name="group2" value="test_test_5" onClick="doStuff('test_test_5');">
test5<br>
<input type="radio" name="group2" value="test_test_6" onClick="doStuff('test_test_6');">
test6</label>
</p>
<p>Group 4<br>
<input name="group4" type="checkbox" id="group4" value="test_7" onClick="doStuff('test_7');">
</p>
<p>
<input type="text" name="textfield">
Data calculates here</p>
<p>
<input type="submit" name="Submit" value="Submit">
<br>
</p>
</form>
</body>
</html>

SpiritualStorms
07-06-2004, 02:11 AM
What is the goal of that script? I copied it just to see what it would do, and it doesnt seem to do anything.

Willy Duitt
07-06-2004, 02:48 AM
Well it all does seem alittle goofy, but that is what happens when working with psuedo code. We do not have the Big Picture. :)

Anyways, get rid of all the onclick events you are using. Unless of course there is a compelling reason to use them to calculate on the fly, in which case add the calculate function call to each radio button and checkbox as you desire. [onclick="calculate(this.form)"].

Elsewise, remove all that and replace with this.
Adding the onsubmit handler highlighted in red.



<script type="text/javascript">
function calculate(form){
var total = '';
for(var i=0; i<form.elements.length; i++){
if(form.elements[i].type.match(/radio|checkbox/i) && form.elements[i].checked){
total = (total*1+form.elements[i].value.match(/\d+/)*1);
}
} form.textfield.value = total;
}
</script>
</head>

<body>
<form name="form1" method="post" action="" onsubmit="calculate(this)">


.....Willy

dellis777
07-06-2004, 04:41 AM
this is for a shopping cart that must change the text field on click and change the figure as each the fields change. and has to be seen when changed.

glenngv
07-06-2004, 04:50 AM
The code that Willy posted can still be used for that.


Anyways, get rid of all the onclick events you are using. Unless of course there is a compelling reason to use them to calculate on the fly, in which case add the calculate function call to each radio button and checkbox as you desire. [onclick="calculate(this.form)"].

Willy Duitt
07-06-2004, 06:11 AM
this is for a shopping cart that must change the text field on click and change the figure as each the fields change. and has to be seen when changed.

Well gheesh;

We are not mind readers. perhaps, next time you post you will actually give us something to work with. Regardless, as I said, if you have a compelling reason you could add the onclick event handler to each radio button/checkbox. Myself, I'm too lazy for all that and besides, if these fields are generated serverside, why bother trying to add more code than necassary.

As a parting gift, below you will find a function where I added a few more lines of code and once placed in the head will automagically calculate your radio buttons and checkboxes. All without an event handler. :eek:


<script type="text/javascript">
<!--//
function calculate(){
var form = document.forms['form1'], total = 0;
for(i=0; i<form.elements.length; i++){
var input = form.elements[i];
if(input.type.match(/radio|checkbox/i) && input.checked){
total = (total+input.value.match(/\d+/)*1);
} input.onclick = new Function("calculate()");
} form.textfield.value = total;
} window.onload = calculate;
//-->
</script>


......Willy

BTW: I'm attaching a working text file using the psuedo codes you previously posted so that you don't get lost.

dellis777
07-06-2004, 06:18 AM
Thats ok my crystal ball is broke too. The code works great except had a issue with an instance if the first two section of the value have a number in it it grabs that number instead of the last set in the array which is the price.
Also if there is a comma in the price it returns only the digit before the comma.

This is the actual project and the dev addy I thank you all the input so far.

http://foleyfurniture.com/dev/index.php?folzone=living&zonsub=chairs&dzid=10&zonid=3&dtlzpg=15

Willy Duitt
07-06-2004, 06:27 AM
Thats ok my crystal ball is broke too. The code works great except had a issue with an instance if the first two section of the value have a number in it it grabs that number instead of the last set in the array which is the price.
Also if there is a comma in the price it returns only the digit before the comma.

There you go;

That's the problem with presenting psuedo code.
Your example did not demonstrate additional numerics which you did not want included. I can only advise that you will need to rewrite the regular expression to account for this.....

Good Luck;
.....Willy

dellis777
07-06-2004, 07:00 AM
In the beginning I thought I had communicated that the value was in the following "text_text_num" and I did not specify that the first 2 sections could include a number. my appologies for that. I orginally was looking just to split out the value and return the last part of the array and then calculate that.

Guess I have been looking at this stuff for 2 long.

Again thanks for the help. the reg expression in out of what I have worked with before so I will have to stumble through the rest if time warrants. deadline approaches.

worst case on the value would be "G10_HSN1_1,222".

Willy Duitt
07-06-2004, 07:14 AM
worst case on the value would be "G10_HSN1_1,222".

Which value are you looking for?
The 222? Or the last 1?
And will that comma always be present?

dellis777
07-06-2004, 07:18 AM
i changed the php code up so that the end number has no comma so what I am trying to get is the full end number only 1222 but in real application it can be a 2, 3 or 4 digit number. Thanks again.

dellis777
07-06-2004, 08:16 AM
Thank glenn and Willy. took the code set that each of you provided and combined them and it works as needed.

The final code is.

function calculate(form){
var total = '';
for(var i=0; i<form.elements.length; i++){
if(form.elements[i].type.match(/radio|checkbox/i) && form.elements[i].checked){
var arr = form.elements[i].value.split("_");
var num = parseInt(arr[arr.length-1], 10);
total = (total*1+num*1);
}
} form.foltotal_prc.value = total;
}

guess I needed more coffee :thumbsup: will add the other stuff later. Thanks again for your help and patience with a weary codedawg.

Willy Duitt
07-06-2004, 08:42 AM
Well, I guess you wanted both the 1 and the 222 on either side of the comma....

But you certainly can not calculate numbers which include commas because they would then be strings....

And no offense, but that code is ugly.
Try swaping this total line with the current one in the script I posted and it will calculate the numerics after the last _ and all without needing to add onclick events to each radio button/checkbox....

total = (total+input.value.replace(/^(\w+)_(\d+)/,'$2')*1);

......Willy

Edit: Or better yet, to quickly format to two decimal places (javascript 1.5 browsers only)

total = (total*1+input.value.replace(/^(\w+)_(\d+)/,'$2')*1).toFixed(2);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum