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'))
Related
I have some dynamic tabs in Angular. Each of the tabs contains a dynamic form.
I noticed that Angular doesn't encapsulate form id property, and because of this id need to be set dynamically, so each tab has separate form id:
<form id="tab{{itemId}}"
[formGroup]="FormTab"
(ngSubmit)="save()">
</form>
Because the structure of each tab is complex, fields and buttons (including submit button in question) are not inside the <form> tag itself. I am using HTML form property to point form's id.
Somewhere in each tab there is a button:
<button form="tab{{itemId}}"
type="submit"></button>
Normally, when it would be static <button form="tabStatic" type="submit"></button> - the form property would work and act as submit button for form <form id="tabStatic"> but apparently Angular doesn't support binding or interpolation in HTML property form. Or am I wrong?
How do I approach this? How to set button's form property with dynamic data?
Try this, it's working for me:
<form id="tab{{itemId}}" [formGroup]="FormTab" (ngSubmit)="save()"
#refForm="ngForm">
</form>
<input type="button" form="tab{{itemId}}" value="Save"
(click)="refForm.ngSubmit.emit()" />
Thanks!
For layout reasons, I have to separate the "submit button" of a form from it. So I made the form fields in form1 and the submit button in form2, How can I make the submit button of form2 post the data in form1?
the publish button is form2, how can I make it send the data of the form1 ( the fields under ) using only HTML.
Use the form attribute.
<input type="submit" form="id_of_the_form_it_should_submit">
(NB: Limited browser support)
You can use jquery, to submit it. submit()
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.
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)