让PHP，Form和Javascript协同工作

Question

我正在为客户创建一个网页，我希望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中所做的就是每当你按下按钮时＃34;添加Pizza＆＃34;您获得了订单和价格的运行记录，但是您获取了已在Javascript中使用的信息，并将其转换为电子邮件...

Answer 1

好的，有几件事： 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页面并返回结果（称为“数据”）。它在发送之前将'序列化'对象转换为JSON字符串 5）然后将“数据”注入您的页面。如果要创建列表，可以使用.append而不是.html。

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

请记住，这不会自行运作！您需要在PHP文件（$ _POST）中接收POST并解码JSON。像这样：

$info = json_decode($_POST);