从下拉列表中获取所选值并将其乘以 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

您引用的是不存在的类名而不是 id。将.buyme 更改为#buyme

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

编辑 错过了课程也在那里。但是，由于您只是引用单个元素，因此无论如何都应该使用 ID。

Answer 2

我要做的第一件事就是在票价上加一个班级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()