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.
Related
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>
I have the form below ..
<form name="myForm" novalidate>
<label for="test_element">Test</label>
<input required id="test_element" type="text" ng-model="ctrl.test">
<button ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
</form>
I'm using the Dynamic Assessment Plugin from here:
https://chrome.google.com/webstore/detail/dynamic-assessment-plugin/aahpafpbmmgednbflpalchnlbicaeppi
The tool doesn't give a great example of how to fix the error:
Submit buttons and image buttons allow users to explicitly request submission of the form and to control the change of context. Forms that are submitted by other mechanisms might change the user's context before they are ready, causing frustration or confusion.
What would be the best way?
I dont want to change <button> -> <input type="submit"> since there's angularjs code behind the scenes handling the submit
I have read a little bit about ng-submit, here's the link.
I think for that we can make it something like this:
<form ng-submit="ctrl.save()">
<input type="text" ng-model="ctrl.test">
<input type="submit" value="Submit">
</form>
I hope that documentation can help you :D
There's no obligation of having one submit button inside a form.
You can view an example in the documentation stating:
Finally, to make the form submittable we use the button element
with no input[type=submit] button.
You can also perfectly have no button at all, for instance a form consisting only in checkboxes.
<button type="submit" ng-click="ctrl.save(myForm.$valid)">
Submit
</button>
I have one Form which have one submit button let us name this as FORM 1 and inside that form I have another form with one submit button and this form name is FORM 2. Now my problem is When i am clicking submit button of FORM 2, FORM 2 submit button is using an action of FORM 1 which i don't want. I know its sounds confusion but check the codes you will come to know :
<form action="pks.php" method="post">
<input type="text" name="mob">
<input type="text" name="opr">
<form action="pksa.php" method="post">
<input type="text" name="opra">
<input type="submit" value="SUBMIT">
</form>
<input type="submit" value="SUBMIT">
</form>
I am trying something like to achieve but i am not able to Please help me out
I have one Form which have one submit button let us name this as FORM
1 and inside that form I have another form with one submit button and
this form name is FORM 2.
In HTML you cannot nest <form> elements. This simply results in invalid markup and undefined behavior. You will have to reorganize your markup in a way that doesn't involve nested forms.
You cannot have nested forms. Browsers won't allow that. Actually if you inspect the form in browser developer tools, you will see that child forms are removed.
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 have a button on an html page declared like so:
<button type="submit" name="action" value="sort">SAVE CHANGES</button>
My company demands we support older versions of IE, and in versions 8 and lower when the user goes to submit the form, it passes the text between the 2 button tags. So i need to use an input tag instead. Can someone help me figure out how to create an input tag where the type=submit, the name=action and the value=sort, but hte text on the button says 'SAVE CHANGES'.
Thanks!
Like this:
<input type="submit" name="action" value="SAVE CHANGES" />
However if the value="sort" is important to you perhaps you could move it to an input type="hidden" element.
An option is to use an image button with the text SAVE CHANGES on it.
<input type="image" src="save_changes.png" name="action" value="sort" />
Don't give your submit button a name, make a hidden field with the name and value you want.
<button type="submit">SAVE CHANGES</button>
<input type="hidden" name="action" value="sort" />
So, when the form is submitted, the value "action=sort" will be submitted.
The requirements seem to exclude solutions other than using <input type=image>, which has serious problems; in particular, the coordinates of the clicked location are transmitted, and probably a revision of the requirements will therefore exclude this, too.
Using JavaScript, you could tweak the data before it gets sent, or maybe use an image with an onclick handler that turns it to a button in a sense.
Normally, problems like this should be solved by modifying the server-side code. But if you have some reason why the field name (in the submitted data) must be different from the text in the button, then there does not seem to be any solution, with the given conditions.