PHP within Javascript

I have a piece of Javascript with PHP within it.  The following script fails at line #48:  Is line 38 correct?

	$bike1 = "SELECT *
				FROM wp_type_of_bicycle";
		
		$type_bike1 = $pdo->prepare($bike1);
			

		
	?>
<!--  START CALCULATE CUSTOM PRICE  -->
<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;
		<?php
			try {
			$type_bike1->execute();
			$type1 = $type_bike1->fetchAll();
			
			foreach ($type1 as $bt1)	{
					$bike_type1 = $bt1->type;
					$pd1 = $bt1->physical_damage;
				?>
					if (myBox5 == '<?php echo $bike_type1; ?>') { myBox5a == <?php echo $pd1; ?> }
				<?php
			} 
			?>
			else { myBox5a == 1 }
			<?php
		}
		catch(PDOException $b) {
   			echo 'ERROR: ' . $b->getMessage();
		}	
	?>

	var result = document.getElementById('result');	
	var base = baseOne * myBox1;

	var myResult = parseInt(base) + parseInt(myBox5a) + parseInt(myBox2a) + parseInt(myBox3a) + parseInt(myBox4a);
	result.innerHTML = myResult;
}
</script>

Open in new window

However the code works fine if I leave out + parseInt(myBox5a) on line # 48
LVL 7
rgranlundAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
<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;
		<?php
			$elseif="";
			try {
			$type_bike1->execute();
			$type1 = $type_bike1->fetchAll();
			
			foreach ($type1 as $bt1)	{
					$bike_type1 = $bt1->type;
					$pd1 = $bt1->physical_damage;

					$elseif.="else if (myBox5 == '" . $bike_type1 . "') { myBox5a =" . $pd1 . " }"

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

	var result = document.getElementById('result');	
	var base = parseFloat(baseOne) * parseFloat(myBox1);

	var myResult = parseFloat(base) + parseFloat(myBox2a) + parseFloat(myBox3a) + parseFloat(myBox4a);
	
	
	result.innerHTML = myResult;
}
</script>

Open in new window

0
 
GaryCommented:
Post the rendered js that is in the browser.
0
 
rgranlundAuthor Commented:
@Gary
<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 }
if (myBox5 == 'Electric / Pedal Assist') { myBox5a == 1.10 }
if (myBox5 == 'Hybrid / Cruiser') { myBox5a == 1.00 }
if (myBox5 == 'Mountain') { myBox5a == 1.00 }
if (myBox5 == 'Recumbent') { myBox5a == 1.00 }
if (myBox5 == 'Road / Track') { myBox5a == 1.00 }
if (myBox5 == 'Tandem') { myBox5a == 1.00 }
if (myBox5 == 'Tricycle') { myBox5a == 1.00 }
if (myBox5 == 'Triathlon') { myBox5a == 1.00 }
if (myBox5 == 'Fat Bike') { myBox5a == 3.00 }
else { myBox5a == 1 }
var result = document.getElementById('result');
var base = baseOne * myBox1;
var myResult = parseInt(base) + parseInt(myBox2a) + parseInt(myBox3a) + parseInt(myBox4a);
result.innerHTML = myResult;
}
</script>

Open in new window

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
GaryCommented:
Whats the error message?
0
 
GaryCommented:
Use parseInt around your two values here

var base = baseOne * myBox1;

What is the purpose of the decimal numbers? If you are using decimals you should be using parseFloat which will preserve the decimal points.
0
 
rgranlundAuthor Commented:
There is no error message.  It just won't update the sum.
0
 
GaryCommented:
Can you post the HTML if the above doesn't work
0
 
