asked on

Javascript VAR Syntax

I'm creating a Javascript var and I'm not sure I have all of the syntax correct. Can you please have a look at the following and let me know what additional info you need to answer my question or let me know how to better right the following

<script>
	var myBox5 = document.getElementById('addon-28-custom-price[type-of-bicycle]').value;
		<?php
			$type_bike1 = $pdo->prepare($bike1);
			$elseif="";
			try {
			$type_bike1->execute();
			$type1 = $type_bike1->fetchAll();
			
			foreach ($type1 as $bt1)	{
					$bike_type1 = $bt1->type;
					$pd1 = $bt1->physical_damage;
					$bl1 = $bt1->bicycle_liability;
					$med1 = $bt1->medical_payment;
					$mtr1 = $bt1->motor_vehicle_contact;

					$elseif.="else if (myBox5 == '" . $bike_type1 . "') { myBox5a =" . $pd1 . ", myBox5alia =" . $bl1 . ", myBox5aMed =" . $med1 . ", myBox5aMtr =" . $mtr1 . "}";

			}
			echo substr($elseif,4)?>
			else {
				myBox5a = 1, myBox5alia = 1, myBox5aMed = 1, myBox5aMtr = 1  
			}
		<?php
			
		}
		catch(PDOException $b) {
   			echo 'ERROR: ' . $b->getMessage();
		}	
	?>
</script>

Open in new window

Randy Poole

run the page and post the output

Robert Granlund

ASKER

@Randy, I think it looks good:

<script>
function findSum(){
var baseOne = document.getElementById('addon-28-custom-price[custom-price]').value;
var myBox1 = document.getElementById('addon-28-custom-price[my-deductible]').value;
var myBox2 = document.getElementById('addon-28-custom-price[bicycle-liability]').value;
var myBox2a = myBox2 != '' ? myBox2 : 0;
var myBox3 = document.getElementById('addon-28-custom-price[medical-payments]').value;
var myBox3a = myBox3 != '' ? myBox3 : 0;
var myBox4 = document.getElementById('addon-28-custom-price[vehicle-contact]').value;
var myBox4a = myBox4 != '' ? myBox4 : 0;
var myBox5 = document.getElementById('addon-28-custom-price[type-of-bicycle]').value;
if (myBox5 == 'BMX') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.10, myBox5aMtr =1.00}else if (myBox5 == 'Electric / Pedal Assist') { myBox5a =1.10, myBox5alia =1.10, myBox5aMed =1.10, myBox5aMtr =1.00}else if (myBox5 == 'Hybrid / Cruiser') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Mountain') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.10, myBox5aMtr =1.00}else if (myBox5 == 'Recumbent') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Road / Track') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Tandem') { myBox5a =1.00, myBox5alia =1.10, myBox5aMed =1.10, myBox5aMtr =1.10}else if (myBox5 == 'Tricycle') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Triathlon') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Fat Bike') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00} else {
myBox5a = 1, myBox5alia = 1, myBox5aMed = 1, myBox5aMtr = 1
}
var myBox6 = document.getElementById('addon-28-custom-price[type-of-material]').value;
if (myBox6 == 'Aluminum') { myBox6a =1.05 }else if (myBox6 == 'Carbon Fiber') { myBox6a =1.10 }else if (myBox6 == 'Steel') { myBox6a =1.00 }else if (myBox6 == 'Titanium') { myBox6a =1.05 }else if (myBox6 == 'Wood') { myBox6a =1.00 }else if (myBox6 == 'Other') { myBox6a =1.00 } else {
myBox6a =1
}
var myBox7 = document.getElementById('addon-28-custom-price[usage]').value;
if (myBox7 == 'Casual') { myBox7a =1.00 }else if (myBox7 == 'Fitness') { myBox7a =1.00 }else if (myBox7 == 'Commuter') { myBox7a =1.10 }else if (myBox7 == 'Competitive') { myBox7a =1.10 } else {
myBox7a =1
}
var myBox8 = document.getElementById('addon-28-custom-price[association-membership-1]').value;
var myBox9 = document.getElementById('addon-28-custom-price[association-membership-2]').value;
if(myBox8 == 'yes' || myBox9 == 'yes') { myBox10 = "0.90" }
else { myBox10 = "1" }
var result = document.getElementById('result');
var base = parseFloat(baseOne) * parseFloat(myBox1) * parseFloat(myBox5a) * parseFloat(myBox6a) * parseFloat(myBox7a);
var baseLiable= parseFloat(myBox2a) * parseFloat(myBox5a) * parseFloat(myBox6a) * parseFloat(myBox7a);
var baseMed= parseFloat(myBox3a) * parseFloat(myBox5a) * parseFloat(myBox6a) * parseFloat(myBox7a);
var baseContact= parseFloat(myBox4a) * parseFloat(myBox5a) * parseFloat(myBox6a) * parseFloat(myBox7a);
var myResultSub = parseFloat(base) + parseFloat(baseLiable) + parseFloat(baseMed) + parseFloat(baseContact);
var myResult = parseFloat(myResultSub) * parseFloat(myBox10);
result.innerHTML = myResult.toFixed(2);
}
</script>

