使 HTML 表单提交到不同的地方

Question

希望有人可以帮助解决这个问题。我有一个具有 action 属性的表单。此操作属性使用户能够在提交表单时订阅时事通讯。

我想做的是仅在用户选中允许订阅时事通讯的复选框时才执行该操作。如果未选中该复选框，仍然可以提交表单，但将被重定向到一个单独的 URL，忽略表单的 action 属性。

到目前为止，这就是我所拥有的，我对 javascript 不是很好，所以任何帮助将不胜感激。

$('document').ready(function () {
 $('#wifi-capture-form').submit(function() {
 var newsletterTrue= $(this).attr("data-newsletter-checked");
 var newsletterFalse= $(this).attr("data-newsletter-unchecked");   
 if ($('input.newsletter-checkbox').is(':checked')) {
  $('#wifi-capture-form').attr('action', newsletterTrue);
 else (
  $('#wifi-capture-form').attr('action', newsletterFalse);
 )    
}
});

});

表格是

<form name="wifi-capture-form" id="wifi-capture-form" action="" method="post" class="f24form wifi-capture-form" data-newsletter-checked="https://email.com/t/r/s/dkhywr/" data-newsletter-unchecked="https:www.domain.com/wifi-confirm">

    <label for="fieldName">Name</label><br />
    <input id="fieldName" name="cm-name" class="form-control" type="text" />
    <label for="fieldEmail">Email</label><br/>
    <input id="fieldEmail" class="form-control" name="cm-dkhywr-dkhywr" type="email" required /><br/><br/>

    <input type="checkbox" name="newsletter" class="newsletter-checkbox" id="newsletter" value="Subscribe to newsletter"> Subscribe to our newsletter<br/><br/>

    <button type="submit" class="btn btn-primary">Submit</button>

Answer 1

由于您使用的是 jQuery，因此您可以将 click 事件分配给复选框，如果复选框是 checked/unchecked，该事件将动态更改操作 URL。

Answer 2

您可以通过更改提交时表单的 action 属性 值来实现。语法如下：

$("#wifi-capture-form").attr("action", wifiConfirm);

所以你的新代码必须是这样的：

 $('#wifi-capture-form').submit(function(e) {
  var wifiConfirm = $(this).attr("data-redirect");

  /* if newslwetter checkbox is not checked, then change form action value*/
  if (!$('input.newsletter-checkbox').is(':checked')) {
    $("#wifi-capture-form").attr("action", wifiConfirm);
  } 

  f24("send", "form", "form.#wifi-capture-form");  
});

您可以在 How to change form action based on selection

上查看其他示例

使 HTML 表单提交到不同的地方

Making a HTML form submit to different places

javascript

forms

action

if-statement