Question

我在页面上有一个简单的表单

<div class="data-form">
    <p>Are you hungry?</p>
    <form>
        <label class="radio-inline"><input type="radio" name="optradio" value="yes">Yes</label>
        <label class="radio-inline"><input type="radio" name="optradio" value="no">No</label>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <a id="yes" href="https://someurl.php?ans=yes"></a>
    <a id="no" href="https://someurl.php?ans=no"></a>
</div>

当用户选择一个选项然后单击“提交”时，我需要删除该表单并将其替换为“谢谢”。为此，我执行以下操作

$("form").submit(function (e) {
    e.preventDefault();
    var radioValue = $("input[name='optradio']:checked").val();
    if(radioValue == "yes") {
        $('.data-form').html('');
        $('.data-form').html('<p>Thank you</p>');
    }
    if(radioValue=="no") {
        $('.data-form').html('');
        $('.data-form').html('<p>Thank you</p>');
    }
});

这是我想弄清楚的部分。在表单中，您可以看到有两个锚标记，一个用于yes，一个用于no。现在在我的JQuery中，如果他们选择了Yes，我可以做这样的事情

$('a#yes')[0].click();

现在，这将重新加载网址

https://someurl.php?ans=yes

这个url触发很重要，因为我没有对他们提交的数据做任何事情（我没有将它存储在数据库或类似的东西中）。相反，我正在使用Apache日志。在Apache日志中，如果我看到上面的url已被触发，我知道有人点击了Yes，反之亦然。由于我正在使用一些外部程序，我必须这样做。

现在一切正常，我可以在日志中看到响应。但是，触发click事件的问题是它重新加载页面。

我想知道的是，是否有可能以某种方式触发此点击事件而不重新加载页面？虽然仍能在我的Apache日志中看到响应吗？

我正在考虑使用Ajax以某种方式实现这一点，但我不是在任何地方发布我的数据，所以不确定是否可能？关于我所欣赏的选项的任何信息。

由于

Answer 1

我强烈建议您使用AJAX调用来提交表单。您将获得额外的灵活性，URL不必更改。表单将提交给您提供的URL（您上面的那个），该部分将更改为所需的措辞。另一项更改是更改类型=＆＃34;提交＆＃34;输入按钮。这不会在点击时提交表格（并且不需要额外的工作来停止提交）。

更新了小提琴，包括单选按钮示例和锚标签，如上所述。更新URL的URL。这是使用JQuery运行。

HTML：

<div class="data-form">
  <p>Are you hungry?</p>
  <form>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="yes">Yes</label>
    <label class="radio-inline">
      <input type="radio" name="optradio" value="no">No</label>
    <button type="button" class="submitButton1 btn btn-primary">Submit</button>
  </form>
  <a id="areYouHungryOption" data-value="yes">Yes</a>
  <a id="areYouHungryOption" data-value="no">No</a>
</div>

使用Javascript：

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

  if ($('input[name="optradio"]:checked').size() > 0) {
    submitData($('input[name="optradio"]:checked').val());
  } else {
    alert('Please select an option!');
  }
})

$("a#areYouHungryOption").click(function() {
  submitData($(this).data("value"));
})

var submitData = function(answer) {
  $.ajax({

      method: "GET",
      url: "/echo/html/",
      data: {
        ans: $('input[name="optradio"]:checked').val()
      }
    })
    .done(function(msg) {
      $('.data-form').html('Thanks for your feedback!');
    });
}

请参阅以下JSFiddle项目中的示例

https://jsfiddle.net/bgerhards/3y0vwf2m/

Answer 2

尝试这样的事情：

var answer; // Set a variable in the main scope.

$('a#yes')[0].click(function(e) {
    e.preventDefault(); // Don't go to a new page.
    answer = 'yes'; // Set the answer variable in the main scope.
});

现在，您可以在脚本中的其他位置使用此值。

JQuery - 触发单击事件而不重新加载页面

2 个答案: