使用 javascript 将数据传递到另一个 URL答案

【问题标题】：Pass data to another URL using javascript使用 javascript 将数据传递到另一个 URL
【发布时间】：2020-10-03 18:53:44
【问题描述】：

我想先检测是否至少有十个文本框被填满，然后将响应数据传递给下一个 URL。

我通过使用 myfunction 指定的<input type="button" value="CONTINUE" onclick='myfunction();'> 实现了第一步

function myfunction() {
  if (response<3) {
    location.href = "URL";
  }
  else {
    alert("Please give at least three responses.");
  }
}

但是，我不知道如何进行第二步。

当输入类型为“提交”时，我曾经使用<form method="POST" action="URL">。但是由于现在我使用“按钮”来让 onclick 可以合并警报，我可以做些什么来将数据传递到另一个 URL？

以下是我拥有的所有代码：

<html>
<body>      
<div align="center">

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 1: </td>
       <td><textarea rows="3" name="th_1" cols="60" id="th_1"></textarea></td>
       </tr>
    </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 2: </td>
      <td><textarea rows="3" name="th_2" cols="60"id="th_2"></textarea></td>
       </tr>
      </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 3: </td>
     <td><textarea rows="3" name="th_3" cols="60"id="th_3"></textarea></td>
     </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 4: </td>
     <td><textarea rows="3" name="th_4" cols="60"id="th_4"></textarea></td>
     </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 5: </td>
      <td><textarea rows="3" name="th_5" cols="60"id="th_5"></textarea></td>
      </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 6: </td>
       <td><textarea rows="3" name="th_6" cols="60" id="th_6"></textarea></td>
       </tr>
    </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 7: </td>
       <td><textarea rows="3" name="th_7" cols="60"id="th_7"></textarea></td>
       </tr>
    </table>


  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 8: </td>
       <td><textarea rows="3" name="th_8" cols="60"id="th_8"></textarea></td>
       </tr>
   </table>

  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 9: </td>
     <td><textarea rows="3" name="th_9" cols="60"id="th_9"></textarea></td>
     </tr>
   </table>
  <table border="0" cellpadding="3" cellspacing="0">
     <tr height=40>
     <td>Thought 10: </td>
     <td><textarea rows="3" name="th_10" cols="60"id="th_10"></textarea></td>
     </tr>
   </table>
</div>


<p align="center"><input type="button" value="CONTINUE" onclick='checknumber();'></p>

<script>

function formHasAtLeast(answersCount) {
  let count = 0;
  for (let i = 1; i <= 10; i++) {
    const textBoxValue = document.getElementById('th_' + i).value;
    if (textBoxValue.trim() !== '') count++;
    if (count === answersCount) return true; 
  }
  return false;
}

function checknumber() {
  const minAnswers = 3;
  if (formHasAtLeast(minAnswers)) {
    location.href='URL';
  }
  else {
    alert("Please enter at least 3 thoughts before you can continue.");
  }
}

</script>
</body>
</html>

【问题讨论】：

重新阅读您的问题我发现我忽略了您所说的有关从代码中删除 <form> 构造的部分内容。请参阅我的更新答案。

标签： javascript html

【解决方案1】：

首先您必须在表单中添加一个 ID，例如 <form method="POST" id="myForm" action="URL"> 现在您可以通过以下代码来完成：

function myfunction() {
  if (response<3) {
    document.getElementById("myForm").submit();
  }
  else {
    alert("Please give at least three responses.");
  }
}

【讨论】：

对于每个文本框我都有一个 id，所以总共有 10 个 id。我通过为整个表单添加一个 id 来尝试您的代码，但它不起作用。我想知道是不是因为我总共有 10 个 id。
你能告诉我response 是什么吗？哪里定义的？您可以将表单 html 添加到您的问题中吗？
谢谢我的朋友......你的代码中没有form标签！
所以必须要有一个表单标签才能将数据传递到下一个URL？实际上我添加了一个表单标签，但没有工作。
如果你想 POST 数据到一个 url，你不应该删除表单标签......只有当你想通过 GET 方法传递数据时，你可以通过 window.location ...

【解决方案2】：

如果您的输入位于标签内，并且表单具有 id 属性，例如：

<form id="myForm" ...></form>

您可以提交表单

document.getElementById('theForm').submit();

【讨论】：

【解决方案3】：

这称为表单验证，它通过中断提交过程、测试用户输入的值并返回true （继续并提交） 或false （取消提交并将控制权返回给用户，通常伴随着错误消息）。

最简单的方法是将onSubmit="" 属性添加到您的<form> 标签：

<form action="respond.php" method="post" onsubmit="return validateData()">

在validateData() 函数中（可以任意命名），您可以检查每个字段的值，如果缺少某些内容，可以检查return false，或者return true 以继续提交表单。

这里有一些文章会更详细地解释事情：

https://www.formget.com/javascript-onsubmit/

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

请注意，您的代码中不一定非要有<form> 标记。重新阅读您的问题，我注意到您将<form> 结构替换为普通的<button>。在这种情况下，您可以使用 AJAX 将数据提交到下一页。事实上，这在今天更为常见，并且还允许您将所有内容保存在一个页面上，运行 javascript 以在应用程序流程的每个阶段验证用户输入。

这是一篇关于 AJAX 与表单的文章。 AJAX vs Form Submission

另一方面，如果您只想检测用户点击按钮，然后运行一些 javascript 来抓取用户输入的数据，对其进行验证，然后更改页面内容...您可以这样做使用简单的事件处理程序：

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

【讨论】：