Solved

PHP within Javascript

Posted on 2014-07-30
14
280 Views
Last Modified: 2014-07-30
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
0
Comment
Question by:rgranlund
  • 9
  • 5
14 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Post the rendered js that is in the browser.
0
 
LVL 7

Author Comment

by:rgranlund
Comment Utility
@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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Whats the error message?
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 
LVL 7

Author Comment

by:rgranlund
Comment Utility
There is no error message.  It just won't update the sum.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Can you post the HTML if the above doesn't work
0
 
LVL 7

Author Comment

by:rgranlund
Comment Utility
<!--  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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 58

Expert Comment

by:Gary
Comment Utility
Ahh haa

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

== is for comparisons
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 
LVL 7

Author Comment

by:rgranlund
Comment Utility
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
<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
 
LVL 7

Author Comment

by:rgranlund
Comment Utility
@GAry, that works 100%.  I'm not sure I understand what you did there echo substr($elseif,4)?>
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
CSS Divs in Safari 3 18
jQuery Canlendar click function 5 19
Phone Dialer 5 35
gif overlay 3 32
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

772 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now