Question

我有一个HTML表单，我在用一些javascript更改操作后提交。两个不同的按钮可以提交。

有趣的是，我正在尝试调试它并在更改操作后和提交表单之前插入警报。提交表单时不会显示警报。为了确保它实际执行javascript，我在更改操作之前添加了警报。该警报显示;更改动作后的警报不会。

<form name='FormSelect' method='post' action='Undefined'>
...
<button onclick="SubmitForm('class')">Submit</button>
...
<button onclick="SubmitForm('student')">Submit</button>
...
</form>

<script type="text/javascript">
function SubmitForm(target){
    alert("Action 1: " + document.FormSelect.action);
    if (target=="class") {
        document.FormSelect.action = "ClassAction.php";
    } else {
        document.FormSelect.action = "StudentAction.php";
    }
    alert("Action 2: " + document.FormSelect.action);
 // document.FormSelect.submit();
    }
</script>

这是预期的事件顺序吗？

Answer 1

放置在表单元素内的任何按钮都将导致提交操作。为了防止这种情况，您可以向按钮元素添加type =“button”，或者让您提交回调返回false;

<button type="button" onclick="SubmitForm('class')">Submit</button

请参阅http://jsfiddle.net/yD2Uu/

Answer 2

更好的解决方案是给每个按钮一个名称并提交给Action.php并让服务器获取指定按钮的值

$student = filter_var($_POST["student"], FILTER_SANITIZE_STRING); // php5 cleaning

当你有

时

<form method="post" action="Actions.php">
  <input type="submit" name="student" value="John Doe" />
  <input type="submit" name="student" value="Jane Doe" />
  <input type="submit" name="student" value="Whatever Doe" />
</form>

否则，如果你必须

试试这个

<form method='post' action='Undefined'>
...
<input type="button" value="Class" onclick="SubmitForm(this)" />
...
<input type="button" value="Student" onclick="SubmitForm(this)"/>
...
</form>

<script type="text/javascript">
var actions = {
  "class":"ClassAction.php",
  "student":"StudentAction.php"
}

function SubmitForm(button){
  button.form.action = actions[button.value];
  button.form.submit();
}
</script>

Answer 3

正如其他人已经指出的那样，无论如何你都不会提交表格。我想为您的问题建议一个免费的JavaScript解决方案。

<button formaction="ClassAction.php">Submit</button>
<button formaction="StudentAction.php">Submit</button>

在IE中不支持它＆lt; 10虽然。但你仍然可以使用你的功能作为后备，只是更优雅;）

function SubmitForm(button){
  button.form.action = button.formaction;
}

Answer 4

感谢Yauhen Vasileusky的例子，我开始删除第一个和第一个之间的代码。第二次警报，发现问题似乎是以下IF声明：

if (document.FormSelect.FormName.value.substr(0,19)=="ObservationRequest_" || document.FormSelect.FormName.value=="StudentReg2013rx" || document.FormSelect.FormName.value=="Toddler Update Form v3rx")
{
document.FormSelect.action = "GenerateXDP.php";
}

当我删除它时，会显示两个警报。所以我的问题的答案是改变行动不提交表格;我的代码中出现了一些其他错误，使其看起来好像就是这种情况。

使用javascript修改表单操作提交表单而不进行提交

4 个答案: