I have a form and an input outside of the form. The input is linked to the form.
I have tested this on Chrome and it works but on IE it does not.
Is this a known bug? Is there a link to the bug? PS: I don't need a solution I just need a confirmation that only IE behaves like this and perhaps a page where the bug is described or maybe a page where it says that it is function as design.
UPDATE
The bug that I am referring is this: When you enter some text on this input and press enter key I would expect for the form to submit. (as state previously on chrome it works as expected while on IE it does not)
Here is a code: go to the second input and press enter: In Chrome/Firefox/Opera the message submit called is displayed while in IE/Edge it does not.
function submitForm(e) {
alert('Submit called');
e.stopPropagation();
e.preventDefault();
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="submitForm()" id="bugForm">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
<input type="text" name="another" id="another" form="bugForm" />
</body>
</html>
You did not posted your sample code, So we cannot accurately say what you are doing in your code and why it is not working in IE.
If we assume like you have any input tag outside your form and you want to submit a form by pressing enter key on that input control than it should not submit the form because it is not inside the form tag. In that way IE is working correctly and it should not consider as a bug.
If you have a requirement to do that than you can try to refer an example below will work with IE.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form action="something.php">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
You can click this ->
<label for="submitButton">Submit</label><br>
Or You can click ->
<input type="submit" onclick="document.forms[0].submit();" />
</body>
</html>
For Reference, You can refer links below.
(1) Form not working in Internet Explorer
(2) Submit form using a button outside the tag
I found a page where indeed an input outside of a form is not supported (HTML5).
http://html5test.com/
I am using HTML form validation and have discovered a strange issue within IE11. The problem does not appear in Chrome, Firefox, Opera or Edge.
Basically, IE11 does not appear to perform a form reset correctly. I would expect a form reset to clear all validation errors and reset the form values back to their initial values. On the next submit, I would expect the form to re-validate.
What appears to happen during a form reset is only values are reset - validation error states (or even a successful validation) seem to remain unless a user changes the field.
The only workaround I can see for my web app is to reload the page rather than perform a form reset. Any other ideas?
The workflow is as follows:
Using IE11, remove the text from a required input field.
Click Submit, get validation error.
Click Reset, input field value returns to initial value.
Click Submit, get validation error yet the field has been filled in using the initial value.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" value="test" required>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
I am able to produce the issue but unfortunately no any solution is available for this specific issue.
You can try to use work around like first setting the textbox value to empty and then reset the form using JS.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resetfrm()
{
document.getElementById("txt1").value='';
document.getElementById("theForm").reset();
alert("clear");
}
</script>
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" id="txt1" value="test" required>
<input type="submit">
<input type="button" onclick="resetfrm()" value="Reset">
</form>
</body>
</html>
I am developing a form in html5, I have put the required attribute and customized the tool tip. When I press the submit button the customized tooltip appears however when I hover over the field I see default message "please fill out this field" in addition to custom tooltip post submission attempt or only default message pre submission. I like either to translate the default message or suppress it. The behavior is unique to chrome. Any help will be much appreciated.
I have tried using the setCustomValidity() onmouseover event but in vain
Regards
Yasir Munir
<html>
<head>
<script>
function validator(input) {
input.setCustomValidity('my custom message');
}
</script>
</head>
<body>
<form>
<input type="text" required onmouseover="validator(this)" oninput="validator(this)" />
<input type="submit" />
</form>
</body>
</html>
I have seen people do:
<form ..>
<button type='submit' value='Submit'>Sign Up</button>
</form>
Why do they need value='Submit' if it isn't even submitted to the server? Is it for accessibility?
Forms can have more than one submit button. If you also give each button a name, then you can use the value after submitting to see which one had been clicked.
<!DOCTYPE html>
<html>
<head>
<title>test submit</title>
</head>
<body>
<form action="#" method="get">
<button type='submit' name="clicked" value="thefirst">First</button>
<button type='submit' name="clicked" value="thesecond">Second</button>
</form>
</body>
</html>
If you submit this with the first button, the parameter posted will be clicked=thefirst, while with the second one it will be clicked=thesecond.
Of course in this case a much saner approach would be to give the buttons different names. but you get the idea.
All programmer use this. Because its is good understanding to another programmer to review already written code. It is not compulsory.
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.