表单上的单独提交按钮表示“操作”发布到不同的文件？ [英] Separate submit buttons on forms which tell form "action" to post to different files?
问题描述
- 用户选择项目 >
- 用户点击在表单上添加其他项目提交按钮。
- 为自己添加POSTS并重新加载页面，以便用户添加另一项
- 一旦用户添加了多个项目，用户将点击完成提交按钮。
- 另一个文件包含所有累积项目。
我有一种不安的感觉，单凭PHP / HTML无法实现，在表单开始发布数据之前，可能需要使用一些Javascript修改表单动作？
想法和想法？
谢谢
您可以使用JavaScript根据点击哪个按钮来修改表单，或者您可以检查服务器端（即使用PHP）哪个按钮被点击并采取相应的行动。
提交按钮就像任何其他的表单输入一样，也就是说您可以给它一个名称和一个值，您可以检查服务器端。
在客户端（即使用JavaScript），你会绑定一个处理程序到按钮的点击事件，修改表单的action-attribute并将其提交到新地址。
以下是客户端示例：
<！doctype html>
< html>
< head>
< title>表单提交测试< /标题>
< / head>
< body>
< form action =baz.htmlmethod =post>
< input id =bartype =submitclass =buttonvalue =bar.htmlname =/>
< input id =footype =submitclass =buttonvalue =foo.htmlname =/>
< / form>
< script>
//找到DOM中的两个按钮并将它们分配给单独的变量
var barBtn = document.getElementById（'bar'），
fooBtn = document.getElementById（'foo'）;
//按钮的点击处理程序。
//注意！为了使此代码按预期工作，它需要在按钮的上下文中运行
//，否则，this关键字
//将无法正确解析，并且会导致错误
// NB2！此代码还要求按钮的值为
//所需的操作处理程序。通常你可能不会
//执行此操作，但使用按钮的名称/值来查找
//正确的表单操作。
函数modifyAction（e）{
this.form.action = this.value;
}
//将一个事件处理程序绑定到一个对象
//注意！这不是你应该在生产中使用的代码
function bindEvent（target，event，callback）{
if（target.addEventListener）{
target.addEventListener（event，callback，false）;
} else if（target.attachEvent）{
target.attachEvent（'on'+ event，callback）;
}
}
// Delegate创建一个包装闭包，它将
//原始函数的上下文绑定到一个对象，即确保
//当
//返回的函数被调用时，this关键字始终引用相同的对象。
函数delegate（context，method）{
return function（）{
return method.apply（context，arguments）;
}
}
//绑定barBtb的click事件，并使用绑定到barBtn的modifyAction函数处理
//。
// I.e.运行modifyAction函数，使用this关键字
//绑定到barBtn
bindEvent（barBtn，'click'，delegate（barBtn，modifyAction））;
//同上fooBtn
bindEvent（fooBtn，'click'，delegate（fooBtn，modifyAction））;
< / script>
< / body>
< / html>
为了完整起见，下面是一个jQuery示例：
< form action =baz.htmlmethod =post>
< input id =bartype =submitclass =buttonvalue =bar.htmlname =/>
< input id =footype =submitclass =buttonvalue =foo.htmlname =/>
< / form>
< script>
// Jquery事件处理程序自动绑定到
//所选元素，所以使用this是安全的
function modifyAction（e）{
this.form.action = this.value;
}
//在type = submit
$（input [type = submit]）中绑定所有输入的click事件。
< / script>
I have included an additional Submit button within my form which I am going to use like so.
- User selects item
- User hits "Add another item" Submit button on form.
- Form POSTS to itself and reloads the page so user can add another item
- Once user has added several items the user hits "Finished" Submit button.
- The form posts to another file with all the accumulated items.
I have a uneasy feeling that this might not be achievable with PHP/HTML alone and that I might have to use some Javascript to modify the form action before the form starts to POST data?
Thoughts and ideas?
Thanks
You can use JavaScript to modify the form based on which button is clicked, or you can check server side (i.e. using PHP) which button was clicked and act accordingly.
A submit-button is a form-input just like any other, i.e. you can give it a name and a value, which you can check for server side.
On client side (i.e. using JavaScript) you would bind a handler to the button's click-event, modify the form's action-attribute and submit it to the new address.
Here's a client side example:
<!doctype html>
<html>
<head>
<title>Form submit test</title>
</head>
<body>
<form action="baz.html" method="post">
<input id="bar" type="submit" class="button" value="bar.html" name="" />
<input id="foo" type="submit" class="button" value="foo.html" name="" />
</form>
<script>
// Find the two buttons from the DOM and assign them to separate variables
var barBtn = document.getElementById('bar'),
fooBtn = document.getElementById('foo');
// Click-handler for the buttons.
// NB! For this code to work as intended, it needs to run
// in the context of the button, otherwise, the this-keyword
// will not resolve correctly and this will result in an error
// NB2! This code also requires that a button's value will be
// the desired action handler. Usually you would probably not
// do this, but use the button's name/value to lookup the
// correct form action.
function modifyAction(e) {
this.form.action = this.value;
}
// Bind an event handler to an object
// NB! This is not code you should use in production
function bindEvent(target, event, callback) {
if (target.addEventListener) {
target.addEventListener(event, callback, false);
} else if (target.attachEvent) {
target.attachEvent('on' + event, callback);
}
}
// Delegate creates a wrapping closure which binds the
// original function's context to an object, i.e. ensuring
// the this-keyword always refers to the same object when
// the returned function is invoked.
function delegate(context, method) {
return function () {
return method.apply(context, arguments);
}
}
// Bind the click-event of the barBtb, and handle it
// with the modifyAction-function bound to the barBtn.
// I.e. run the modifyAction function, with the this-keyword
// bound to barBtn
bindEvent(barBtn, 'click', delegate(barBtn, modifyAction));
// Same as above for fooBtn
bindEvent(fooBtn, 'click', delegate(fooBtn, modifyAction));
</script>
</body>
</html>
Just for sake of completeness, here's a jQuery-example of the same:
<form action="baz.html" method="post">
<input id="bar" type="submit" class="button" value="bar.html" name="" />
<input id="foo" type="submit" class="button" value="foo.html" name="" />
</form>
<script>
// Jquery event-handlers are automatically bound to
// the element selected, so using "this" is safe
function modifyAction(e) {
this.form.action = this.value;
}
// Bind the click-event on all input with type=submit
$("input[type=submit]").click(modifyAction);
</script>
这篇关于表单上的单独提交按钮表示“操作”发布到不同的文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