rgranlundAuthor Commented:
<!--  START CALCULATE CUSTOM PRICE  -->
<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 }
									if (myBox5 == 'Electric / Pedal Assist') { myBox5a == 1.10 }
									if (myBox5 == 'Hybrid / Cruiser') { myBox5a == 1.00 }
									if (myBox5 == 'Mountain') { myBox5a == 1.00 }
									if (myBox5 == 'Recumbent') { myBox5a == 1.00 }
									if (myBox5 == 'Road / Track') { myBox5a == 1.00 }
									if (myBox5 == 'Tandem') { myBox5a == 1.00 }
									if (myBox5 == 'Tricycle') { myBox5a == 1.00 }
									if (myBox5 == 'Triathlon') { myBox5a == 1.00 }
									if (myBox5 == 'Fat Bike') { myBox5a == 3.00 }
				
			
	var result = document.getElementById('result');	
	var base = parseFloat(baseOne) * parseFloat(myBox1) ;

	var myResult = parseInt(base) + parseInt(myBox2a) + parseInt(myBox3a) + parseInt(myBox4a);
	
	result.innerHTML = myResult;
}
</script>


	
		<form class="cart" method="post" enctype='multipart/form-data'>

				<input  type="text" value="714.29" name="addon-28-custom-price[custom-price]" id="addon-28-custom-price[custom-price]" autocomplete="off" onblur="findSum()">
		
					<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Select My Deductible *</h3>
				</div>
				<div class="product-input">
					<select name="addon-28-custom-price[my-deductible]" id="addon-28-custom-price[my-deductible]" autocomplete="off" onblur="findSum()">
			<option value="1.000">$ 100.00</option><option value="0.925">$ 200.00</option><option value="0.850">$ 300.00</option><option value="0.800">$ 500.00</option>						</select>
					</div>
				</div>
						<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Bicycle Liability</h3>
				</div>
				<div class="product-input">
					<select name="addon-28-custom-price[bicycle-liability]" id="addon-28-custom-price[bicycle-liability]" autocomplete="off" onblur="findSum()">
						<option value="">Select an Option</option>
			<option value="54.00">$ 25000.00</option><option value="78.00">$ 50000.00</option><option value="95.00">$ 100000.00</option><option value="135.00">$ 300000.00</option>						</select>
					</div>
					
				</div>
						<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Medical Payments</h3>
				</div>
				<div class="product-input">
					<select name="addon-28-custom-price[medical-payments]" id="addon-28-custom-price[medical-payments]" autocomplete="off" onblur="findSum()">
						<option value="">Select an Option</option>
			<option value="22.00">$ 1000.00</option><option value="49.00">$ 2500.00</option><option value="82.00">$ 5000.00</option><option value="113.00">$ 7500.00</option><option value="145.00">$ 10000.00</option><option value="194.00">$ 15000.00</option><option value="227.00">$ 20000.00</option><option value="264.00">$ 25000.00</option>						</select>
					</div>
					
				</div>
						<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Motor Vehicle Contact Protection</h3>
				</div>
				<div class="product-input">
					<select name="addon-28-custom-price[vehicle-contact]" id="addon-28-custom-price[vehicle-contact]" autocomplete="off" onblur="findSum()">
						<option value="">Select an Option</option>
			<option value="43.00">$ 10000.00</option><option value="54.00">$ 25000.00</option>						</select>
					</div>
					
				</div>
						<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Manufacturer</h3>
				</div>
				<div class="product-input">
					<input type="yext" name="addon-28-custom-price[manufacturer]" id="addon-28-custom-price[manufacturer]" onblur="findSum()">
				</div>
			</div>
			<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Year Built</h3>
				</div>
				<div class="product-input">
					<input type="text" name="addon-28-custom-price[year-built]" id="addon-28-custom-price[year-built]" onblur="findSum()">
				</div>
			</div>
			<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Model</h3>
				</div>
				<div class="product-input">
					<input type="text" name="addon-28-custom-price[model]" id="addon-28-custom-price[model]" onblur="findSum()">
				</div>
			</div>
			<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Purchase Date (approximate)</h3>
				</div>
				<div class="product-input">
					<input type="text" name="addon-28-custom-price[purchase-date]" id="addon-28-custom-price[purchase-date]" onblur="findSum()">
				</div>
			</div>
			<div class="product-addon-tall">
				<div class="product-name">
					<h3 class="addon-name">Purchase Price</h3><br />
					(receipt may be required to make a claim)
				</div>
				<div class="product-input">
					<input type="text" name="addon-28-custom-price[purchase-price]" id="addon-28-custom-price[purchase-price]" onblur="findSum()">
				</div>
			</div>
			<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Purchased New or Used</h3>
				</div>
				<div class="product-input">
					<select name="addon-28-custom-price[new-used]" id="addon-28-custom-price[new-used]" autocomplete="off" onblur="findSum()">
						<option value="">Select an Option</option>
						<option value="New">New</option>
						<option value="Used">Used</option>
					</select>
				</div>
			</div>
			<div class="product-addon">
				<div class="product-name">
					<h3 class="addon-name">Type of Bicycle</h3>
				</div>
				<div class="product-input">
					<select name="addon-28-custom-price[type-of-bicycle]" id="addon-28-custom-price[type-of-bicycle]" onblur="findSum()">
						<option value="">Select a Bicycle Type</option>
			<option value="BMX">BMX</option><option value="Electric / Pedal Assist">Electric / Pedal Assist</option><option value="Hybrid / Cruiser">Hybrid / Cruiser</option><option value="Mountain">Mountain</option><option value="Recumbent">Recumbent</option><option value="Road / Track">Road / Track</option><option value="Tandem">Tandem</option><option value="Tricycle">Tricycle</option><option value="Triathlon">Triathlon</option><option value="Fat Bike">Fat Bike</option>						</select>
					</div>
					
				</div>
			<div class="adjusted-total">
	Adjusted<br />Total<br />
	$ <span id="result"></span>
	<!--  <input type="button" value="Preview" onclick="findSum()" />  -->
