Question

我正在使用JavaScript，HTML和jQuery Mobile构建PhoneGap应用程序。

所有HTML都在同一个文件中，分为<div data-role="page">个页面。

多个页面的表单包含一个或多个文本/选择输入和提交按钮。

提交不是传统的表单提交按钮，而是使用onClick的按钮运行可以执行许多操作的JavaScript函数。

我希望表单具有以下功能：

按下按钮并在运行功能后，清除表格。
在某些情况下，该功能应该更改页面。
其中一个输入的输入按钮应提交表格（激活功能）。

我应该使用表单HTML标记吗？如果是这样我应该用什么来行动？如何清除表格？等

Answer 1

您仍然可以使用表单标记，因为它对标记很有用。

确保您的按钮具有属性

type="button"

否则按钮将默认提交表单。

要重置表单：

function resetForm() {
    $('#form').each(function(){
            this.reset();
    });
}

Answer 2

如果您尝试将onClick绑定到输入类型=“提交”，那么您将度过一段美好时光。

不幸的是，即使您在单击该按钮时返回false或e.preventDefault，表单仍会发送提交触发器，因此一旦您的onClick代码完成，它就会提交。

示例：

<form action="woot.php" method="POST">
    <input type="submit" value="submit" onClick="alert('You clicked me! How could you?! It's cool the form will still go to woot.php. return FALSE wont help you either.'); return FALSE;">
</form>

你可能想做什么：

<form action="woot.php" method="POST">
    <input type="submit" value="Submit" onSubmit="alert('You aint goin nowhere!'); return FALSE;">
</form>

你应该做什么：

<form action="woot.php" method="POST">
    <input type="button" value="Button" onClick="alert('Away with you!'); window.location = 'http://www.google.com/';">
    <input type="button" value="Button" onClick="someCoolFunction();">
</form>

Answer 3

我不会使用type="button"，特别是如果您希望在用户按下enter时最有可能提交表单。

使用常规表单<input type="submit">，然后使用JavaScript：

$('form').submit(function(e) {
  // all your form handling here;
  if (your_form_was_validated_and_handled) {
    $('input[type!="submit"]').val('');
  }
  e.preventDefault();
});

通用小提琴：http://jsfiddle.net/

不使用JavaScript中的表单操作来表单提交的最佳方法

3 个答案: