Hello Readers, if you are developing the html form with two or more submit buttons then in this blog you can learn it. On certains conditions a html form should have multiple submit buttons and both should redirect user to their individual actions.
Now lets consider the example a html form having the two submit buttons ie, Save and Preview which redirect user to save.php and preview.php respectively. By using the Jquery let's start working it out.
Create html file write the code the html form , it;s code will go like this:-
<html>
<head>
<title>Tutorial for multiple submit buttons</title>
<script type='text/javascript' src="jquery-1.5.2.min.js'></script>
</head>
<body>
<h2>Here's my html form:</h2>
<form action=''id="form1" method='post' name='testing'>
<input type='text' name='enter your name' va />
<input type='submit' name='save' value='save' />
<input type='submit' name='pre' value='prev' />
<input type="submit" id="button3" value="Submit3" name="button3" />
</form>
</body>
</html>
Now on the above code you have seen the form is coded with it's actions is set null. Here leave it blank and after clicking the submit button it will be set dynamically. Consider the two submit buttons name save and pre. We will set the action of the form from the jquery and it's code will go like this:-
// prevent enter key on some elements to prevent to submit the form
function stopRKey(evt) {
evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
var alloved_enter_on_type = ['textarea'];
if ((evt.keyCode == 13) && ((node.id == "") || ($.inArray(node.type, alloved_enter_on_type) < 0))) {
return false;
}
}
$(document).ready(function() {
document.onkeypress = stopRKey;
// catch the id of submit button and store-it to the form
$("form").each(function() {
var that = $(this);
// define context and reference
/* for each of the submit-inputs - in each of the forms on
the page - assign click and keypress event */
$("input:submit,button", that).bind("click keypress", function(e) {
// store the id of the submit-input on it's enclosing form
that.data("callerid", this.id);
});
});
$("#form1").submit(function(e) {
var origin_id = $(e.target).data("callerid");
alert(origin_id);
e.preventDefault();
});
});
This code worked fine for me and you can try this.
0 Comment(s)