Question

这是我的表单代码：

<form id="sizePicker">
    Grid Height:
    <input type="number" id="inputHeight" name="height" min="1" value="1">
    Grid Width:
    <input type="number" id="inputWidth" name="width" min="1" value="1">
    <input type="submit">
</form>

我需要使用单独的JS文件验证这些输入：

function getGridValues() {                                                                                                                                                
const inputHeight = document.getElementById('inputHeight').value;
const inputWidth = document.getElementById('inputWidth').value;
const colorPicker = document.getElementById('colorPicker').value;
console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: ${colorPicker}`);
}

document.getElementById('submit').addEventListener("click", getGridValues());

问题是每次我点击提交它会重新加载页面并发送默认值。如果我在不提交的情况下更改值，我就可以使用JS控制台检索这些新值。

我已经对这个问题进行了很多研究，但是所有内容都提出了jQuery / Ajax解决方案，但我只是允许使用HTML / CSS / JS。

有什么问题？我该如何解决？

先谢谢你。

Answer 1

使用submit阻止event.preventDefault的默认行为。然后使用ajax提交表单值。

同样在addEventListener中附加事件时，您不需要立即调用getGridValues，因此请避免在函数名后面加()

function getGridValues(e) {
  e.preventDefault();
  const inputHeight = document.getElementById('inputHeight').value;
  const inputWidth = document.getElementById('inputWidth').value;
  console.log(`Height: ${inputHeight}, Width: ${inputWidth}`);

  // Here use ajax to submit the value
}

document.getElementById('submit').addEventListener("click", getGridValues);

<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWidth" name="width" min="1" value="1">
  <input type="submit" id="submit">
</form>

Answer 2

您可以使用preventDefault

function getGridValues(event) {        
     event.preventDefault();                                                                                                                                        
     const inputHeight = document.getElementById('inputHeight').value;
     const inputWidth = document.getElementById('inputWidth').value;
     const colorPicker = document.getElementById('colorPicker').value;
     console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: ${colorPicker}`);
}

document.getElementById('submit').addEventListener("click", getGridValues);

Answer 3

尝试在代码中进行以下更改。

<input type="button" onclick="return getGridValues();">

，脚本是，

function getGridValues() {                                                                                                                                                
   const inputHeight = document.getElementById('inputHeight').value;
   const inputWidth = document.getElementById('inputWidth').value;
   const colorPicker = document.getElementById('colorPicker').value;
   console.log(`Height: ${inputHeight}, Width: ${inputWidth}, Color: 
   ${colorPicker}`);
   return false;
}

Answer 4

添加event.preventDefault();是一种执行此操作的方法，但如果用户按下＆＃34;输入＆＃34;它就无法停止重新加载页面。而不是点击提交按钮。

在表单中添加action="javascript:void(0);"会阻止两者。

如何在提交

4 个答案: