php - 从下拉列表中获取所选值并将其乘以 PHP/Javascript 中 sql 表中的值

Question

我在尝试从下拉列表中获取值并将该值乘以“门票”表中的数字时遇到问题。我一直在尝试用 PHP 和 javascript 实现这个计算，但没有成功:(

这是表单(通过 AJAX 返回到主页):

$pcSearch = $_POST['postcodeSearch'];

$postCodeSQL = "SELECT * FROM ticket WHERE locationID IN (SELECT locationID FROM location WHERE postCode LIKE '$pcSearch') ";

$postCoderesult = mysql_query($postCodeSQL) or die(mysql_error());

 while ($pcRow = mysql_fetch_assoc($postCoderesult)) {
        $venue = $pcRow['venue'];
        $ticketPrice = $pcRow['tPrice'];
        $date = $pcRow['date'];
        $time= $pcRow['time'];

    echo "<tr>\n";
    echo "<td>$venue</td>\n";
    echo "<td>&pound$ticketPrice</td>\n";
    echo "<td><form id=\"quantity\" method=\"post\" name=\"ticketQuantity\">
                 <select name =\"showQuantity\" id=\"showQuantity\" class =\"showQuantity\" >
                    <option value=\"1\">1</option>                                      
                    <option value=\"2\">2</option>
                    <option value=\"3\">3</option>
                    <option value=\"4\">4</option>
                    <option value=\"5\">5</option>
                 </select>
              </form>
          </td>\n";
    echo "<td>$date</td>\n";
    echo "<td>$time</td>\n";

    echo "<td><form name=\"buyTicket\" class=\"buyTicket\" id=\"buyTicket\" > 
                  <input type= \"button\" id= \"buyMe\" class= \"buyMe\" value= \"Buy\" name=\"buyMe\"> 
              </form> 
          </td>\n";
   echo "</tr>\n";

}

基本上，我想要做的是，当用户点击并选择他们想要的门票数量(即 3)时，该数字将乘以门票的价格(“tPrice”)。有没有办法在 PHP 中获取这两个值并将它们相乘？

我尝试添加 jQuery 来监听按钮单击功能，但无济于事...我什至尝试调试它，但由于某种奇怪的原因，它不会输出警报:

$(document).ready(function() {
  $(".buyMe").click(function() {
    alert('click');
   });
});

但是，如果我使用 jQuery，我如何从表单中获取“tPrice”的值？

非常感谢您的帮助:)

Answer 1

我要做的第一件事就是在票价中添加一个舱位 td :

<罢工>

echo "<td class=\"ticketPrice\">&pound$ticketPrice</td>\n";

这使得使用 jQuery 更容易获取价格。

所以现在..你可以这样做:

$(".buyMe").click(function() {
    var priceForOne = $(this).siblings('.ticketPrice').text().substr(1);
});

<罢工>

事实上，由于您可以访问 HTML 源代码，更好的方法可能是使用 data() :

echo '<input type="button" class="buyMe" value="Buy" data-ticket-price="'.$ticketPrice.'"/>';

然后您可以将点击更改为:

$(".buyMe").click(function() {
    var priceForOne = $(this).data('ticketPrice');
});

其他几点..

删除id属性来自这里:

<input type= \"button\" id= \"buyMe\" class= \"buyMe\" value= \"Buy\" name=\"buyMe\"> 

选择列表周围不需要表单，因为它什么都不做...类似地，按钮周围的表单也不做任何事情!

已更新

click方法不适用于文档加载后添加的 DOM 元素(即通过 AJAX)...您需要使用 on()方法:

$(document).on('click','.buyMe',function() {
// handle the click here
});

$(document)上面需要是 buyMe 的父元素元素并在加载时出现在 DOM 上，在您的情况下，您可以替换 $(document)与 $('#idOfYourTable')

Docs for data()和 Docs for on()