</div>

Open in new window

0
 
GaryCommented:
Ahh haa

You are setting the values using == should be just =

== is for comparisons
0
 
GaryCommented:
And you need to nest your if's

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

Open in new window

0
 
GaryCommented:
As you are using jquery it would be easier to just store the myBox5a value in the dropdown option as an attribute that you can grab with one line of js rather than all those if/else
0
 
rgranlundAuthor Commented:
OK, I'm getting there.  The following is my script:
		$bike1 = "SELECT *
				FROM wp_type_of_bicycle";
		
		$type_bike1 = $pdo->prepare($bike1);
			

		
	?>
<!--  START CALCULATE CUSTOM PRICE  -->
<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;
		<?php
			try {
			$type_bike1->execute();
			$type1 = $type_bike1->fetchAll();
			
			foreach ($type1 as $bt1)	{
					$bike_type1 = $bt1->type;
					$pd1 = $bt1->physical_damage;
				?>
					if (myBox5 == '<?php echo $bike_type1; ?>') { myBox5a = <?php echo $pd1; ?> }
				<?php
			} 
			?>

			<?php
		}
		catch(PDOException $b) {
   			echo 'ERROR: ' . $b->getMessage();
		}	
	?>

	var result = document.getElementById('result');	
	var base = parseFloat(baseOne) * parseFloat(myBox1) * parseFloat(myBox5a);

	var myResult = parseFloat(base) + parseFloat(myBox2a) + parseFloat(myBox3a) + parseFloat(myBox4a);
	
	
	result.innerHTML = myResult;
}
</script>

Open in new window


This is how it is rendered:
<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 }
if (myBox5 == 'Electric / Pedal Assist') { myBox5a = 1.10 }
if (myBox5 == 'Hybrid / Cruiser') { myBox5a = 1.00 }
if (myBox5 == 'Mountain') { myBox5a = 1.00 }
if (myBox5 == 'Recumbent') { myBox5a = 1.00 }
if (myBox5 == 'Road / Track') { myBox5a = 1.00 }
if (myBox5 == 'Tandem') { myBox5a = 1.00 }
if (myBox5 == 'Tricycle') { myBox5a = 1.00 }
if (myBox5 == 'Triathlon') { myBox5a = 1.00 }
if (myBox5 == 'Fat Bike') { myBox5a = 3.00 }
var result = document.getElementById('result');
var base = parseFloat(baseOne) * parseFloat(myBox1) * parseFloat(myBox5a);
var myResult = parseFloat(base) + parseFloat(myBox2a) + parseFloat(myBox3a) + parseFloat(myBox4a);
result.innerHTML = myResult;
}
</script>

Open in new window

When I add in the myBox5a  I get the following error: ReferenceError: myBox5a is not defined
      

var base = parseFloat(baseOne) * parseFloat(myBox1) * parseFloat(myBox5a);
0
 
rgranlundAuthor Commented:
@GAry, that works 100%.  I'm not sure I understand what you did there echo substr($elseif,4)?>
0
 
GaryCommented:
Just building up a string of the js rather than writing it out on each loop
Then we echo the whole thing out after the loop has finished but remove the first 5 characters since the string starts with
else if  - which would cause an error
so it actually begins with just
if
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.