Separate submit buttons on forms which tell form “action” to post to different files?
Question
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
3 answers
solution1
3 2011-12-19 09:40:51
Give the two submit buttons the same names but different values. You can check the value in your php file.
Example
<form action="something.php" method="post">
<input type="submit" name="submit" value="one">
<input type="submit" name="submit" value="two">
</form>
something.php
switch( $_POST['submit'] ) {
case 'one':
case 'two':
}
solution2
2 2011-12-19 09:40:02
You could do this without javascript. Just give your submit button names with different values:
<button type="submit" name="btn" value="addItem">Add item</button>
<button type="submit" name="btn" value="finish">Finished</button>
Now inside the script you are posting the form to you can determine which button was clicked by examining the $_POST['btn'] value and take the respective actions.
solution3
2 ACCPTED 2011-12-19 09:41:18
You can use JavaScript to modify the form based on which button is clicked, or you can check server side (ie using PHP) which button was clicked and act accordingly.
A submit-button is a form-input just like any other, ie you can give it a name and a value, which you can check for server side.
On client side (ie 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.