Question

所以我在我的网站上有这个小小的联系表格，并且假设将一些文本输入到一个空的p标签中，告诉客户它已被提交。它运行正常，它应该做它应该做的，但在IE / Edge中它忽略了所有内容并将单词null输入到p标签中。

你必须原谅我，我还是javascript的新手，但我找不到任何可以解决这个bug的地方。任何帮助将不胜感激。

<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
  <input type="hidden" value="someone@email.com" name="emailTo">
  <fieldset>
  <p id="thanks"></p>
  <legend>Send me a message</legend>
  <div class="contact-info">
   <input placeholder="Name*" type="text" name="name" required>
   <input placeholder="Email*" type="Email" name="email" required>
  </div>
   <textarea placeholder="Message*" name="message" required></textarea>
   <input type="submit" value="Submit" name="submitContact" class="button">
  </fieldset>
</form>
<script>
  function setReturn(){
   localStorage.setItem("thanks", "Your request was sent successfully!");
  }

  document.getElementById("thanks").innerHTML =    localStorage.getItem("thanks");
  localStorage.clear();
</script>

Answer 1

您的问题是，当设置“thanks”元素的innerHTML时，localStorage中的字符串将被取消设置。

然后在提交表单时，设置localStorage项，但未设置“thanks”元素的innerHTML（之前设置为undefined）。

为了确保在提交表单时更新“thanks”元素，您需要包含在提交表单时触发的函数中设置它的行。

function setReturn(){
  localStorage.setItem("thanks", "Your request was sent successfully!");
  document.getElementById("thanks").innerHTML =    localStorage.getItem("thanks");
  localStorage.clear();
}

IE，Edge用'null'替换存储文本

1 个答案: