Getting PHP, Form and Javascript to work together

Question

I'm creating a web page for a client and I would like the HTML to work with both the PHP and the Javascript but I can't get my head around how both would work.

 <label for="pizza1-2">Small: </label>
        <input type="radio" name="size1" id="pizza1" value="Size: Small" onclick="sourcesize(this.value)"/><br />
    <label for="pizza1-3">Medium: </label>
        <input type="radio" name="size1" id="pizza1" value="Size: Medium" onclick="sourcesize(this.value)"/><br />
    <label for="pizza1-4">Large: </label>
        <input type="radio" name="size1" id="pizza1" value="Size: Large" onclick="sourcesize(this.value)"/><br /><br />
    <label for="pizza11">Two Types of Pizza in One Click Here: </label>
        <input type="checkbox" name="half1" id="pizza11" value="One Half: "/><br />
</td>

<!--Size1 End-->


<!--Type1-->
<td>        
    <label for="pizzaoption1">Select Your 1st Pizza</label>
        <select name="pizzaoption1" id="pizzaoption1" onchange="sourcetype(this.value)">
            <option value="none" >None</option>
            <option value="dheese" title="cheese">Cheese</option>
            <option value="pepperoni" title="pepperoni">Pepperoni</option>
            <option value="hawaiian" title="ham and pineapple">Hawaiian</option>
            <option value="canadian" title="Ham, Bacon, Tomatoes, Onions, and Cheddar Cheese.">Canadian</option>
            <option value="freshgarden" title="Mushrooms, Green Peppers, Onions, Olives, Tomatoes, Pineapple, and a sprinkle of Basil">Fresh Garden Vegetarian</option>
            <option value="classic" title="Pepperoni, Mushrooms, and Green Pepper">Baldy's Classic</option>
            <option value="donair" title="Donair Meat, Onions, and Tomatoes on Donair Sweet Sauce">Donair Pizza</option>
            <option value="bbqchicken" title="Chicken, Bacon, Pineapple, Mushrooms, Onions and Cheddar Cheese on a BBQ sauce">BBQ Chicken</option>
            <option value="housepecial" title="Pepperoni, Ham, Lean Beef, Mushrooms, Green Peppers, Onions, Olives, and Tomatoes">House Special</option>
            <option value="buffalochicken" title="Chicken, Onions, Mushrooms, Bacon, Mexican Spices and Cheddar Cheese on a Hot Sauce base">Buffalo Chicken</option>
            <option value="tropicchicken" title="Chicken, Pineapple, Bacon and Cheddar Cheese on a Tangy Tropical base.">Tropical Chicken</option>
            <option value="tropichawaiian" title="Ham, Pineapple, Bacon and Cheddar Cheese on a Tangy Tropical Sauce base.">Tropical Hawaiian</option>
            <option value="meatlovers" title="Pepperoni, Ham, Italian Sausage, Salami, Lean Beef and Bacon">Meat Lovers</option>
            <option value="perogy" title="Bacon, Potatoes, Onions, Cheddar Cheese, on a Sour Cream base">Perogy</option>
            <option value="mediterranean" title="Lean Beef, Tomatoes, Onions, Green Peppers, Olives, and Greek Feta">Mediterranean Special</option>
            </select>


<input type="button" name="submit" value="Add A Pizza!" onclick="addPizza()" /><div id="orderfinal">
<a name="anchor"><p>You're Order Includes:</p></a>

And here is my Javascript

var sizeprice;
var typeone;

function sourcetype(t) {
if (t == 'cheese') {
    typeone = "Cheese"
}
else if (t == 'pepperoni') {
    typeone = "Pepperoni"
}
else if (t == 'hawaiian') { 
    typeone = "Hawaiian"
}
else if (t == 'canadian') {
    typeone = "Canadian"
}
else if (t == 'freshgarden') {
    typeone = "Fresh_Garden"
}
else if (t == 'classic') {
    typeone = "Classic"
}
else if (t == 'donair') {
    typeone = "Donair"
}
else if (t == 'bbqchicken') {
    typeone = "BBQ_Chicken"
}
else if (t == 'housespecial') {
    typeone = "House_Special"
}
else if (t == 'buffalochicken') {
    typeone = "Buffalo_Chicken"
}
else if (t == 'tropicchicken') {
    typeone = "Tropical_Chicken"
}
else if (t == 'tropichawaiian') {
    typeone = "Tropical_Hawaiian"
}
else if (t == 'meatlovers') {
    typeone = "Meat_Lovers"
}
else if(t == 'mediterranean') {
    typeone = "Mediterranean"
}
else if (t == 'perogy') {
    typeone = "Perogy"
}
};
function sourcesize(s) {
if (s == 'Size: Small') {
    sizeprice = "Small"
}
else if (s == 'Size: Medium') {
    sizeprice = "Medium"
}
else if (s == 'Size: Large') {
    sizeprice = "Large"
}
};



