如何自动运行 jQuery 脚本，而无需点击提交？

Question

我目前正在经营一家在线商店。我已经成功编写了一个脚本来计算产品的价格，并在用户单击“更新价格”按钮时在产品页面上显示该价格。有没有办法在没有提交按钮的情况下做到这一点？换句话说：有没有办法让价格自动显示和更新？

（我没有包含我的 .php 文件，因为它使用数据库中的数据。）

任何帮助将不胜感激！

<form action="/" id="updatePrice">
  <h3>Size</h3>
  <select class="form-control" id="sizejquery" name="size">
    <option>A0</option>
    <option>A1</option>
    <option>A2</option>
  </select>
  <h3>Type of paper</h3>
  <select class="form-control" id="paperjquery" name="paper">
    <option>white coated paper</option>
    <option>photo paper</option>
  </select>
  <h3>Quantity</h3>
  <select class="form-control" id="quantityjquery" name="quantity">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
  <br>
  <input class="btn btn-default" type="submit" value="update price">
</form>
<div id="price">
  <h3>$0.00</h3>
</div>

<script>
  // Attach a submit handler to the form
  $("#updatePrice").submit(function(event) {

    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $(this),
      size = $form.find("#sizejquery").val(),
      paper = $form.find("#paperjquery").val(),
      quantity = $form.find("#quantityjquery").val(),
      url = $form.attr("action");

    // Send the data using post
    var posting = $.post(url, {
      size: size,
      paper: paper,
      quantity: quantity
    });

    // Put the results in a div
    posting.done(function(data) {
      var content = $(data).find("#content");
      $("#price").empty().append(content);
    });
  });
</script>

Answer 1

您可以在数量下拉广告上注册 blur() 事件，然后推送结果。 我已经修改了脚本。请查看它是否适用于您的实施。

<script>
$(document).ready(function(){

$("#quantityjquery").blur(function(){

    // Get some values from elements on the page:

      var size = $("#sizejquery").val();
      var paper = $("#paperjquery").val();
      var quantity = $("#quantityjquery").val();
      var url=$("#updatePrice").attr("action");

// Send the data using post

var posting = $.post(url, {
      size: size,
      paper: paper,
      quantity: quantity
    });

      // Put the results in a div

    posting.done(function(data) {
      var content = $(data).find("#content");
      $("#price").empty().append(content);
    });
});

});
</script>

Answer 2

好吧，那么，试试下面的方法：

$(function() {
  $formBtn = $("#updatePrice").find("input.btn-default");
  $formBtn.on("click", function(event) {
    //all your code (the one you already have) here....

  });

  $(window).on("load", function() {
    $formBtn.trigger("click");
  });

  $("#updatePrice").on("change", ".form-control", function() {
    $formBtn.trigger("click");
  });
});

完整代码：

$(function() {
    $formBtn = $("#updatePrice").find("input.btn-default");
    $formBtn.on("click", function(event) {
        // Stop form from submitting normally
        event.preventDefault();
        // Get some values from elements on the page:
        var $form = $("#updatePrice"),
            size = $form.find("#sizejquery").val(),
            paper = $form.find("#paperjquery").val(),
            quantity = $form.find("#quantityjquery")
            .val(),
            url = $form.attr("action");
        // Send the data using post
        var posting = $.post(url, {
            size: size,
            paper: paper,
            quantity: quantity
        });
        // Put the results in a div
        posting.done(function(data) {
            var content = $(data).find(
                "#content");
            $("#price").empty().append(
                content);
        });
    });
    $(window).on("load", function() {
        $formBtn.trigger("click");
    });
    $("#updatePrice").on("change", ".form-control", function() {
        $formBtn.trigger("click");
    });
});

Answer 3

在 jquery 中的文档就绪 api 中调用该方法为

$(document).ready(function(){
// your logic

});

就您的代码而言

function fetchPrice(){
    // Stop form from submitting normally
    event.preventDefault();

    // Get some values from elements on the page:
    var $form = $(this),
      size = $form.find("#sizejquery").val(),
      paper = $form.find("#paperjquery").val(),
      quantity = $form.find("#quantityjquery").val(),
      url = $form.attr("action");

    // Send the data using post
    var posting = $.post(url, {
      size: size,
      paper: paper,
      quantity: quantity
    });

    // Put the results in a div
    posting.done(function(data) {
      var content = $(data).find("#content");
      $("#price").empty().append(content);
    });
}

$(document).ready(function(){
    fetchPrice(); // calls as the page load complete
});

希望对您有所帮助..........