I'm running into a strange issue where Internet Explorer is adding an additional query string parameter that no other browser adds.
The page has a form with auto-submit functionality and a "Reset Filters" button. When a user hits the enter key, it forces the submit. When a user hits enter in Internet Explorer, for some reason the "Reset Filters" operation is selected rather than the submit button.
For example, IE adds this to the query string:
?search=this+is+text&op=Reset+Filters
In all other browsers the same query looks like this:
?search=this+is+text
When I check the $_GET superglobal in PHP, I noticed that op is only being added when I run the application in IE and only when I hit the enter key in the form.
Based on the HTML below, it kind of makes sense that hitting enter would add op to the query string because both the submit button and the reset button are contained within the form. But why would op only get added to IE?
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
...
</form>
Any idea why this might be happening?
UPDATE: One other piece of information that might be important. Because the form is auto-submit, the first submit button is actually hidden. I'm wondering if that's why IE is using the second button as the submit handler.
After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.
My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"
The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none.
I found the answer here:
Multiple submit buttons on HTML form – designate one button as default
My fix was to set the submit button to position: absolute; left: -1000% rather than display:none. I got that solution from #bobince on the linked answer, however, left:-100% did not push it completely off the page for me so I changed it to left:-1000%.
IMHO it seems wrong to be using a submit button do convey some information other than "hey, I've submitted some data". If the user hits enter to submit the form it is reasonable that some browsers would send all the data associated with all the submit buttons.
If you are just resetting the inputs from previous parts of the form you could use:
<button type="reset">
If you do need other input data maybe a checkbox would be more appropriate:
<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
...
</form>
If you do not need other input data you could use two forms:
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
</form>
<form>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
</form>
A submit button is an input. It has a name and a value. When you click on one of the submit buttons, it's value gets added to the the submission with it's name. When you hit the enter key, the form is automatically submitted, but since you are using two submit buttons, they are both contributing a parameter. You have a lot of options that others have already suggested. You could change the type to "reset" or "button", but if you need to post to the server for both actions, then you could intercept the keystroke with javascript and click the button in code. I would probably go with a button type that would submit the form like this.
<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">
<Script>
function submitform()
{
document.getElementById("your-form-name-here").submit();
}
</script>
There is a HTML form which has some text input fields and 2 buttons, say Yes and No. Instead of accessing the URL first and then filling up the form, how can I fill up those text fields which I need to fill and do the action of either one of the buttons in a single URL?
E.g. Take this form for example: there are 2 fields text1 and text2.
http://www.mysite.com?text1=value1&text2=value2
In the above e.g.(hope that is right) how to add the button action also, is my question.
Appreciate your help.
Typically YES/NO choices are represented with a pair of radio buttons. These values would automatically be sent back with the form submission, based on the name of the radio buttons.
Use submit inputs instead of buttons.
<form>
<input type="submit" name="submitbutton" value="Yes" />
<input type="submit" name="submitbutton" value="No" />
</form>
Then you can grab what button the user pressed to send the form using PHP, JSP, ASP or whatever is your server-side language.
This is not possible unless you have control over the file displaying the form. If you do have control over that file I can show you how with JavaScript. It would make much more sense to use the serverside language filling the form in though.
Can be done through javascript:
Put input type=hidden in your form, and fill the value with a button and submit right after that.
<form name="name_of_form" action="" method="GET">
<input type="hidden" name="button_value" value="" id="hidden_value" />
<button type="button" onclick="javascript:submit_form('yes');">Yes</button>
<button type="button" onclick="javascript:submit_form('no');">No</button>
</form>
And add this JS function at the top somewhere
function submit_form(yesno)
{
document.getElementById('hidden_value').value=yesno;
document.name_of_form.submit();
}
note: Although it should work, I can't tell for sure, cause i suck at JS.
I have an HTML form with two submit inputs. One of them resets the application form, and the other one proceeds to the next levels:
<form method="POST" action="#">
<input type="text" name="username" value="" required aria-required="true">
<input type="submit" name="info" value="Next Step">
<input type="submit" name="info" value="Reset">
</form>
Now i have used the "required" tag that doesn't allow users proceed unless they have filled in the username filed.
Is there any way I can exclude the reset button because the reset button should't need any verification.
One solution I can think of is to put the reset button outside of the form, but I would have some problems with aligning the buttons, because I want both buttons to be in one row and if one of them is inside a DIV tag inside of a form, and with the other one outside of the form, they will never get aligned in one row (I have tried a lot, it doesn't work!).
I wonder if there are any other ways or workarounds to handle this...
Use a <button type="reset">, it won't validate.
use <input type="reset" name="info" value="Reset">
This will not submit the form. and you can do validation on the input type="submit"
Use the formnovalidate attribute:
<input type="submit" name="info" value="Reset" formnovalidate>
Browser support is limited, but probably roughly as limited as for the required attribute.
Note: The value (button text) “Reset” may be misleading, as it suggests that the button is a so-called reset button, which permanently destroys any data entered in the form but does not cause any server interaction. Such buttons (which should almost never be used, but are commonly used) are typically labeled with “Reset”.
It appears to me that both your buttons are included under submit type, which will anyway do a submission on your form. So, you can simply use reset button type as
<input type="reset" name="info" value="Reset">
I want to use a button to link to a page. However, the page url is something like domain.com/page?action=register.
I really need this action added to my:
form action="domain.com/page?action=register"
Form attribute, but when I try it with these settings, it will only go to domain.com/page
I've tried encoding the ? into %3F but that doesn't work.
Any help?
The ? values are set by the form, as long as the form's method is set to "get" (rather than "post", which doesn't submit the values in the URL). So, if you want to submit a form to page?action=register, you'd do the following:
<form action="domain.com/page" method="get">
<input type="hidden" name="action" value="register">
It will also pass the other form values along in the URL, creating something like:
domain.com/page?action=register&first_name=john&last_name=doe
EDIT: As #ninetwozero mentioned in a comment, the scenario you describe above should work:
<form action="domain.com/page?action=register" method="post">
[rest of form]
I just tested the above and it passed both the ?action=register and the form values from my form. So, whichever you prefer.
Is "domain.com/page" the page that has the form and button?
Make sure that your button is like this:
<input type="submit" />
Not
<input type="button" />
Otherwise, you could actually use input type "button" with a javascript redirect.
<input type="button" onclick="location.href="domain.com/page?action=register" />
In fact, why use a bunch of form elements if all you want is a button to send you to another url?
<form>
<input type="button" onclick="location.href="domain.com/page?action=register" />
</form>
Not sure if you even need the tags really. Try it.
I know that XHTML doesn't support nested form tags and I have already read other answers here on Stack Overflow regarding this subject, but I still haven't figured out an elegant solution to the problem.
Some say you don't need it and that they can't think of a scenario were this would be needed. Well, personally I can't think of a scenario that I haven't needed it.
Let's see a very simple example:
You are making a blog app and you have a form with some fields for creating a new post and a toolbar with "actions" like "Save", "Delete", "Cancel".
<form
action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">
<input type="text" name="foo" /> <!-- several of those here -->
<div id="toolbar">
<input type="submit" name="save" value="Save" />
<input type="submit" name="delete" value="Delete" />
Cancel
</div>
</form>
Our objective is to write the form in a way that doesn't require JavaScript, just plain old HTML form and submit buttons.
Since the action URL is defined in the Form tag and not in each individual submit button, our only option is to post to a generic URL and then start "if...then...else" to determine the name of the button that was submitted. Not very elegant, but our only choice, since we don't want to rely on JavaScript.
The only problem is that pressing "Delete", will submit ALL the form fields on the server even though the only thing needed for this action is a Hidden input with the post-id. Not very big deal in this small example, but I have forms with hundreds (so to speak) of fields and tabs in my LOB applications that (because of requirements) have to submit everything in one-go and in any case this seems very inefficient and a waste. If form nesting was supported, I would at least be able to wrap the "Delete" submit button inside it's own form with only the post-id field.
You may say "Just implement the "Delete" as a link instead of submit". This would be wrong in so many levels, but most importantly because Side-effect actions like "Delete" here, should never be a GET request.
So my question (particularly to those that say they haven't needed form nesting) is What do YOU do? Is there any elegant solution that I'm missing or the bottom line is really "Either require JavaScript or submit everything"?
I know this is an old question, but HTML5 offers a couple new options.
The first is to separate the form from the toolbar in the markup, add another form for the delete action, and associate the buttons in the toolbar with their respective forms using the form attribute.
<form id="saveForm" action="/post/dispatch/save" method="post">
<input type="text" name="foo" /> <!-- several of those here -->
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
<input type="hidden" value="some_id" />
</form>
<div id="toolbar">
<input type="submit" name="save" value="Save" form="saveForm" />
<input type="submit" name="delete" value="Delete" form="deleteForm" />
Cancel
</div>
This option is quite flexible, but the original post also mentioned that it may be necessary to perform different actions with a single form. HTML5 comes to the rescue, again. You can use the formaction attribute on submit buttons, so different buttons in the same form can submit to different URLs. This example just adds a clone method to the toolbar outside the form, but it would work the same nested in the form.
<div id="toolbar">
<input type="submit" name="clone" value="Clone" form="saveForm"
formaction="/post/dispatch/clone" />
</div>
http://www.whatwg.org/specs/web-apps/current-work/#attributes-for-form-submission
The advantage of these new features is that they do all this declaratively without JavaScript. The disadvantage is that they are not supported on older browsers, so you'd have to do some polyfilling for older browsers.
I would implement this exactly as you described: submit everything to the server and do a simple if/else to check what button was clicked.
And then I would implement a Javascript call tying into the form's onsubmit event which would check before the form was submitted, and only submit the relevant data to the server (possibly through a second form on the page with the ID needed to process the thing as a hidden input, or refresh the page location with the data you need passed as a GET request, or do an Ajax post to the server, or...).
This way the people without Javascript are able to use the form just fine, but the server load is offset because the people who do have Javascript are only submitting the single piece of data needed. Getting yourself focused on only supporting one or the other really limits your options unnecessarily.
Alternatively, if you're working behind a corporate firewall or something and everybody has Javascript disabled, you might want to do two forms and work some CSS magic to make it look like the delete button is part of the first form.
can you have the forms side by side on the page, but not nested. then use CSS to make all the buttons line up pretty?
<form method="post" action="delete_processing_page">
<input type="hidden" name="id" value="foo" />
<input type="submit" value="delete" class="css_makes_me_pretty" />
</form>
<form method="post" action="add_edit_processing_page">
<input type="text" name="foo1" />
<input type="text" name="foo2" />
<input type="text" name="foo3" />
...
<input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>
HTML5 has an idea of "form owner" - the "form" attribute for input elements. It allows to emulate nested forms and will solve the issue.
Kind of an old topic, but this one might be useful for someone:
As someone mentioned above - you can use a dummy form.
I had to overcome this issue some time ago. At first, I totally forgot about this HTML restriction and just added the nested forms. The result was interesting - I lost my first form from the nested. Then it turned out to be some kind of a "trick" to simply add a dummy form (that will be removed from the browser) before the actual nested forms.
In my case it looks like this:
<form id="Main">
<form></form> <!--this is the dummy one-->
<input...><form id="Nested 1> ... </form>
<input...><form id="Nested 1> ... </form>
<input...><form id="Nested 1> ... </form>
<input...><form id="Nested 1> ... </form>
......
</form>
Works fine with Chrome, Firefox, and Safari. IE up to 9 (not sure about 10) and Opera does not detect parameters in the main form. The $_REQUEST global is empty, regardless of the inputs. Inner forms seem to work fine everywhere.
Haven't tested another suggestion described here - fieldset around nested forms.
EDIT: Frameset didn't work!
I simply added the Main form after the others (no more nested forms) and used jQuery's "clone" to duplicate inputs in the form on button click. Added .hide() to each of the cloned inputs to keep layout unchanged and now it works like a charm.
I think Jason's right. If your "Delete" action is a minimal one, make that be in a form by itself, and line it up with the other buttons so as to make the interface look like one unified form, even if it's not.
Or, of course, redesign your interface, and let people delete somewhere else entirely which doesn't require them to see the enormo-form at all.
One way I would do this without javascript would be to add a set of radio buttons that define the action to be taken:
Update
Delete
Whatever
Then the action script would take different actions depending on the value of the radio button set.
Another way would be to put two forms on the page as you suggested, just not nested. The layout may be difficult to control though:
<form name="editform" action="the_action_url" method="post">
<input type="hidden" name="task" value="update" />
<input type="text" name="foo" />
<input type="submit" name="save" value="Save" />
</form>
<form name="delform" action="the_action_url" method="post">
<input type="hidden" name="task" value="delete" />
<input type="hidden" name="post_id" value="5" />
<input type="submit" name="delete" value="Delete" />
</form>
Using the hidden "task" field in the handling script to branch appropriately.
This discussion is still of interest to me. Behind the original post are "requirements" which the OP seems to share - i.e. a form with backward compatibility. As someone whose work at the time of writing must sometimes support back to IE6 (and for years to come), I dig that.
Without pushing the framework (all organizations are going to want to reassure themselves on compatibility/robustness, and I'm not using this discussion as justification for the framework), the Drupal solutions to this issue are interesting. Drupal is also directly relevant because the framework has had a long time policy of "it should work without Javascript (only if you want)" i.e. the OP's issue.
Drupal uses it's rather extensive form.inc functions to find the triggering_element (yes, that's the name in code). See the bottom of the code listed on the API page for form_builder (if you'd like to dig into details, the source is recommended - drupal-x.xx/includes/form.inc). The builder uses automatic HTML attribute generation and, via that, can on return detect which button was pressed, and act accordingly (these can be set up to run separate processes too).
Beyond the form builder, Drupal splits data 'delete' actions into separate URLs/forms, likely for the reasons mentioned in the original post. This needs some sort of search/listing step (groan another form! but is user-friendly) as a preliminary. But this has the advantage of eliminating the "submit everything" issue. The big form with the data is used for it's intended purpose, data creation/updating (or even a 'merge' action).
In other words, one way of working around the problem is to devolve the form into two, then the problem vanishes (and the HTML methods can be corrected through a POST too).
Well, if you submit a form, browser also sends a input submit name and value.
So what yo can do is
<form
action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">
<input type="text" name="foo" /> <!-- several of those here -->
<div id="toolbar">
<input type="submit" name="action:save" value="Save" />
<input type="submit" name="action:delete" value="Delete" />
<input type="submit" name="action:cancel" value="Cancel" />
</div>
</form>
so on server side you just look for parameter that starts width string "action:" and the rest part tells you what action to take
so when you click on button Save browser sends you something like foo=asd&action:save=Save
My solution is to have the buttons call JS functions which write and then submit forms outwith the main form
<head>
<script>
function removeMe(A, B){
document.write('<form name="removeForm" method="POST" action="Delete.php">');
document.write('<input type="hidden" name="customerID" value="' + A + '">');
document.write('<input type="hidden" name="productID" value="' + B + '">');
document.write('</form>');
document.removeForm.submit();
}
function insertMe(A, B){
document.write('<form name="insertForm" method="POST" action="Insert.php">');
document.write('<input type="hidden" name="customerID" value="' + A + '">');
document.write('<input type="hidden" name="productID" value="' + B + '">');
document.write('</form>');
document.insertForm.submit();
}
</script>
</head>
<body>
<form method="POST" action="main_form_purpose_page.php">
<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">
<input type="submit" name="submit" value="Submit">
</form>
</body>
If you really don't want to use multiple forms (as Jason sugests), then use buttons and onclick handlers.
<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
<textarea name='message' id='message'>Blog message here</textarea>
<input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>
And then in javascript (I use jQuery here for easyness) (even though it is pretty overkill for adding some onclick handlers)
$('#delete').click( function() {
document.location = 'path/to/delete/post/id';
});
$('#cancel').click( function() {
document.location = '/home/index';
});
Also I know, this will make half the page not work without javascript.
Use an iframe for the nested form. If they need to share fields, then... it's not really nested.
In response to a question posted by Yar in a comment to his own answer, I present some JavaScript which will resize an iframe. For the case of a form button, it is safe to assume the iframe will be on the same domain. This is the code I use. You will have to alter the maths/constants for your own site:
function resizeIFrame(frame)
{
try {
innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
if('style' in frame) {
frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
} else {
frame.width = Math.ceil(innerDoc.body.scrollWidth);
frame.height = Math.ceil(innerDoc.body.scrollHeight);
}
} catch(err) {
window.status = err.message;
}
}
Then call it like this:
<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>
I just came up with a nice way of doing it with jquery.
<form name="mainform">
<div id="placeholder">
<div>
</form>
<form id="nested_form" style="position:absolute">
</form>
<script>
$(document).ready(function(){
pos = $('#placeholder').position();
$('#nested_form')
.css('left', pos.left.toFixed(0)+'px')
.css('top', pos.top.toFixed(0)+'px');
});
</script>
I went around the issue by including a checkbox depending on what form the person wanted to do.
Then used 1 button to submit the whole form.
Alternatively you could assign the form actiob on the fly...might not be the best solution, but sure does relieve the server-side logic...
<form name="frm" method="post">
<input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />
<input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />
</form>