Question

我有一个包含多个表单元素的JSP页面（textbox，drpdown菜单，textarea等），我想点击一下按钮清除它们，我写了下面的JavaScript代码：

function clearForm(frm){
    alert("in clear form");
     $("textarea").val("");
     document.getElementById("City").selectedIndex = 0;
     document.getElementById('STREET_NAME').value="";
     return false;
    }

JSP代码：

<form action="<%=request.getContextPath()%>/insertData.htm" id="myForm">
//here i have form elemetns like textbox, dropdown meny,text area etc.

  <button name="clearButton" id="clearButton" onclick="return clearForm(this.form);">CLEAR</button> 
  <button name="buttonName" type="submit" id="submitButton" value="submit">SAVE</button>

</form>

当我点击CLEAR按钮时，它转到JavaScript clearForm(frm)函数，清除字段，然后表单被提交，控件将转到控制器类（Spring控制器）。我哪里出错了，表格不应该提交。

- 编辑 -

当我使用下面的代码时，只有textarea字段被清除。

function clearForm(frm){

     $("textarea").val("");
     document.getElementById("City").selectedIndex = 0;
     document.getElementById('STREET_NAME').value="";
     return false;
    }
<button type="button" style="font-size:9px; height:20px;text-transform:uppercase;" name="clearButton" id="clearButton" onclick="return clearForm()">CLEAR</button>

请在jsfiddle

中找到相同内容

Answer 1

According to the MDN，未指定type属性，<button>元素默认为type="submit"。

将type="reset"添加到您的按钮，您无需任何JavaScript即可清除表单。

<button type="reset"  name="clearButton" id="clearButton">CLEAR</button>

否则，请添加type="button" ...

<button type="button" name="clearButton" id="clearButton" onclick="return false;">CLEAR</button>

DEMO：http://jsfiddle.net/7TBW2/2/

修改

根据OP关于his jsFiddle无效的原因的评论。

OP的HTML：

<input type="text" name="relName" value="REL100" required="true" /> <textarea name="NOTES" cols="50" rows="4" />aklsdjj</textarea>

OP的JavaScript：

document.getElementById('relName').value = ""; $("textarea").val("");

您有很多错误和不一致之处：

1）document.getElementById('relName')正在寻找id属性，但您在此id上没有input，只有name属性。

添加id：

<input type="text" name="relName" id="relName" value="REL100" required="true" />

2）$("textarea")是一个jQuery选择器，但你的jsFiddle中没有包含任何jQuery库。不知道为什么你会首先将jQuery选择器和getElementById()混合在一起，所以我假设你并没有真正使用jQuery。

使用jQuery或不使用jQuery，只需保持一致：

document.getElementById("NOTES").value = "";

3）您的HTML在textarea上无效。由于textarea是一个容器元素，因此开始标记内不需要“自动关闭”斜杠。

应该是：

<textarea name="NOTES" id="NOTES" cols="50" rows="4">aklsdjj</textarea>

已修复：http://jsfiddle.net/z9uGv/2/

表格在清除时提交

JSP代码：

- 编辑 -

1 个答案: