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

我有一个HTML表单，我用一些javascript改变动作后提交。两个不同的按钮可以进行提交。使用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>

这是事件的预期顺序吗？

来源

2013-04-30 P.Dow

这些按钮已经自动提交表单 - 您为什么手动提交第二次？只要改变行动，让它走 – Ian 2013-04-30 20:40:58

或更好。为每个按钮命名一个名称并提交给Actio.php，让服务器看到按钮的名称 – mplungjan 2013-04-30 20:50:39

@mplungjan每个按钮代表一个学生ID。如果我在窗体上有20-30个按钮，并且用户单击其中一个按钮，那么只有该按钮的值传递给服务器？ – 2013-04-30 22:24:06

更好的解决方案是给按钮的名称为每个并提交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>

来源

2013-04-30 20:35:29 mplungjan

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

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

看到http://jsfiddle.net/yD2Uu/

来源

2013-04-30 20:41:44

return SubmitForm（...） - 这可能会一起取消提交 – mplungjan 2013-04-30 20:49:36

我在质疑为什么动作的更改会提交表单而不是继续使用下一个javascript语句。我看到的例子显示改变了提交之后的操作。看来改变动作之后的任何事情都不会被执行。 – 2013-04-30 22:18:50

我试着添加type =按钮，但它没有区别。 javascript函数中的第二条警告不会执行;第一个警报是。 – 2013-04-30 22:36:54

正如其他人已经指出的形式将提交无论如何，如果你不CANCLE事件。我想为您的问题建议一个无JavaScript的解决方案。

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

虽然它不支持IE < 10。但你仍然可以使用，然后你的函数作为后备，只是有点更优雅;）

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

来源

2013-04-30 21:02:01 zeroflagL

请记住，我给出的示例是简化代码来说明问题。实际的代码实际上只有1个按钮，由PHP生成以将“class”或“student”传递给javascript函数。 javascript函数使用该参数根据其他表单输入值确定要执行的几个操作中的哪一个。 – 2013-04-30 22:31:23

我明白了。但是这种评估通常由服务器端框架来处理。 – zeroflagL 2013-04-30 22:50:01

好点;我将研究如何让PHP脚本有条件地执行另一个PHP脚本。 – 2013-05-01 20:18:42

由于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"; 
}

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

来源

2013-05-01 20:24:50

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

回答

相关问题