Question

我有一个带有按钮和一些复选框的 HTML 表单。复选框的值通过 GET 参数传递到下一页。表单提交的目标是一个空白页。

<form id="myForm" method="get" action="launch.php" target="_blank">
<input type="submit">Launch</input>
<input type="checkbox" class="checkbox" name="reset" /> Reset
<input type="checkbox" class="checkbox" name="erase" /> Erase
</form>

复选框允许用户在启动网络应用程序之前重置和/或删除文件。由于它们是“危险的”，我希望在使用启动应用程序后自动取消选中它们。这是为了帮助防止用户连续两次意外删除或重置他们的文件。

我向按钮添加了一个 onClick 操作，该操作使用 jQuery 取消选中复选框。但是，它们在提交表单之前未被选中，因此这些框的值不包含在 GET 中。

<input type="submit" onClick="uncheckBoxes();" />
...
<script>
function uncheckBoxes() {
    $(".checkbox").prop("checked", false);
}
</script>

我想我想做两件事之一。要么：

使用 $("#myForm").submit() 函数取消选中复选框，然后打开一个新窗口。但是，我必须编写代码来构造 URL，这不是很可扩展（如果我想添加一个新复选框怎么办？）并且容易出错。或者，
以某种方式挂钩到正常的表单提交过程，并在新页面/标签打开后执行 uncheckBoxes 函数。由于带有表单的页面/选项卡保持打开状态，我仍然可以运行其他 JS 代码。

对此有哪些解决方案？

Answer 1

$('#submit-button').click(function() {
  var url = "launch.php?";
  $('input[type="checkbox"]').each(function() {
    url = url + this.name + "=" + this.checked + "&"
    this.checked = false;
  });
  url = url.slice(0, -1)
  console.log(url);
  //wondow.open(url, '_blank');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<label>Option 1</label><input name="option1" type="checkbox">
<br>
<label>Option 2</label><input name="option2" type="checkbox">

<button id="submit-button">Submit</button>

这是一种可扩展的方式！

Answer 2

如果您只是想防止两次点击，您可以执行以下操作：-

<form id="myForm" method="get" action="launch.php" target="_blank">
<input type="submit" id ="button" onclick = "Clicked(event)" value="Launch">
<input type ="reset" onclick ="button.style.display ='inline'">

<input type="checkbox" class="checkbox" name="reset" /> Reset
<input type="checkbox" class="checkbox" name="erase" /> Erase
</form>

<script>
var button = document.getElementById("button");
function Clicked(e) {
    e.preventDefault();
    button.style.display = 'none';
    document.querySelector("#myForm").submit();
}
</script>

提交表单后清除复选框

2 个答案: