Why does my form submit in IE but not in Chrome? - html

I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit

If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html

Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.

I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}

Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>

Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.

I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.

You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.

check your form is outside the table

Related

Can you submit HTML5 form WITHOUT validating?

So I have this form and I really want to use html5 validation. Problem is, there are two things my form needs to do:
Simply save the current state so it can be reloaded later (via jsp/servlets) (WITHOUT VALIDATING)
Actually submit the form (validate it before submitting)
Is there a way to turn off validation for a given button/submit but keep it for the other?
My workaround would be to use an AJAX call for the former and regular submit for the latter, but it kind of messes up the system I have in place.
You can add the "novalidate" attribute when the user clicks on a given button.
<form method="post" action="/foo" novalidate>...</form>
This disables html validation.
Add it again when you want your final submission.
EDIT
Apparently there's a better option, the formnovalidate attribute, that you can add to a specific field (which apparently is exactly what you want):
<form action="demo_form.asp">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
Yes, by toggling the novalidate attribute (or the noValidate property on the HTMLFormElement object) with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-novalidate

Why does adding a hidden text box to a form stop IE refreshing on enter

I was looking for a fix to stop IE refreshing the page instead of submitting my single line form, when a user hits enter instead of clicking go.
I found this solution, which works well, but I was wondering if anyone could explain why it works?
The solution I used is to add a hidden text input within the form tags, like this
`<form name="SearchForm" id="SearchForm" method="get" action="">
/*This is the hidden text input*/
<input type="text" style="visibility:hidden;display:none;" name="ieSearchEnter">
</input>
<fieldset>
<span><input type="text" name="Search" id="Search"/></span>
<div class="field actions">
<input type="submit" name="Go" id="Go" class="submit" value="Go"/>
</div>
</fieldset>
</form>`
which i found here.
Thanks!
Are you really setting the ACTION value to an empty string, or did you just do that for your code sample?
I don't think IE is really "refreshing the page"-- I think it's automatically submitting your form.
Here's a simple test page: http://www.enhanceie.com/sandbox/simpleform.asp. When you hit enter, you'll see that the URL is updated to pass the user's value.
IIRC, there is code in IE's form-handling that says that if you have form containing a single test field, then hitting ENTER will submit that form. In your workaround, you've added an additional text field so that optimization is not applied.
I think maybe your server-side code is REQUIRING that the form submission contains "Go=Go" or it ignores the submitted value (Search=Whatevertheuserhadtyped) and simply re-displays the form. If you change the server-side script such that it does not require Go=Go, then your problem should go away.

How do I make a "div" button submit the form its sitting in?

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>

Submit Link - No Javascript: Downsides?

I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.

Difference between HTML forms submit tags

as far as I know there are three methods to submit an HTML form without JS or keyboard:
1. input type=submit
2. button tag
3. input type=image
Is there another way to create an element submitting the form on being pressed?
Is it correct to handle button tag (type=submit) same as input type=submit (I mean, if we discard the fact button can contain inner html, we can simply replace button with input type="submit" and the form will be sent correctly)?
Is adding name.x and name.y the only difference when using input type=image?
Not that I know of, those should be the only pure html ways to submit the form other than directly invoking the submit method which is internal Javascript, but that is what the submit button does anyway.
The button element has issues in Internet Explorer regarding which
value it passes, I do not recommend
the use of it.
Yes, they're pretty much the same
As far as I know input type=image is exactly the same except that it
sends those extra coordinate
parameters which you can ignore on the
server-side.
With JavaScript, you can call the form's submit method. However, this should be avoided as it will not work if the user has JavaScript disabled.
No, because a button tag can be given a value separate from the text displayed on the button, not to mention the <button> tag's ability to inline HTML. (For example <button type="submit"><img src="submit.png" alt="Submit"></button>).
Yes, the main feature of <input type="image"> is the addition of the x and y coordinates.
You can use JavaScript to simulate it. I'd take an <input type="submit"> and replace it with the element that you'd like to submit a form with, so it's still accessible for users without JavaScript.
<input type="submit" id="submit-button" value="submit" />
Then in JavaScript (using jQuery in this example):
$('#submit-button').remove().after('Submit form');
$('#submit-link').click( function(event){
event.preventDefault();
$('#submit-link').closest('form').submit();
});