如何自动运行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

是的，请尝试以下方法：

$(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 2

您可以在数量下拉列表中注册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 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
});

希望它有所帮助..........