jQuery和html相同頁面

嘿傢伙，所以基本上我希望輸出保持在同一頁面上。我對jQuery一無所知，希望能得到一些幫助！jQuery和html相同頁面

編輯：抱歉不要混淆下面的代碼是我原來的代碼。現在我想要合併jQuery並將其保留在同一頁面而不是使用php。

所以基本上我的代碼是：

<h1>Flybai-Knight Automotive</h1> 
<h2> Payroll Processing </h2> 
<p>Inputs:</p> 
<ul> 
    <form action="processed.php" method="post"> 
     <li> 
      Employee: <input name="name" type="text"> 
     </li> 
     <li> 
      Status 
      <input name="choice" type="radio" value="Married"> Married 
      <input name="choice" type="radio" value="Not married" checked> Not Married 
     </li> 
     <li> 
      Hours worked 
      <select name="hours"> 
       <option value=20>20 hours</option> 
       <option value=25>25 hours</option> 
       <option value=30>30 hours</option> 
       <option value=35>35 hours</option> 
       <option value=40>40 hours</option> 
       <option value=45>45 hours</option> 
       <option value=50>50 hours</option> 
      </li>  
     </select><br> 
     <li> 
      Wage 
      <select name="wage"> 
       <option value=10>$10.00 per hour</option> 
       <option value=10.50>$10.50 per hour</option> 
       <option value=11>$11.00 per hour</option> 
       <option value=11.50>$11.50 per hour</option> 
       <option value=12>$12.00 per hour</option> 
       <option value=12.50>$12.50 per hour</option> 
       <option value=13>$13.00 per hour</option> 
       <option value=13.50>$13.50 per hour</option> 
       <option value=14>$14.00 per hour</option> 
       <option value=14.50>$14.50 per hour</option> 
       <option value=15>$15.00 per hour</option> 
      </li> 
     </select><br> 
    </ul> 

    Outputs:<br><br> 
    <input type="submit" value="Calculate Net Pay"> 
</form>

我所要的輸出是這樣的：

爲100.00淨工資爲180.00 $，基於20小時工作的工資每小時$ 10.00，稅率爲10％

我對另一頁的代碼是：已編輯我的PHP代碼實際工作。

<?php 
    $name = $_POST["name"]; 
    $choice = $_POST["choice"]; 
    +$hours = $_POST["hours"]; 
    +$wage = $_POST["wage"]; 
    if ($choice == "Married") { 
     +$tax = 0.10; 
    } else { 
     +$tax = 0.20;  
    } 
    if ($choice == "Married") { 
     $taxView = 10; 
    } else { 
     $taxView = 20; 
    } 

    +$netPay = ($wage * $hours) * $tax; 
    +$netPayFinal = ($wage * $hours) - $netPay; 
    $result = "Net pay for ". $name. " is $" . $netPayFinal. ", based upon " . $hours." hours worked, a wage of $" . $wage. " per hour, and a tax rate of " . $taxView."%"; 
    echo $result;die; 
?>

我不希望它在另一頁上。感謝您提前幫忙！

來源

2016-12-12 Austin

請注意，你有你的HTML幾個問題，這使得它無效，即。一個'form'作爲'ul'的孩子，並且按照rong順序關閉'select'和'li'。我強烈建議你解決這些問題。 –

使用同一頁上這個，你會得到答案：

的index.php

<form action="" id="myForm" method="post"> 

    <li>Employee:<input name="name" type="text"></li> 
    <li>Status <input name="choice" type="radio" value="Married"> Married 
     <input name="choice" type="radio" value="Not married" checked> Not Married </li> 
    <li>Hours worked <select name="hours"> 
    <option value=20>20 hours</option> 
    <option value=25>25 hours</option> 
    <option value=30>30 hours</option> 
    <option value=35>35 hours</option> 
    <option value=40>40 hours</option> 
    <option value=45>45 hours</option> 
    <option value=50>50 hours</option></li></select><br> 

    <li>Wage <select name="wage"> 
    <option value=10>$10.00 per hour</option> 
    <option value=10.50>$10.50 per hour</option> 
    <option value=11>$11.00 per hour</option> 
    <option value=11.50>$11.50 per hour</option> 
    <option value=12>$12.00 per hour</option> 
    <option value=12.50>$12.50 per hour</option> 
    <option value=13>$13.00 per hour</option> 
    <option value=13.50>$13.50 per hour</option> 
    <option value=14>$14.00 per hour</option> 
     <option value=14.50>$14.50 per hour</option> 
     <option value=15>$15.00 per hour</option></li></select><br></ul> 

    Outputs:<br><br> 

    <input type="button" onclick="getData();" value="Calculate Net Pay"> 
    </form> 
    </body> 
    </html> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     function getData(){ 
      var myFormData = $('#myForm').serialize(); 
      $.ajax({ 
        url: 'processed.php', 
        type: 'POST', 
        data : myFormData, 
        success: function(result) { 
         alert(result); 
        }, 
       }); 
     } 
    </script>

processed.php：

<?php 
     $name = $_POST["name"]; 
     $choice = $_POST["choice"]; 
     $hours = $_POST["hours"]; 
     $wage = $_POST["wage"]; 
     if ($choice == "Married") { 
      $tax = 0.10; 
     } else { 
      $tax = 0.20;  
     } 
     if ($choice == "Married") { 
      $taxView = 10; 
     } else { 
      $taxView = 20; 
     } 

     $netPay = ($wage * $hours) * $choice; 
     $result = "Net pay for " . $name. " is $" . $netPay. ", based upon " . $hours. " hours worked, a wage of $". $wage. " per hour, and a tax rate of " . $taxView. "%"; 
     echo $result;die; 
    ?>

來源

2016-12-12 09:00:23 rushil

感謝您的支持！它幫助，但我怎麼會把它放在相同的頁面上彈出相同的標題，而不是形式，它被替換爲結果行？例如：（上方）Flybai-Knight Automotive（下方）工資處理（在頂部兩個標題下）根據工作20小時，每小時10美元的工資和10％的稅率，奧斯汀的淨工資爲180.00美元，而不是使用警報。 – Austin

爲什麼死亡？爲什麼其他標籤？爲什麼沒有sprintf？爲什麼沒有JSON輸出？ –

只是想保持文件代碼相同...這裏$ result包含字符串，所以不需要json編碼。 – rushil

你想要做什麼是一個異步調用。這就是所謂的阿賈克斯，你可以用jQuery來做到這一點。

<script> 
$.ajax({ 
    method: "POST", 
    data: serialize(#yourForm), 
    url: "url-to-your-file.php", 
    Success: function(result) 
    { 
     // Do what you want with the result 
    } 
}); 
</script>

我建議您閱讀有關此主題的更多信息。

我將添加一個鏈接 Here

來源

2016-12-12 09:11:47

jQuery和html相同頁面

回答

相關問題