让PHP、Form和Javascript协同工作 - Getting PHP, Form and Javascript to work together

我正在为客户端创建一个网页，我希望HTML能与PHP和Javascript一起使用，但我无法理解两者的工作方式。

 <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>

这是我的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);
}

最后是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);
?>

老实说，我在挣扎。我对Javascript和PHP很有经验。我无法理解的是，如何将输入字段同时转换为PHP文件和Javascript文件。我需要PHP，这样我就可以通过电子邮件发送字段，但输入字段将转到用于显示价格的Javascript代码。顾客希望发送披萨订单，他希望顾客能够看到价格的连续记录。这就是我在Javascript中所做的，每次你点击"添加披萨"按钮，你都会得到你的订单和价格，但你会把Javascript中已经使用过的信息变成电子邮件。。。

好吧，有几件事：1）您可以在不使用Javascript的情况下做任何您想做的事情。一个简单的帖子表单就可以了：

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

2）但是，如果你想以AJAX风格进行操作（不是整个页面都在更改，而是部分更改），你需要收集表单信息并在后台提交，然后返回并将信息放入结果中。这比邮寄表格要复杂得多。

如果你想要选项2（听起来像），使用JQuery并在你的页面上添加这样的东西：

$(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)
      });
  });
});

序列化函数是我编写的一个函数，它采用形式并将它们分解为一个对象。

解释：1） document.ready部分在页面准备好时调用脚本（所有DOM元素、表单等都在那里）。2） form.submit部分在单击"提交"按钮时调用函数。3） preventDefault阻止表单尝试以常规方式提交。4） post部分调用PHP页面并返回结果（称为"data"）。它在发送之前将"序列化"对象转换为JSON字符串5） "数据"随后被注入到您的页面中。如果你想列出一个列表，你可以使用.append而不是.html.

看看这把小提琴：https://jsfiddle.net/ey5m18vv/3/

记住，这本身是行不通的！您需要在PHP文件（$_POST）中接收POST并解码JSON。类似这样的东西：

$info = json_decode($_POST);