Solved

PHP within Javascript

Posted on 2014-07-30
14
291 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
[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
  • 9
  • 5
14 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40230403
Post the rendered js that is in the browser.
0
 
LVL 7

Author Comment

by:rgranlund
ID: 40230436
@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
ID: 40230445
Whats the error message?
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 58

Expert Comment

by:Gary
ID: 40230448
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
ID: 40230462
There is no error message.  It just won't update the sum.
0
 
LVL 58

Expert Comment

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

Author Comment

by:rgranlund
ID: 40230484
<!--  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
 
LVL 58

Expert Comment

by:Gary
ID: 40230489
Ahh haa

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

== is for comparisons
0
 
LVL 58

Expert Comment

by:Gary
ID: 40230499
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
ID: 40230508
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
ID: 40230548
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
ID: 40230564
<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
ID: 40230588
@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
ID: 40230592
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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 the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

623 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