Suppose I have the following HTML form:
<form>
...
<input type="submit" name="queue" value="Queue item">
<input type="submit" name="submit" value="Submit item">
</form>
How do I know which button the user clicked (without using javascript)?
I looked at submitted data and it seems that when "Queue Item" is clicked then "queue" = "Queue Item" gets sent to the server. And when "Submit item" is clicked then "submit" = "Submit item" sets sent.
Can I rely on this behavior? Is it documented somewhere in the standard on HTML forms? How do you guys do it?
Yes, you can rely on this; it's fully documented here. The specific relevant lines say:
When a form is submitted for processing, some controls have their name paired with their current value and these pairs are submitted with the form. Those controls for which name/value pairs are submitted are called successful controls.
and
If a form contains more than one submit button, only the activated submit button is successful.
Yep you can rely on that behaviour.
When <input type="submit" name="queue" value="Queue item"> is clicked, the field "queue" will be set and "submit" will not be.
Whereas when the other gets clicked, the field "submit" will be set, and "queue" will not be.
If you're not assured by this, you can split them into 2 forms and work on it that way.
You can rely on this behavior. You get the value of the input. I would use javascript to toggle a hidden form value, but since you mentioned no javascript you do not have multiple choices.
It's a standard. Since it's an input tag, and has a value, that means you get the value submitted.
Split the form into two forms, replicating any other inputs needed by the other action. Or, if you really just need to know if the user wants to "queue vs. submit" the item, change both submit buttons to radio selections to toggle between the two options, and have a new, separate "submit the form" button.
In that situation if you want a one-click option, you could use Javascript to detect when one of the radio buttons is selected, and auto-submit the form instantly. (Using Javascript for user interface, rather than form handling)
Related
I have a form with some text input fields (let's say FirstName and LastName to keep it simple) and then a submit input field at the bottom of the form (with a value of Sign In)
When I type something in one of the text fields (such as typing John for the FirstName) and then press Enter on the keyboard, it automatically triggers the submit input field, as if I have actually clicked the Sign In button.
I understand the reason why it is doing this, however I need to find a work around so that if Enter is pressed, I can carry on typing in the rest of my form. I don't want the form to actually be submitted until someone clicks Sign In.
I have read a suggestion such as changing <input type="submit" value="Sign In">to <input type="button" value="Sign In"> instead, however if I do this it then makes the button un-clickable, and doesn't actually 'submit' the form.
Any suggestions?
I haven't included my code because I didn't feel it was necessary, as I'm sure there's a really simple solution I'm completely missing.. but if I really need to paste my code I can.. thanks.
Inline HTML:
<form onkeypress="return event.keyCode != 13;" ...>
...
</form>
That works by disabling the enter key for the entire form. (take note that this will stop you from making newlines in textareas)
Source
You can not for the input "text" but you can for input "area" because area input is not fixed.
I have a button that is this <button id="btnSubmit">Submit</button> the problem is, I want the form tags to use this id so that is designed the way I want. And also this code, I have a few questions.
<form action="demo_form.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
what is the action="demo_form.php",input type="submit" do? And does the input type has any other "What do you call this stuff" besides submit?
The action="demo_form.php" sets the action, in this case, "navigate to file demo_form.php and send it the data".
<input type="submit" (...) > creates and element which submits the form e.g. executes the "action".
The method sets the way the data is submitted to the target of the action ("form_demo.php"), in this case get, which allows you to refer to the submitted data as $GET["name"] in PHP.
Possible input types are listed here.
You either give your <input type="submit" (...) > the id="btnSubmit" property or use javascript to submit the form after an event has been triggered.
MOr info on that is available here (i short: document.<get_the_form_element>.submit();).
I suggest you to take a look at this link. It describes all the basic concepts about how using forms. And you can also find a lot of information by Googling it.
The action attribute
The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
The input attribute
<input type="submit"> defines a button for submitting a form to a form-handler.
The form-handler is typically a server page with a script for processing input data.
If i understand your question correctly, these are my answers.
action
The action attribute describes the page to which the contents of the form are sent to. So if you have a sign up form with an input for an email, the text that is typed will be sent to the action path. It will be sent using the method described in the method attribute. So you can find your values in either the $_POST variable, or the $_GET variable, get is easy for being able to share the url and post is great for private information.
input
The input element is the actual way to input information (who guessed it). You've got an input of the type text for just text input, you've got checkbox for a true or false input and way way more see: w3schools
why don't you use
<input type="submit" value="Submit" id="btnSubmit">
Or if you want to use a button
<button id="btnSubmit">Submit</button>
Then from jquery or js you can submit the form.
And for this question,
what is the action="demo_form.php",input type="submit" do?
You should probably google it out. This is so basic.
Anyway, just a concise explanation:
action is the attribute where you will specify the code that will handle the form data submitted and input type="submit" will display a button in the page, clicking on it will submit the form.
There are a lot of types in input, the most common ones are
text
password
submit
I need nested forms. I know that they are not allowed in HTML, so I decided to set several submit buttons for one opened form.
In my controller I need to check which of the submit buttons is pressed. How can I do that?
I'm trying to give buttons names like this:
<input class="btn btn-primary" name="editAction" type="submit" value="Save"></button>
Then in my controller I check them like this:
if ($this->input->post('editAction'))
But it doesn't work.
If you are bound to have several submit buttons in your form, then you can do 2 things :
1) Convert submit buttons into normal buttons and submit form using ajax. This will solve your problem.
2) Convert submit buttons into normal buttons and maintain a hidden field on your form and onClick event of all buttons, just put the id of the button in that hidden field as a value, and then using jQuery, submit your form and then in your controller, check your hidden field value and then process the form.
if ($this->input->post('hidden_field_name'))
It seems that my CancellableFormController picks the first of the 2 submit buttons' action if Enter is pressed on the form.
i.e. if my successView is success.jsp and cancelView is cancel.jsp and on my form Cancel button appears before Register, cancel.jsp is called when I hit enter.
Why is this happening. Code for my buttons is:
<input type="submit" name="cancel" value="<spring:message code="submit.cancel"/>"/>
<input type="submit" value="<spring:message code="submit.register"/>"/>
Can I change this?
If you have two separate submit buttons in your jsp does not mean that your controller will perform differently based on that.
The thing here is whenever you submit any of the button it will perform the same action defined in the form tag.
You need to have two separate forms for each submit button and they must have the separate actions defined in it.
I'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.