Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Split fields - Three? in a form

Posted on 2006-06-28
12
Medium Priority
?
317 Views
Last Modified: 2008-03-06
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;">
<!--webbot bot="Validation" b-value-required="TRUE"
b-disallow-first-item="TRUE" -->
<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
0
Comment
Question by:matt_swinburne
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 15

Expert Comment

by:bpmurray
ID: 17002529
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)));
}
0
 

Author Comment

by:matt_swinburne
ID: 17007780
Add the seperate widths and seperate heights..

Cheers..
0
 
LVL 15

Expert Comment

by:bpmurray
ID: 17008297
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>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:matt_swinburne
ID: 17017021
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
0
 

Author Comment

by:matt_swinburne
ID: 17017035
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
0
 

Author Comment

by:matt_swinburne
ID: 17058971
Does anyone know the fix for this problem.....

cheers ;)
0
 
LVL 15

Expert Comment

by:bpmurray
ID: 17061536
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>

0
 

Author Comment

by:matt_swinburne
ID: 17079532
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..
0
 

Author Comment

by:matt_swinburne
ID: 17082436
So is it possible to carry out this task without having to use Javascript?.... Cheers
0
 
LVL 15

Expert Comment

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

Author Comment

by:matt_swinburne
ID: 17088617
So do you know how to do it in Java Script with the data appearing in different fields? cheers
0
 
LVL 15

Accepted Solution

by:
bpmurray earned 2000 total points
ID: 17089522
If you're generating the HTML file, you have two choices if you want to go this route. It's easiest to simply print out a JavaScript array, and refer to that in the calculation javascript. I've got that below. If you want to use hidden fields, it requires a little more work, and it doesn't achieve anything more. In fact, it makes the markup size bigger and slows it down. Anyway, here's the changed file:


<html><head>
<script type="text/javascript"">
function calc() {
   var elem1 = document.getElementById("list1");
   for (var iX=0; iX<elem1.options.length; iX++) {
       if (elem1.options[iX].value == elem1.value)
         break;
   }
   var w1 = parseFloat(PrintSize[iX].substring(0,PrintSize[iX].indexOf("x")));
   var h1 = parseFloat(PrintSize[iX].substr(PrintSize[iX].indexOf("x")+1));
   var elem2 = document.getElementById("list2");
   for (var iX=0; iX<elem2.options.length; iX++) {
       if (elem2.options[iX].value == elem2.value)
         break;
   }
   var w2 = parseFloat(MountSize[iX].substring(0,MountSize[iX].indexOf("x")));
   var h2 = parseFloat(MountSize[iX].substr(MountSize[iX].indexOf("x")+1));

   alert("Width=" + (w1+w2) + "; Height=" + (h1 + h2));
}
</script>
</head><body>
   DROP DOWN LIST 1
   <select name="Size_Print" id="list1" class="style21" style="width:315px;">
   <!--webbot bot="Validation" b-value-required="TRUE" b-disallow-first-item="TRUE" -->
      <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
   <select name="Size_Mount" id="list2" class="style21" style="width:315px;">
   <!--webbot bot="Validation" b-value-required="TRUE" b-disallow-first-item="TRUE" -->
      <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>

   <!-- DATA IN EXTRA JAVASCRIPT FIELDS -->
   <script type="text/javascript">
         var PrintSize = new Array( "0x0", "300x93", "600x186", "1200x372" );
         var MountSize = new Array( "0x0", "30x10", "40x20", "50x30" );
   </script>


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

</body></html>

0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question