HTML/PHP/Javascript problem.

[gsf600y]

I've been scratching my head on this one, but my Javascript skills are rubbish, so I'm struggling on working out how to do this......
I've got a HTML form. A basic version is as follows:

<form>
 <select name=select1>
  <option selected>Please Choose</option>
  <option value=option1>Option 1 £100.00</option>
  <option value=option2>Option 2 £200.00</option>
  <option value=option3>Option 3 £300.00</option>
 </select>
 <select name=select2>
  <option selected>Please Choose</option>
  <option value=option1>Option 1 £100.00</option>
  <option value=option2>Option 2 £200.00</option>
  <option value=option3>Option 3 £300.00</option>
 </select>
</form>

Note, the actual form select options are populated using PHP code pulling data from a database. The data pulled is the "value=xxxxxx" and the actual "Option x £xxx.xx".

Basically, what I want to do is total up the sum of the options selected.
Example:
If someone selects Option 1 for select1, and Option 3 for select2, the total would show £400.00

I want the display to update dynamically, before the form is submitted, so I was thinking JavaScript is the answer.

I've trawled lots of websites and tried a couple of things, but I really am utterly stuck on how to do this, although I'm sure it's perfectly possible.

Someone help me!!

 

[GeForce]

I'm working on this, gimme a few minutes

 

[GeForce]

Working example here

Javascript for the page header:

<script language="javascript" type="text/javascript">
var val1=0;
var val2=0;

function setOp1(inval) {
val1=inval;
//if (val2==0) { document.Op_Form.endval.value=""; }
finalise();
}

function setOp2(inval) {
val2=inval;
//if (val1==0) { document.Op_Form.endval.value=""; }
finalise();
}

function finalise() {
if (val1!=0 && val2!=0) {
document.Op_Form.endval.value=parseInt(val1)+parseInt(val2);
} else {
document.Op_Form.endval.value="";
}
}
</script>

In the 4th line from the end of this bit, "parse" and "Int" should not have a space between them, it's just the way the forum displays it. It should be "parseInt(val2)"


The form, put wherever in the page body:

<form name="Op_Form">
 <select name=select1 onchange="javascript:setOp1(document.Op_Form.select1.options[document.Op_Form.select1.selectedIndex].value)">
  <option selected>Please Choose</option>
  <option value="100" name="option1">Option 1 £100.00</option>
  <option value="200" name="option2">Option 2 £200.00</option>
  <option value="300" name="option3">Option 3 £300.00</option>
 </select>
 <select name=select2 onchange="javascript:setOp2(document.Op_Form.select2.options[document.Op_Form.select2.selectedIndex].value)">
  <option selected>Please Choose</option>
  <option value="100" name="option1">Option 1 £100.00</option>
  <option value="200" name="option2">Option 2 £200.00</option>
  <option value="300" name="option3">Option 3 £300.00</option>
 </select><br><br>
<input type="text" name="endval" size=10>
</form>

Jon

 

[gsf600y]

That's superb!
Is there a way though to pull the number (eg.300) from the text in between the <option> </option tags?
I'm currently using value= to pass an item code over.
eg

<option value=000142 name=item1>Item 1, worth £152.44p</item>
<option value=000143 name=item2>Item 2, worth £474.83p</item>

Sorry to be fussy....I feel very ungrateful! Appreciate your help a lot

 

[GeForce]

Don't think that's possible.

I don't know how your database is structured, but would it be possible to put the item code, followed by a price in pence? Using a set separator, it can then be split apart with Javascript afterwards. Here's an example:

Item code: 488
Price: £43.67 (04367 in 5 digits pence)

Use PHP to concatenate the two into a string:

$itemcode=448;
$itemprice=04367;
$passval=$itemcode."_".$itemprice

So $passval now would be "448_04367". Then use

<option value="<? $passval ?>" name="option1">Option 1 £100.00</option>

If that's an option, let me know, and I can write out a JavaScript function to split the value sent to it into item code and item price and return them both as separate strings.

Jon

 

[meghatronic]

That's superb!
Is there a way though to pull the number (eg.300) from the text in between the <option> </option tags?
I'm currently using value= to pass an item code over.
eg

<option value=000142 name=item1>Item 1, worth £152.44p</item>
<option value=000143 name=item2>Item 2, worth £474.83p</item>

Sorry to be fussy....I feel very ungrateful! Appreciate your help a lot

Easy peasy in php.

If they're all of the format £xxx.xxp (which is actually innacurate as £ and p together is tautology).

Off the top of my head it'd be something like:

<?
$str = "Item 1, worth £152.44p";
echo substr($str, strpos($str, "£"));
?>

 

