jQuery-觸發點擊事件而無需重新加載頁面

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。 表格將提交到您提供的網址（上面的網址），該部分將更改為所需的字詞。 另一個更改將是將type =“ submit”輸入更改為按鈕。 這將不會在單擊時提交表單（並且不需要其他解決方法即可停止提交）。

更新了Fiddle，使其包含單選按鈕示例和錨標簽，如上所述。 將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.
});

現在，您可以在腳本的其他位置使用此值。