I've read plenty of answers that use the value of submit type input, but my collection of input buttons need to all have the same text. Others use Javascript, and I'm trying to avoid that as well.
<input type="submit" value="Press This" name="submitButton" />
Doesn't work because they all need to be named 'Press This'.
<button type="submit" value="12" name="submitButton">Press This</button>
Doesn't work because it doesn't post the value.
Is there some way to make the <button> submit it's value or to change the text of the <input type="submit"> so they all say the same on the page while having different values? Or possibly even hiding the numeric value in the value attribute of the input element and then just removing the "Press This" before using the value?
Perhaps using <input type="image" value="12" /> with a image that says "Press This"?
Edit: Tried the <input type="image"> and it doesn't work. It'll submit the form, but it doesn't use the name attribute to go to the correct action on the controller.
Edit2: I should also add, the number of submit buttons is dynamic and thus I cannot give them all different names and then see which parameter in the controller had a value passed to it. Unless there is some way to do this for a unknown number of buttons...
your buttons should look like this:
<button name="button" value="12">Press This</button>
<button name="button" value="13">Press That</button>
then just get them in the action
public ActionResult MyAction(string button)
{
if (button == "12"){
//Do this
}
if (button == "13"){
//Do that
}
}
Related
I came across value of attribute in button and as it was explained here https://www.quora.com/What-is-the-difference-between-name-and-value-in-an-HTML-tag value attribute defines text on button. And I expected that <button value="submit"></button> will be equal to <button>Submit</button> but <button value="submit"></button> output button with no text on it. Thus, I a bit confused with why and when we need to use value attribute for button tags in HTML
Value is the result to be posted to server when the button is pressed and has nothing to do with display text.
The button's value gets submitted to the server; You might want to know which button the user clicked.
we can define submit button by two ways.
<input type="submit" value="save" >
by this method, the value will be displayed as text for the button.
But the button tag.
<button type="submit" value="save">Submit Form</button>
Here the value is represented as the value of that button field if you need to use it.
Also, someone use this value when they use multiple submit forms in a php file to identify the form, someone uses the submit button name too.
Value actually acts as text when used in the form like
<input type="button" value="report" >
And acts as a value when used as
<button type="button" value="report">Report</button>
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 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.
I think that the normal behavior of a button like the one below is that the value attribute serves as a label as well:
<input type="submit" name="submitButton" value="DeleteAnswer22" />
Is it possible to have separate attributes for display label and value?
Use the HTML Button element, with type submit, instead:
<button type="submit" name="submitButton" value="DeleteAnswer22">Delete Answer 22</button>
This will result in a submit button that sends the value DeleteAnswer22 but displays "Delete Answer 22".