使用按钮将表单连接到 jQuery 帖子答案

【问题标题】：Connect form to jQuery post with a button使用按钮将表单连接到 jQuery 帖子
【发布时间】：2020-07-19 14:23:18
【问题描述】：

我有这段代码，我用它在我的网站上实时显示一些结果。此表单在自动填写字段后起作用。我想用一个按钮来做这件事。这是我的代码：

function getStates() {
  var couplername = $('#couplername').val();

  $.post("http://memarooneh.com/wp-content/themes/publisher/includes/subscribe.php", {
    couplername: couplername
  }, function(data) {
    $("#order_price").show();
    $("#order_price").html(data);
  });
}

【问题讨论】：

你现在怎么打电话给getStates()？只需在您需要的任何按钮上的单击事件下调用它
@RoryMcCrossan 它会在<div id="order_price"></div> 中显示，无需任何点击
某些东西有来触发这个功能。
你能分享一下这个 JS sn-p 背后的 HTML 吗？而且你应该更好地描述你想要实现的场景，看起来你有点困惑。

标签： jquery forms post live

【解决方案1】：

通过您创建的函数发布 AJAX 请求的简单方法是使用 onClick 处理程序，如下所示

<button onclick="getStates()" id="subscribe_btn">Subscribe</button>

【讨论】：

【解决方案2】：

我把我的代码改成了这个，但还是不行@RoryMcCrossan

<script>

function getStates() {

  var couplername = $('#couplername').val();
  var couplercount = $('#couplercount').val();
  var couplerlathing = $('#couplerlathing').val();
  var couplerwhois = $('#couplerwhois').val();
  var couplerdetailsname = $('#couplerdetailsname').val();
  var couplerdetailsid = $('#couplerdetailsid').val();
  var couplerdetailsnumber = $('#couplerdetailsnumber').val();

  $( "#target" ).click(function() {
    $.post("http://memarooneh.com/wp-content/themes/publisher/includes/subscribe.php", { couplername:couplername, couplercount:couplercount, couplerlathing:couplerlathing, couplerwhois:couplerwhois, couplerdetailsname:couplerdetailsname, couplerdetailsid:couplerdetailsid, couplerdetailsnumber:couplerdetailsnumber });
  });

  function(data) {
    $("#order_price").show();
    $("#order_price").html(data);
  };

}

</script>

【讨论】：

【解决方案3】：

我想这就是你需要的。

$(document).ready(function() {
    $( "#target" ).click(getStates);
});

function getStates() {

  var couplername = $('#couplername').val();
  var couplercount = $('#couplercount').val();
  var couplerlathing = $('#couplerlathing').val();
  var couplerwhois = $('#couplerwhois').val();
  var couplerdetailsname = $('#couplerdetailsname').val();
  var couplerdetailsid = $('#couplerdetailsid').val();
  var couplerdetailsnumber = $('#couplerdetailsnumber').val();

  $.post(
     "http://memarooneh.com/wp-content/themes/publisher/includes/subscribe.php", 
     { couplername:couplername, couplercount:couplercount, couplerlathing:couplerlathing, couplerwhois:couplerwhois, couplerdetailsname:couplerdetailsname, couplerdetailsid:couplerdetailsid, couplerdetailsnumber:couplerdetailsnumber },
     function(data) {
       $("#order_price").show();
       $("#order_price").html(data);
     });
}

【讨论】：

【解决方案4】：

我修复了我的代码，但现在我有新问题

function getStates() {

  var email = $('#email').val();

  $( ".submit" ).click(function() {

    $.post("<?php echo get_template_directory_uri(); ?>/download-func.php", { email:email },

    function(data) {
      $("#order_price").show();
      $("#order_price").html(data);
    });

  });

}

现在我的代码可以运行，但问题在于结果的显示。你可以在这个链接上看到

http://memarooneh.com/downloads2/ 在文本字段中写一些东西，然后点击按钮

【讨论】：

首先：您不必在每次有更新时都在线程中添加答案，您应该编辑您的第一个帖子。第二：StackOverflow 上的人并不是要修复你的作品的人。