function displaycost(sizeprice,typeone) {
var pizzaPrice;


if (sizeprice == 'Small' && typeone =='none') {
    alert("Enter Valid Type!")
}
else if (sizeprice == 'Small' && typeone == 'Cheese') {
    pizzaPrice = "$9.75"
}
else if (sizeprice == 'Medium' && typeone == 'Cheese') {
    pizzaPrice = "$11.75"
}
else if (sizeprice == 'Large' && typeone == "Cheese") {
    pizzaPrice = "$14.50"
    }
else if (sizeprice == "Small" && typeone == "Pepperoni") {
    pizzaPrice = "$10.50"
    }
else if (sizeprice == "Medium" && typeone == "Pepperoni") {
    pizzaPrice = "$12.75"
    }
else if (sizeprice == "Large" && typeone == "Pepperoni") {
    pizzaPrice = "$15.50"
    }
else if (sizeprice == "Small" && typeone == "Hawaiian") {
    pizzaPrice = "$10.75"
    }
else if (sizeprice == "Medium" && typeone == "Hawaiian") {
    pizzaPrice = "$13.50"
    }
else if (sizeprice == "Large" && typeone == "Hawaiian") {
    pizzaPrice = "$16.50"
    }
else if (typeone == "Canadian" && sizeprice == "Small"  || typeone == "Fresh_Garden" && sizeprice == "Small" || typeone == "Classic"  && sizeprice == "Small" || typeone == "Donair" && sizeprice == "Small" ) {
    pizzaPrice = "$12.00"
    }
else if (typeone == "Canadian" && sizeprice == "Medium" || typeone == "Fresh_Garden" && sizeprice == "Medium" || typeone == "Classic" && sizeprice == "Medium" || typeone == "Donair" && sizeprice == "Medium") {
    pizzaPrice = "$15.00"
    }
else if (typeone == "Canadian" && sizeprice == "Large" || typeone == "Fresh_Garden" && sizeprice == "Large" || typeone == "Classic" && sizeprice == "Large" || typeone == "Donair" && sizeprice == "Large") {
    pizzaPrice = "$18.00"
    }

else if (typeone == "BBQ_Chicken" && sizeprice == "Small" || typeone == "House_Special" && sizeprice == "Small" || typeone == "Buffalo_Chicken" && sizeprice == "Small" || typeone == "Tropical_Chicken" && sizeprice == "Small") {
    pizzaPrice = "$14.00"
    }
else if (typeone == "BBQ_Chicken" && sizeprice == "Medium" || typeone == "House_Special" && sizeprice == "Medium" || typeone == "Buffalo_Chicken" && sizeprice == "Medium" || typeone == "Tropical_Chicken" && sizeprice == "Medium") {
    pizzaPrice = "$17.00"
    }
else if (typeone == "BBQ_Chicken" && sizeprice == "Large" || typeone == "House_Special" && sizeprice == "Large" || typeone == "Buffalo_Chicken" && sizeprice == "Large" || typeone == "Tropical_Chicken" && sizeprice == "Large") {
    pizzaPrice = "$20.00"
    }
else if (typeone == "Tropical_Hawaiian" && sizeprice == "Small" || typeone == "Meat_Lovers" && sizeprice == "Small" || typeone == "Perogy" && sizeprice == "Small" || typeone == "Mediterranean" && sizeprice == "Small") {
    pizzaPrice = "$13.00"
    }
else if (typeone == "Tropical_Hawaiian" && sizeprice == "Medium" || typeone == "Meat_Lovers" && sizeprice == "Medium" || typeone == "Perogy" && sizeprice == "Medium" || typeone == "Mediterranean" && sizeprice == "Medium") {
    pizzaPrice = "$16.00"
    }
else if (typeone == "Tropical_Hawaiian" && sizeprice == "Large" || typeone == "Meat_Lovers" && sizeprice == "Large" || typeone == "Perogy" && sizeprice == "Large" || typeone == "Mediterranean" && sizeprice == "Large") {
    pizzaPrice = "$19.00"
} 
return pizzaPrice;
}


