Solved

PHP within Javascript

Posted on 2014-07-30
14
281 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
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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

895 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

13 Experts available now in Live!

Get 1:1 Help Now