Open in new window

Gary

What's the actual problem?

Randy Poole

looks ok, does it work as expected?

Ray Paseur

It looks like you've got JavaScript mixed up with PHP. JavaScript runs on the client machine. PHP runs on the server. By the time JavaScript starts running, the server is disconnected and PHP has "gone to sleep." You might be better off using an AJAX design for this. I can't be sure without seeing it "in situ" but it feels like it should be AJAX when I look at the code. To learn more about HTTP client/server protocols, please read this article and then post back with any questions.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html

Also, when you speak of "creating a JavaScript var" you are speaking of creating a pointer to an element in the dom.

Gary

The php is creating the Js conditions.

Randy Poole

I see no reason to use ajax for what his code is doing

Robert Granlund

ASKER

So, it is ok to write it this way?

if (myBox5 == 'BMX') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.10, myBox5aMtr =1.00}else if (myBox5 == 'Electric / Pedal Assist') { myBox5a =1.10, myBox5alia =1.10, myBox5aMed =1.10, myBox5aMtr =1.00}else if (myBox5 == 'Hybrid / Cruiser') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Mountain') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.10, myBox5aMtr =1.00}else if (myBox5 == 'Recumbent') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Road / Track') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Tandem') { myBox5a =1.00, myBox5alia =1.10, myBox5aMed =1.10, myBox5aMtr =1.10}else if (myBox5 == 'Tricycle') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Triathlon') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00}else if (myBox5 == 'Fat Bike') { myBox5a =1.00, myBox5alia =1.00, myBox5aMed =1.00, myBox5aMtr =1.00} else {
myBox5a = 1, myBox5alia = 1, myBox5aMed = 1, myBox5aMtr = 1
}

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

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

Start Free Trial

Ray Paseur

I think "ok" is relative to whatever standards you want. I might be inclined to write it this way:

     if (myBox5 == 'BMX')                     { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.10, myBox5aMtr = 1.00 }
else if (myBox5 == 'Electric / Pedal Assist') { myBox5a = 1.10, myBox5alia = 1.10, myBox5aMed = 1.10, myBox5aMtr = 1.00 }
else if (myBox5 == 'Hybrid / Cruiser')        { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.00, myBox5aMtr = 1.00 }
else if (myBox5 == 'Mountain')                { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.10, myBox5aMtr = 1.00 }
else if (myBox5 == 'Recumbent')               { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.00, myBox5aMtr = 1.00 }
else if (myBox5 == 'Road / Track')            { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.00, myBox5aMtr = 1.00 }
else if (myBox5 == 'Tandem')                  { myBox5a = 1.00, myBox5alia = 1.10, myBox5aMed = 1.10, myBox5aMtr = 1.10 }
else if (myBox5 == 'Tricycle')                { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.00, myBox5aMtr = 1.00 }
else if (myBox5 == 'Triathlon')               { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.00, myBox5aMtr = 1.00 }
else if (myBox5 == 'Fat Bike')                { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.00, myBox5aMtr = 1.00 }
else                                          { myBox5a = 1.00, myBox5alia = 1.00, myBox5aMed = 1.00, myBox5aMtr = 1.00 }

Open in new window

When you line things up carefully, you can make a quick visual scan to catch code errors more quickly (they are usually typographical and stand out). And you can see that, eg, myBox5a is almost always the same, so there is no need to write code to set it conditionally. You could just set it once at the top and only change it if the selection indicates a need to change.

And when you look at it this way you can kind of see that the application is now dependent on a programming change and a redeployment if any of these values change. That means a testing cycle with software developers involved. It's an expensive way to build applications and an even more expensive way to go forth into the future. If it were my app, I would want to have these values in a data base table so that the business unit could do table maintenance without making direct changes to the JavaScript. Hence my thinking that this might make for a good AJAX application.