asked on

Split fields - Three? in a form

I have a form which allows the user to select what size mount they require from a form along with what size photo they want from another drop down menu in the same form. How do i add these two seperate values together when there is already two other values in the same field that are split?

would i edit the form like so: <option value="mount.gif|44.00|W40 X H20"class="style26">Width of Mount: W 40m x H 20m</option>

Or is thete a better way to add the values together:

DROP DOWN LIST 1
<select name="Size_Print" class="style21" style="width:315px;">

<option value="0" selected>Select Size of Print Required:</option>
<option value="20.00" class="style26">Size of Print: W 300m x H 93m</option>
<option value="60.00" class="style26">Size of Print: W 600m x H 186m</option>
<option value="100.00" class="style26">Size of Print: W 1200m x H 372m</option>
</select>

DROP DOWN LIST 2
<option value="mount.gif|0" selected>Select Width of Mount (see image):</option>
<option value="mount.gif|0.00"class="style26">Width of Mount: N/A</option>
<option value="mount2.gif|34.00"class="style26">Width of Mount: W 30m x H 10m</option>
<option value="mount.gif|44.00"class="style26">Width of Mount: W 40m x H 20m</option>
<option value="mount3.gif|56.00"class="style26">Width of Mount: W 50m x H 30m</option>
</select></td>

The 2 seperate values chosen in drop down list 1 need to be added together with the two seperate values chosen in drop down list 2...
For example W30 + W300 & H20 + H93

Cheers... I hope it's clear enough

bpmurray

Not sure what you want here - when you say "add" do you mean to concatenate the values or to add the widths & heights? This might give you an idea:

function calc() {
var elem1 = document.getElementById("list1");
var val1 = elem1.value;
var elem2 = document.getElementById("list2");
var val2 = elem1.value;
var val2a = val2.substr(val2.indexOf("|")+1);

alert(val1 + "+" + val2a + "=" + (parseFloat(val1) + parseFloat(val2a)));
}

matt_swinburne

ASKER

Add the seperate widths and seperate heights..

Cheers..

bpmurray

You need to provide that information in the lists. For example, you have "0", "20", "60" and "100" - they don't tell the width and height. Something like this should work OK:

<html><head>
<script type="text/javascript"">
function calc() {
var elem1 = document.getElementById("list1");
var val1 = elem1.value;
var w1 = parseFloat(val1.substring(0,val1.indexOf("|")));
var h1 = parseFloat(val1.substr(val1.indexOf("|")+1));
var elem2 = document.getElementById("list2");
var val2 = elem2.value.substr(elem2.value.indexOf("|")+1);
var w2 = parseFloat(val2.substring(0,val2.indexOf("|")));
var h2 = parseFloat(val2.substr(val2.indexOf("|")+1));

alert("Width=" + (w1+w2) + "; Height=" + (h1 + h2));
}
</script>
</head><body>
DROP DOWN LIST 1
<select id="list1" name="Size_Print" class="style21" style="width:315px;">
<option value="0" selected>Select Size of Print Required:</option>
<option value="300|93" class="style26">Size of Print: W 300m x H 93m</option>
<option value="600|186" class="style26">Size of Print: W 600m x H 186m</option>
<option value="1200|373" class="style26">Size of Print: W 1200m x H 372m</option>
</select>

DROP DOWN LIST 2
<select id="list2" name="Size_Mount" class="style21" style="width:315px;">
<option value="mount.gif|0" selected>Select Width of Mount (see image):</option>
<option value="mount.gif|0.00"class="style26">Width of Mount: N/A</option>
<option value="mount2.gif|30|10"class="style26">Width of Mount: W 30m x H 10m</option>
<option value="mount.gif|40|20"class="style26">Width of Mount: W 40m x H 20m</option>
<option value="mount3.gif|50|30"class="style26">Width of Mount: W 50m x H 30m</option>
</select>

<input type="button" onclick="calc();" value="Calc" />

</body></html>

matt_swinburne

ASKER

I need to keep the "0", "20", "60" and "100" values tho as they provide data for calculations that need to be carried out.. can you not split the fileds into three seperate values?

Cheers bpmurry

matt_swinburne

ASKER

additionally i need the values (width & height) to be sent into a text field on a form instead of a pop up window.... many thanks

matt_swinburne

ASKER

Does anyone know the fix for this problem.....

cheers ;)

bpmurray

You can put any values you like, and then split them. The general way to do it is similar to the script above, so I've added the original values back in - they're the first values in the list. If you want to get hold of this value, you can do it as shown for the "extraValue" field below:

<html><head>
<script type="text/javascript"">
function calc() {
var elem1 = document.getElementById("list1");
var extraValue = elem1.value.substr(0,elem1.value.indexOf("|"));
var val1 = elem1.value.substr(elem1.value.indexOf("|")+1);
var w1 = parseFloat(val1.substring(0,val1.indexOf("|")));
var h1 = parseFloat(val1.substr(val1.indexOf("|")+1));
var elem2 = document.getElementById("list2");
var val2 = elem2.value.substr(elem2.value.indexOf("|")+1);
var w2 = parseFloat(val2.substring(0,val2.indexOf("|")));
var h2 = parseFloat(val2.substr(val2.indexOf("|")+1));

alert("Width=" + (w1+w2) + "; Height=" + (h1 + h2));
}
</script>
</head><body>
DROP DOWN LIST 1
<select id="list1" name="Size_Print" class="style21" style="width:315px;">
<option value="0|0|0" selected>Select Size of Print Required:</option>
<option value="20.0|300|93" class="style26">Size of Print: W 300m x H 93m</option>
<option value="60.0|186" class="style26">Size of Print: W 600m x H 186m</option>
<option value="100.0|373" class="style26">Size of Print: W 1200m x H 372m</option>
</select>

DROP DOWN LIST 2
<select id="list2" name="Size_Mount" class="style21" style="width:315px;">
<option value="mount.gif|0" selected>Select Width of Mount (see image):</option>
<option value="mount.gif|0.00"class="style26">Width of Mount: N/A</option>
<option value="mount2.gif|30|10"class="style26">Width of Mount: W 30m x H 10m</option>
<option value="mount.gif|40|20"class="style26">Width of Mount: W 40m x H 20m</option>
<option value="mount3.gif|50|30"class="style26">Width of Mount: W 50m x H 30m</option>
</select>

<input type="button" onclick="calc();" value="Calc" />

</body></html>

matt_swinburne

ASKER

I didn't really want to use Java script, i wanted to get the width & height values appear in a different text box.... cheers for your help anyways..

matt_swinburne

ASKER

So is it possible to carry out this task without having to use Javascript?.... Cheers

bpmurray

I don't think it is. Even if you have the data in different hidden fields, you'll still have to calculate using JavaScript.

matt_swinburne

ASKER

So do you know how to do it in Java Script with the data appearing in different fields? cheers

ASKER CERTIFIED SOLUTION

bpmurray

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial