如何在点击时执行功能和更改页面

Question

所以我有一个提交表单的按钮。还有一个 JS 函数，将用户输入格式化并保存在 localStorage 中，以便显示在确认登录页面上。

如果我提交表单然后手动进入确认页面，该功能可以完美运行。但是，我不能让按钮同时执行功能和进入确认页面。

<button id="submitForm" onclick="getFormInputValues(); window.location.href='/common/confirmation.html'">Make Reservation</button>

出于某种原因，我不明白。当我单击 Make Reservation 按钮时，它会执行该功能，但不会更改页面。如果我再次单击该按钮，它会进入确认页面，但不会执行该功能。如果我在单击按钮之前在字段中输入文本，它就永远不会起作用。只有在函数无法执行时才会换页。

提前感谢您的帮助。

/* Booking Page */
var nameField = document.getElementById("nameInput");
var emailField = document.getElementById("emailInput");
var dateDayField = document.getElementById("day");
var dateMonthField = document.getElementById("month");
var dateYearField = document.getElementById("year");;
var timeHourField = document.getElementById("hour");
var timeMinuteField = document.getElementById("minute");
var timeAmPmField = document.getElementById("am-pm");
var numberOfPeopleField = document.getElementById("numberOfPeople");

/* Variables for local storage */
var storedName = localStorage.getItem("storedName");
var storedEmail = localStorage.getItem("storedEmail");
var storedDate = localStorage.getItem("storedDate");
var storedTime = localStorage.getItem("storedTime");
var storedNumberOfPeople = localStorage.getItem("storedNumberOfPeople");

/* Functions */
function getFormInputValues() {
  /* Name */
  nameFieldUserInput = nameField.value;
  localStorage.setItem("storedName", nameFieldUserInput);
  /* Email */
  emailFieldUserInput = emailField.value;
  localStorage.setItem("storedEmail", emailFieldUserInput);
  /* Date */
  dateUserInput = dateMonthField.value + "/" + dateDayField.value + "/" + dateYearField.value;
  localStorage.setItem("storedDate", dateUserInput)
  /* Time */
  timeUserInput = timeHourField.value + ":" + timeMinuteField.value + " " + timeAmPmField.value;
  localStorage.setItem("storedTime", timeUserInput);
  /* Guests Number */
  numberOfPeopleUserInput = numberOfPeopleField.value;
  localStorage.setItem("storedNumberOfPeople", numberOfPeopleUserInput);
};

function displayFormValues() {
  document.getElementById("nameDisplay").innerHTML = storedName;
  document.getElementById("emailDisplay").innerHTML = storedEmail;
  document.getElementById("dateDisplay").innerHTML = storedDate;
  document.getElementById("timeDisplay").innerHTML = storedTime;
  document.getElementById("numberOfPeopleDisplay").innerHTML = storedNumberOfPeople;
};

Answer 1

您不应为submit 按钮设置click 事件处理程序，因为当单击submit 按钮时，它会自动为与该按钮关联的form 调用submit 事件.

您应该为form 设置submit event 处理程序。 到确认页面的导航由设置为form 元素的action 方法的URL 自动处理价值。

// Set up a "submit" event on the <form>
document.querySelector("form").addEventListener("submit", function(event){
   // Write to localStorage (won't work here in SO)
   localStorage.setItem("name", document.querySelector("input"));
});

<form action="https://www.example.com" method="post">
  Name: <input>

  <button>Submit</button>
</form>

Answer 2

如果您使用表单来获取数据，那么是的，那么您应该使用输入类型为提交的表单，然后构建 javascript 以向提交添加事件侦听器，并在单击按钮后捕获数据。

我在另一个 StackOverflow 问题上找到了您的答案...这篇文章将显示在您的 HTML 页面的输入标签中使用的 onClick 代码。

How to execute a function and change pages onclick

我将输入标签中的链接更新为 google.com 并且它有效。我还能够在浏览器中使用 console.log 名称来确认您可以从表单中提取数据。

这是我使用的代码...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form target="_blank" action="https://website.com/action.php" method="POST">
    <input type="text" name="fullname" id="name"/>
    <input type="text" name="city"/>
    <input onclick="window.location.href = 'https://google.com';" type="submit" value="Submit request" />
  </form>
  <script>
      document.querySelector('form').addEventListener('submit', function(){
        const name = document.getElementById('name')
        console.log(name.value);
      } )
  </script>
</body>
</html>

确保在测试此快速代码时，在浏览器中打开了检查源选项以查看控制台。在第一个输入区域中输入一个名称，然后在您点击提交后，该值将立即出现在控制台中，但速度非常快，因为当您点击提交或点击回车时，页面将立即转到谷歌。