function addPizza(){

var orderInput = document.createElement("P");
var order = document.createTextNode("Pizza is a " + sizeprice + " " + typeone + " for:  " + displaycost(sizeprice,typeone));
orderInput.appendChild(order);
document.getElementById("orderfinal").appendChild(orderInput);
}

and finally the PHP

<?php
$emailSubject = 'Pizza Order!';
$webMaster = 'veritasdelux@gmail.com';
$orderBody = $_POST['orderfinal'];
$halfHalf1 = $_POST['half1'];
$pizzaoption1 = $_POST['pizzaoption1'];
$body = <<<EOD
<br><hr><br>
$orderBody <br>
$halfHalf1 <br>
EOD;
$headers = "Pizza: $pizzaoption1Field\r\n";
$headers .= "Content-type: text/html\r\n";
$success = mail($webMaster, $emailSubject, $body, $headers);
?>

To be honest I'm floundering. I'm in experienced with Javascript and PHP. What I can't get my head around is how I can have input fields going to PHP files and Javascript files at the same time. I need the PHP so I can email the field but the input fields go to Javascript code designed to display the price. The customer wants the Pizza Order sent and he wants customers to be able to see a running tally of the price. That's what I'm doing in the Javascript here is everytime you hit the button "add Pizza" you get a running tally of your order and price but you do you take that information, which was already used in the Javascript, and turn it into an email...

What you would need to do is use AJAX to send your info from your Input fields to your PHP file. So you would calculate your all your stuff using javascript as you are doing, then send that information to your PHP and then email it. Here is a guide to get you started: http://brian.staruk.me/php/2013/sample-jquery-php-ajax-script/ — , Apr 09 '16 at 19:24
You could use hidden inputs and set their value with `onchange` events on the dropdown as used here for `onclick`: http://stackoverflow.com/questions/34267448/javascript-variable-value-textarea-content-to-php-variable/34276063#34276063` — Steve, Apr 10 '16 at 00:27
To display the price tally you could use `document.getElementById('price_display_div').innerHTML = price;` and add it up in JavaScript - then set the value of the hidden input to submit to PHP when all the other clicking is done. — Steve, Apr 10 '16 at 00:43

score 0 · Answer 1 · answered Apr 09 '16 at 20:54

Ok, a couple of things: 1) You can do everything you want without using Javascript. A simple post form would work:

<form action='process.php'>
       <input...
       <input...
       <input type=submit value='submit'>
   </form>

2) But, if you want to do it AJAX style (where, instead of the whole page changing, just part does), you'll need to gather up the form information and submit it in the background, then come back and put the info into the result. This is a good deal more complicated than a post-form.

If you want option 2 (which it sounds like), use JQuery and add something like this to your page:

$(document).ready(function(){
  $('form').submit(function(e){
     e.preventDefault();
     var serialized = serialize($(this));
     console.log(serialized);

     $.post( "process_file.php", {data: JSON.stringify(serialized)})
     .done(function( data ) {
         $('#inject').html(data)
      });
  });
});

The serialize function is one that I wrote that takes forms and breaks them down into an object.

An explanation: 1) The document.ready part calls the script when the page is prepared (all the DOM elements, form, etc. are there. 2) the form.submit part calls the function when the 'submit' button is clicked. 3) The preventDefault blocks the form from trying to submit the usual way. 4) The .post part calls out to the PHP page and comes back the the result (called 'data'). It turns the 'serialized' object into a JSON string before sending 5) The 'data' is then injected into your page. If you want to make a list, you can use .append instead of .html.

See this fiddle: https://jsfiddle.net/ey5m18vv/3/

Remember that this won't work on its own! You need to receive the POST in your PHP file ($_POST) and decode the JSON. Something like this:

$info = json_decode($_POST);

Getting PHP, Form and Javascript to work together

1 Answers1