更改 Twitter Bootstrap 中提交/保存按钮的按钮标签和操作?在表单未保存时执行此操作


Change button label & action for submit/save button in Twitter Bootstrap? Do it when form is unsaved?

我有一个简单的非Ajax表单,它提供了序列化字段,用于跨多个记录保存一大堆数据,即具有多个行项目的报价,并且每行上的每个字段都是可编辑的。

表单需要在提交之前保存,

如果表单被编辑,我希望表单的提交按钮说保存更改(通过我的准控制器的 URL 完成(,否则说提交给客户,如果未编辑。

我正在研究 AJAX,但我想知道这种情况是否矫枉过正。

任何帮助,不胜感激。

AJAX 是矫枉过正的,如果你只想改变按钮上的措辞。如果单击"保存更改"正常提交表单(然后使用默认的"提交给客户"再次加载表单?(,那么您将不需要它。

你想要的是普通的javascript。将 onchange 事件处理程序绑定到更改按钮文本的每个字段。它还可以更改表单的其他方面(例如隐藏的"data_changed"字段(,以便控制器知道保存数据而不是提交数据。

如果未发生任何更改,该按钮将保留为"提交给客户端"。

我同意这个答案吗?您是否需要在不提交表单的情况下"保存更改"?或者您想了解有关如何实现这一目标的更多详细信息吗?

编辑:添加了示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Save vs Submit Example</title>
<script type="text/javascript">
onchange_handler = function ( event ) {
    var form_modified = document.getElementById("form_modified");
    var form_submit = document.getElementById("form_submit");
    form_modified.value = "true";
    form_submit.value = "Save Changes";
}
</script>
</head>
<body>
<form method="post">
<input name="quote_number" type="text" onchange="onchange_handler()" />
<input name="quote_date" type="text" onchange="onchange_handler()" />

<input name="line_number" type="text" onchange="onchange_handler()" />
<input name="line_product" type="text" onchange="onchange_handler()" />
<input name="line_quantity" type="text" onchange="onchange_handler()" />
<input name="form_modified" id="form_modified" type="hidden" value="false" />
<input type="submit" id="form_submit" value="Submit to Client" />
</form>
</body>
</html>