Is it possible to nest html forms like this
<form name="mainForm">
<form name="subForm">
</form>
</form>
so that both forms work? My friend is having problems with this, a part of the subForm works, while another part of it does not.
In a word, no. You can have several forms in a page but they should not be nested.
From the html5 working draft:
4.10.3 The form element
Content model:
Flow content, but with no form element descendants.
The HTML5 <input> form attribute can be the solution.
From http://www.w3schools.com/tags/att_input_form.asp:
The form attribute is new in HTML5.
Specifies which <form> element an <input> element belongs to. The value of this attribute must be the id attribute of a <form> element in the same document.
Scenario:
input_Form1_n1
input_Form2_n1
input_Form1_n2
input_Form2_n2
Implementation:
<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>
<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />
<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />
Here you'll find browser's compatibility.
It is possible to achieve the same result as nested forms, but without nesting them.
HTML5 introduced the form attribute. You can add the form attribute to form controls outside of a form to link them to a specific form element (by id).
https://www.impressivewebs.com/html5-form-attribute/
This way you can structure your html like this:
<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form" action="/sub-action" method="post"></form>
<div class="main-component">
<input type="text" name="main-property1" form="main-form" />
<input type="text" name="main-property2" form="main-form" />
<div class="sub-component">
<input type="text" name="sub-property1" form="sub-form" />
<input type="text" name="sub-property2" form="sub-form" />
<input type="submit" name="sub-save" value="Save" form="sub-form" />
</div>
<input type="submit" name="main-save" value="Save" form="main-form" />
</div>
The form attribute is supported by all modern browsers. IE does not support this though but IE is not a browser anymore, rather a compatibility tool, as confirmed by Microsoft itself: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/. It's about time we stop caring about making things work in IE.
https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form
From the html spec:
This feature allows authors to work around the lack of support for
nested form elements.
The second form will be ignored, see the snippet from WebKit for example:
bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
// Only create a new form if we're not already inside one.
// This is consistent with other browsers' behavior.
if (!m_currentFormElement) {
m_currentFormElement = new HTMLFormElement(formTag, m_document);
result = m_currentFormElement;
pCloserCreateErrorCheck(t, result);
}
return false;
}
Plain html cannot allow you to do this. But with javascript you can be able to do that.
If you are using javascript/jquery you could classify your form elements with a class and then use serialize() to serialize only those form elements for the subset of the items you want to submit.
<form id="formid">
<input type="text" class="class1" />
<input type="text" class="class2">
</form>
Then in your javascript you could do this to serialize class1 elements
$(".class1").serialize();
For class2 you could do
$(".class2").serialize();
For the whole form
$("#formid").serialize();
or simply
$("#formid").submit();
If you're using AngularJS, any <form> tags inside your ng-app are replaced at runtime with ngForm directives that are designed to be nested.
In Angular forms can be nested. This means that the outer form is valid when all of the child forms are valid as well. However, browsers do not allow nesting of <form> elements, so Angular provides the ngForm directive which behaves identically to <form> but can be nested. This allows you to have nested forms, which is very useful when using Angular validation directives in forms that are dynamically generated using the ngRepeat directive. (source)
Another way to get around this problem, if you are using some server side scripting language that allows you to manipulate the posted data, is to declare your html form like this :
<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>
If you print the posted data (I will use PHP here), you will get an array like this :
//print_r($_POST) will output :
array(
'a_name' => 'a_name_value',
'a_second_name' => 'a_second_name_value',
'subform' => array(
'another_name' => 'a_name_value',
'another_second_name' => 'another_second_name_value',
),
);
Then you can just do something like :
$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);
Your $_POST now has only your "main form" data, and your subform data is stored in another variable you can manipulate at will.
Hope this helps!
As Craig said, no.
But, regarding your comment as to why:
It might be easier to use 1 <form> with the inputs and the "Update" button, and use copy hidden inputs with the "Submit Order" button in a another <form>.
Note you are not allowed to nest FORM elements!
http://www.w3.org/MarkUp/html3/forms.html
https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (html4 specification notes no changes regarding nesting forms from 3.2 to 4)
https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (html4 specification notes no changes regarding nesting forms from 4.0 to 4.1)
https://www.w3.org/TR/html5-diff/ (html5 specification notes no changes regarding nesting forms from 4 to 5)
https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms comments to "This feature allows authors to work around the lack of support for nested form elements.", but does not cite where this is specified, I think they are assuming that we should assume that it's specified in the html3 specification :)
You can also use formaction="" inside the button tag.
<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>
This would be nested in the original form as a separate button.
A simple workaround is to use a iframe to hold the "nested" form.
Visually the form is nested but on the code side its in a separate html file altogether.
Even if you could get it to work in one browser, there's no guarantee that it would work the same in all browsers. So while you might be able to get it to work some of the time, you certainly wouldn't be able to get it to work all of the time.
While I don't present a solution to nested forms (it doesn't work reliably), I do present a workaround that works for me:
Usage scenario: A superform allowing to change N items at once. It has a "Submit All" button at the bottom. Each item wants to have its own nested form with a "Submit Item # N" button. But can't...
In this case, one can actually use a single form, and then have the name of the buttons be submit_1..submit_N and submitAll and handle it servers-side, by only looking at params ending in _1 if the name of the button was submit_1.
<form>
<div id="item1">
<input type="text" name="foo_1" value="23">
<input type="submit" name="submit_1" value="Submit Item #1">
</div>
<div id="item2">
<input type="text" name="foo_2" value="33">
<input type="submit" name="submit_2" value="Submit Item #2">
</div>
<input type="submit" name="submitAll" value="Submit All Items">
</form>
Ok, so not much of an invention, but it does the job.
Use empty form tag before your nested form
Tested and Worked on Firefox, Chrome
Not Tested on I.E.
<form name="mainForm" action="mainAction">
<form></form>
<form name="subForm" action="subAction">
</form>
</form>
EDIT by #adusza: As the commenters pointed out, the above code does not result in nested forms. However, if you add div elements like below, you will have subForm inside mainForm, and the first blank form will be removed.
<form name="mainForm" action="mainAction">
<div>
<form></form>
<form name="subForm" action="subAction">
</form>
</div>
</form>
Although the question is pretty old and I agree with the #everyone that nesting of form is not allowed in HTML
But this something all might want to see this
where you can hack(I'm calling it a hack since I'm sure this ain't legitimate) html to allow browser to have nested form
<form id="form_one" action="http://apple.com">
<div>
<div>
<form id="form_two" action="/">
<!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
</form>
</div>
<br/>
<div>
<form id="form_three" action="http://www.linuxtopia.org/">
<input type='submit' value='LINUX TOPIA'/>
</form>
</div>
<br/>
<div>
<form id="form_four" action="http://bing.com">
<input type='submit' value='BING'/>
</form>
</div>
<br/>
<input type='submit' value='Apple'/>
</div>
</form>
JS FIDDLE LINK
http://jsfiddle.net/nzkEw/10/
About nesting forms: I spent 10 years one afternoon trying to debug an ajax script.
my previous answer/example didn't account for the html markup, sorry.
<form id='form_1' et al>
<input stuff>
<submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)'>
<td id='ajaxContainer'></td>
</form>
form_2 constantly failed saying invalid form_2.
When I moved the ajaxContainer that produced form_2 <i>outside</i> of form_1, I was back in business. It the answer the question as to why one might nest forms. I mean, really, what's the ID for if not to define which form is to be used? There must be a better, slicker work around.
No you cannot have a nested form. Instead you can open up a Modal that contains form and perform Ajax form submit.
Really not possible...
I couldn't nest form tags...
However I used this code:
<form>
OTHER FORM STUFF
<div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
THIS FORM STUFF
</div>
</form>
with {% csrf_token %} and stuff
and applied some JS
var url = $(form_id).attr("data-url");
$.ajax({
url: url,
"type": "POST",
"data": {
'csrfmiddlewaretoken': '{{ csrf_token }}',
'custom-param-attachment': 'value'
},
success: function (e, data) {
if (e.is_valid) {
DO STUFF
}
}
});
Today, I also got stuck in same issue, and resolve the issue I have added a user control and
on this control I use this code
<div class="divformTagEx">
</div>
<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>
and on PreRenderComplete event of the page call this method
private void InitializeJavaScript()
{
var script = new StringBuilder();
script.Append("$(document).ready(function () {");
script.Append("$('.divformTagEx').append( ");
script.Append(litFormTag.Text);
script.Append(" )");
script.Append(" });");
ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
}
I believe this will help.
Before I knew I wasn't supposed to do this I had nested forms for the purpose of having multiple submit buttons. Ran that way for 18 months, thousands of signup transactions, no one called us about any difficulties.
Nested forms gave me an ID to parse for the correct action to take. Didn't break 'til I tried to attach a field to one of the buttons and Validate complained. Wasn't a big deal to untangle it--I used an explicit stringify on the outer form so it didn't matter the submit and form didn't match. Yeah, yeah, should've taken the buttons from a submit to an onclick.
Point is there are circumstances where it's not entirely broken. But "not entirely broken" is perhaps too low a standard to shoot for :-)
[see thecode.. code format below ]2simple trick
simply dont use other inside another form tag, please use the same elements without using form tag.
see example below
"" dont use another form // just recall the enter image description hereelement in it""
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 have a page that will display a search form with 3 fields, and a submit button.
when the user clicks on submit, i'm going to make an ajax call, get the data, and then populate the bottom half of the page.
What I'm wondering is if you're using ajax calls, would you still create the form using the tag?
So for example, here's some sample HTML:
<H2> Search Options</H2>
<DIV ID="searchform" class="">
<input type='text' id='id'></input>
<input type='text' id='firstname'></input>
<input type='text' id='lastname'></input>
<input type='button' id='submit'></input>
</DIV>
as you can see, I don't have a tag with post attrib set.
can you tell me why i should / shouldn't include the form tag while using ajax?
Thanks.
There is nothing wrong with it at all.
The only problem comes when a user doesn't have JavaScript enabled. How will your form behave then?
*Assuming javascript is enabled in client's browser
If you are handling Ajax call on button click event, then no need of using <form />.
Because each fields you'l get in javascript by using document.getElementByID or some other mechanism (JQuery selectors). moreover the Ajax call also you are making manually so you can avoid use of <form />.
Using <form /> will just add few bytes overhead to html page, there isn't any other advantage of using <form/> in this case, if you are handling ajax call on button Click event.
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 ASP.Net code generating my button's HTML for me using divs to get it to look and behave how I want. This question is regarding the HTML produced by the ASP.Net code.
A standard button is easy, just set the onClick event of the div to change the page location:
<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>
This works great, however, if I want a button like this to submit the form in which it resides, I would have imagined something like below:
<form action="whatever.html" method="post">
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
Button Text
</div>
</form>
However, that does not work :( Does anyone have any sparkling ideas?
onClick="javascript:this.form.submit();">
this in div onclick don't have attribute form, you may try this.parentNode.submit() or document.forms[0].submit() will do
Also, onClick, should be onclick, some browsers don't work with onClick
Are you aware of <button> elements? <button> elements can be styled just like <div> elements and can have type="submit" so they submit the form without javascript:
<form action="whatever.html" method="post">
<button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">
Button Text
</button>
</form>
Using a <button> is also more semantic, whereas <div> is very generic. You get the following benefits for free:
JavaScript is not necessary to submit the form
Accessibility tools, e.g. screen readers, will (correctly) treat it as a button and not part of the normal text flow
<button type="submit"> becomes a "default" button, which means the return key will automatically submit the form. You can't do this with a <div>, you'd have to add a separate keydown handler to the <form> element.
There's one (non-) caveat: a <button> can only have phrasing content, though it's unlikely anyone would need any other type of content when using the element to submit a form.
To keep the scripting in one place rather than using onClick in the HTML tag, add the following code to your script block:
$('#id-of-the-button').click(function() {document.forms[0].submit()});
Which assumes you just have the one form on the page.
Why does everyone have to complicate things. Just use jQuery!
<script type="text/javascript">
$(document).ready(function() {
$('#divID').click(function(){
$('#formID').submit();
)};
$('#submitID').hide();
)};
</script>
<form name="whatever" method="post" action="somefile.php" id="formID">
<input type="hidden" name="test" value="somevalue" />
<input type="submit" name="submit" value="Submit" id="submitID" />
</form>
<div id="divID">Click Me to Submit</div>
The div doesn't even have to be in the form to submit it. The only thing that is missing here is the include of jquery.js.
Also, there is a Submit button that is hidden by jQuery, so if a non compatible browser is used, the submit button will show and allow the user to submit the form.
A couple of things to note:
Non-JavaScript enabled clients won't be able to submit your form
The w3c specification does not allow nested forms in HTML - you'll potentially find that the action and method tags are ignored for this form in modern browsers, and that other ASP.NET controls no longer post-back correctly (as their form has been closed).
If you want it to be treated as a proper ASP.NET postback, you can call the methods supplied by the framework, namely __doPostBack(eventTarget, eventArgument):
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
Button Text
</div>
You have the button tag
http://www.w3schools.com/tags/tag_button.asp
<button>What ever you want</button>