http://www.w3schools.com/tags/att_select_form.asp
So in the link above, it shows that an <input> (select) can be outside of the <form> container, as long as the form is reference.
However, what if I have multiple forms and I would like to make sure that the value from <select> is included in the form that is submitted. How would I go doing that?
An example:
<select id="item1">....</select>
<form id="form1">...</form>
<form id="form2">...</form>
<form id="form3">...</form>
<form id="form4">...</form>
I want to make it so that no matter which form is submitted, item1 is always included.
you can do something like this
<select id="item1" name="item1">....</select>
<form id="form1" onsubmit="document.getElementById('h1').value = document.getElementById('item1').value">
<input type=hidden value="" id="h1" name="item1">
</form>
Using a javascript onsubmit, such as is provided in this answer, may be useful to get the data and append it to your form, regardless of the submitted form.
Related
I have a form:
<form action="#" method="post" class="aui" id="advanced-settings-form">
<input class="text medium-long-field" type="text" name="6" placeholder="/**/*">
</form>
I know that it is possible to prefill the form via url as: URL?id=text
But in my case there is no id - only a name.
Is it still possible to prefill the form via URL?
Well, for sending data through a form, we use name attribute and not id attribute. What you are looking for is to use value attribute of <input> tag.
Also URL?id=text which you have mentioned, means that the form has already been submitted usingmethod=get. It has no relation with prefilling of the input boxes.
Something like this:-
<form action="#" method="post" class="aui" id="advanced-settings-form">
<input class="text medium-long-field" type="text" name="name_here" placeholder="/**/*" value="text">
</form>
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.
Say I want to make double action in HTML form.
The first action would be to examle1.php
And the second action would be to example2.php
I have code like this
<form name="input" action="" method="post">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
So, how to insert the 2 actions above to the action=""?
Is it possible to do that?
No. You can have only one declared action attribute for the <form>
You can however, try:
Doing an AJAX POST for your first action and submitting the actual form on its success handler
Writing the server side script for your first action such that it redirects to your second action after it done.
In a form you can give only one action="action.php". But tell us why you want to have two actions ?
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 want to have an HTML form embedded in another form like so:
<form id="form1">
<input name="val1"/>
<form id="form2">
<input name="val2"/>
<input type="button" name="Submit Form 2 ONLY">
</form>
<input type="button" name="Submit Form 1 data including form 2">
</form>
I need to submit the entirety of form1, but when I submit form2 I only want to submit the data in form2 (not everything in form1.) Will this work?
What you have described will not work.
One workaround would be to create two forms that are not nested. You would use hidden inputs for your original parent form that duplicate the inputs from your original nested form. Then use Javascript/DOM manipulation to hook the submit event on your "parent" form, copying the values from the "nested" form into the hidden inputs in the "parent" form before allowing the form to submit.
Your form structure would look something like this (ignoring layout HTML):
<form id="form1">
<input name="val1"/>
<input name="val2" type="hidden" />
<input type="button" name="Submit Form 1 data including form 2"
onsubmit="return copyFromForm2Function()">
</form>
<form id="form2">
<input name="val2"/>
<input type="button" name="Submit Form 2 ONLY">
</form>
You cannot have nested forms (source) so this will not work.
Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested
quite late but you can do this:
<form id="form1"></form>
<form id="form2"></form>
<input ***form="form1"*** name="val1"/>
<input ***form="form1"*** name="val2" type="hidden" />
<input ***form="form2"*** name="val2"/>
<input ***form="form2"*** type="button" name="Submit Form 2 ONLY">
<input ***form="form1"*** type="button" name="Submit Form 1 data including form 2"
onsubmit="return copyFromForm2Function()">
The "form" element within the input tag has been added to get around the inability to nest forms.
A possible solution : Instead of having the nested form, add an onClick event to the form2 button which will call a JS method that could get your specific items (val2 input in this case) from form1 and using AJAX or simply xmlHTTPRequests() to perform the desired POST methods.
As other people have said, you cannot nest form elements. The way I would handle something like this would be to use a single form and then group the elements with fieldsets. You can then add events to the submit buttons with javascript and enable/disable the input fields that should be submitted.
With jQuery, MooTools or any other framework this would be very simple. It will break if the client disables scripts, though.
A MooTools solution could look like this:
$('submit2').addEvent('click', function (e) {
e.stop();
$$('#fieldset1 input').set('disabled', 'disabled');
$('form').submit();
$$('#fieldset2 input').set('disabled', '');
}
Oh, and I trust you have a good reason for doing this, because to me it sounds suspiciously like bad usability :-)
I think there may be issues with the UI for this. It'd be very confusing for a user if only part of (what appears to be) a single form was submitted/saved.
Rather than nesting forms, which, as stated, is invalid, I think you need to look at perhaps implementing some AJAX calls instead to update subset of data.
Here is the definitive working answer. I didn't need to create an extra parent DIV and name it id="place_here". Naming a table cell id="place_here" and making it the parent to DIV id="div_2" was enough.
This is a brilliant little work around. Someone on another thread helped me with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
<title>test / crtp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
position_mdiv()();
$(window).resize(function() {
position_mdiv();
});
})
function position_mdiv(){
var pos = $('#place_here').position();
var width = $('#place_here').outerWidth();
$('#div_2').css({
position: "absolute",
top: pos.top +2 + "px",
left: (pos.left -300 + width) + "px"
});
}
</script>
<body>
<form id="CTRP_Form">
<table border="1">
<tr>
<td>
<div id="div_1"><input id="fnam" name="fnam" form="CTRP_Form" type="text"><input type=submit></div>
</td>
<td id="place_here" style="background:yellow;width:300px;padding:0px;border:solid 2px #CCC"></td>
</tr>
</table>
</form>
<div id="div_2"><form id="query_Form"><input id="MyQuery" name="MyQuery" form="query_Form" type="text"><input type=submit></form></div>
</body>
</html>
I resolved this by having multiple submit buttons in the form. The buttons reference different CGIs and brought along the additional fields that I needed to handle conditional processing in the CGIs.
Code snippet
<form name="ep" method="put" action="/cgi-bin/edit_plan.pl">
[...]
<tr>
<td><input type="text" size="20" value="red" name="RN0"></td>
<td><input type="text" size="3" value="2" name="RT0"></td>
<td><input type="submit" value="Set row 0" name="RUN0"></td>
</tr>
[...] Add as many rows as needed, increment the 0 in all places Add an ending submit for overall processing instead of row processing: <input type="submit" value="Set ALL" name="SET">
</form>
It's not valid and will in my experience produce arbitrary results.
You could work around this using Javascript's DOM functions, taking form2 out of form1, putting it into the body, submitting it and putting it back into form1.
Edit: This won't be 100% right either, as it still has nested forms. As some of the answers point out, you have to have two separate forms. You can still do this using DOM magic but with a few more turns - .see Randolpho's answer.