Solved

PHP within Javascript

Posted on 2014-07-30
14
290 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
Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

 
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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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.

751 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