[gsf600y]

jdickerson - thanks mate. What I was meaning was to grab the value using Javascript, and use it for the total sum.

Geforce - okay, I've made that change so that "value" now looks like:

<option value=001_3.5>Item 001 worth £3.5m</option>
<option value=002_8.2>Item 002 worth £8.2m</option>

I'll need to alter the PHP that then processes those values to remove the _3.5 bit, but I can do that.

So, is it possible using the JavaScript to grab the _3.5 part, and use that number for doing the sums?

 

[meghatronic]

jdickerson - thanks mate. What I was meaning was to grab the value using Javascript, and use it for the total sum.

Geforce - okay, I've made that change so that "value" now looks like:

<option value=001_3.5>Item 001 worth £3.5m</option>
<option value=002_8.2>Item 002 worth £8.2m</option>

I'll need to alter the PHP that then processes those values to remove the _3.5 bit, but I can do that.

So, is it possible using the JavaScript to grab the _3.5 part, and use that number for doing the sums?

Ah sorry.

You can use php echos within javascript by the way.

e.g. <? echo substr($str, strpos($str, "_")); ?> within the js function.

 

[GeForce]

Try:

<script>
var curr_i_p; //global price
var curr_i_c; //global code
function strsplt(i_str) {
spr_arr=i_str.split("_");
curr_i_c=spr_arr[0];
curr_i_p=spr_arr[1];
var ret_str="Item code "+spr_arr[0]+" available at £"+spr_arr[1];
return ret_str;
}

document.writeln(strsplt('001_5.80')); //TEST LINE
</script>

The document.writeln bit at the bottom is a test, delete that line.

The two variables marked global price and global code are global but updated by the function, so they can be used after each function call for the maths operations in totalling prices. Their values are overwritten next time the function is called.

The function will return the results in a string, which is why calling the function inline in document.writeln works, but that doesn't have to be used.

To run the function, it's:

<script>
strsplt('<? $str ?>')
</script>

Where $str is your code_price string, eg. 004_16.40

After which:
curr_i_c will equal 004
curr_i_p will equal 16.40

Jon

 

[GeForce]

I didn't know this method existed until now, but here's another option for you:

<script>
var curr_price;
function runFunc(instr) {
var p_arr=instr.split("£");
var giv_pr=p_arr[1];
curr_price=giv_pr;
curr_price=curr_price*100;
alert("Extracted number (price): "+giv_pr); //DELETE THIS LINE
return giv_pr;
}
</script>

<form name="form1">
<select name="select1">
  <option value="004">Option 1 £150.60</option>
  <option value="005">Option 2 £279.99</option>
  <option value="006">Option 3 £550.55</option>
</select><br>
<input type="button" value="Run JS Function" 

onClick="javascript:runFunc(document.form1.select1.options[document.form1.select1.selectedIndex].text)

">
</form>

Basically this will take the text from between the option tags, ie. "Option 2 £200.00" and extract the number after the £ sign and return it. This leaves the <option>'s value tag free for handling only the item code.

It then updates the global variable "curr_price" to the price that has just been extracted. Then the value is multiplied by 100 to give the value in pence, which is easier to work in. If you want to display the total in £XX.XX rather than XXXXp (which you probably do) it can easily be converted back to pounds/pence later.

The one limitation with this as it stands is that the text between the <option> tags must have the price at the end:
"Option 2 £200.00" -- is fine
"£200.00 - Option 2" -- will NOT work

I've included the test form I wrote for this so you can play around with it, but to be quite honest I think this is the best and easiest option as it does not involve the whole "concatenate item code and price and then split them up afterwards" malarky.

Jon

 

[meghatronic]

The one limitation with this as it stands is that the text between the <option> tags must have the price at the end:
"Option 2 £200.00" -- is fine
"£200.00 - Option 2" -- will NOT work

Does Javascript not support reg exp? You could track the £x+.xx price down easily if so, irrelevant of where it is in the string.

 

[marc2003]

all this is crazy talk. if you're populating these drop down boxes with data from a database, use raw numbers and add formatting when you want to display the results on screen?

 

[GeForce]

Does Javascript not support reg exp? You could track the £x+.xx price down easily if so, irrelevant of where it is in the string.

Yep can do that if it's necessary. But if the OP doesn't mind putting the price at the end, the way I posted works fine.

It's also possible to extract the price just using JS string handling methods, but I'll bother to do that if it's really needed

Jon

 

[meghatronic]

all this is crazy talk. if you're populating these drop down boxes with data from a database, use raw numbers and add formatting when you want to display the results on screen?

It depends on the db strucutre... I've had to deal with some awfully configured sets.