I have this HTML form
<form name="nextform" action="anotherpage.php" method="post" enctype="multipart/form-data">
<input name="pinid" id="pinid" type="hidden">
<input type="submit" name="submit" id="post" value="Lets Go" class="formButtonMap">
</form>
pinid dynamically gets a value using JavaScript. When it gets a value I alert it and it works.
But, when I click the Lets Go button, nothing happens. I see the Internet Explorer loading for a couple of minutes and then I get the message “The webpage does not respond”. If I hit refresh it goes to anotherpage.php but the values from the form did not arrive to the server.
Rarely shows this message:
Visual Studio Just-In-Time Debugger
An unhandled win32 exception occured in iexplorer.exe [688]
Possible Debuggers :
New Instance of Microsoft Visual Studio 2012
This behavior is observed only in Internet Explorer 11.0.2. The form works in older versions of Internet Explorer and also in Chrome and Firefox. I get no errors in IE’s console.
Here is the JavaScript code, placed above the form:
// called when another button is clicked - basicaly is websockets
function save() {
var so = new WebSocket("ws://localhost:8000");
so.onerror = function (evt) {
alert('problem');
}
if (sara == 'LINES') {
so.onopen = function() {
so.send(JSON.stringify({
command: 'insertAll',
name: document.getElementById('name').value
}));
}
}
if (sara == 'POLY') {
so.onopen = function() {
so.send(JSON.stringify({
command: 'insertHalf',
name: document.getElementById('name').value
}));
}
}
so.onmessage = function (evt) {
var received_msg = evt.data;
document.getElementById("next").style.display = "block";
document.getElementById("name").value = "";
document.getElementById("descr").value = "";
clearLinks();
document.getElementById("pinid").value = received_msg;
alert(document.getElementById("pinid").value); // works
so.close();
}
}
I tried to edit the code using document.getElementById("nextform").submit();, problem is still there.
Is it me? Is it a bug? What am I missing?
I believe this is a bug when setting form values to empty in IE.
IE Bug Report
I would suggest trying a different method to resetting the form values, I have used this method in the past:
document.getElementById('name').parentNode.innerHTML = '';
Maybe not your issue, but:
<input type="submit" name="submit" ... >
Giving a form control a name of submit will replace the form's submit method with a reference to the control, so calling form.submit() will attempt to "call" the input.
hi might be problem in your code you miss to add id in form and you try to access form by it's id that you not define.
document.getElementById("nextform").submit();
its required
<form name="nextform" id="nextform" action="anotherpage.php" method="post" enctype="multipart/form-data">
...
...
...
</form>
Trace through what happens in the anotherpage.php page when it receives the postback, evt.data might not be encoded as you expect (is it binary or text, if text, is it utf-8).
Postback to a different page where all it does is output the posted back values.
Does the socket close throw an exception?
so.close();
My original code has a form with more than 5 fields. When submitted calls the save(). save() function also clears the fields using JS.
There is a bug in IE11, that crashes the browser if you try to clear more than 5 fields , using JS. See here , there is workaround.
That bug crashes the first form, then the nextform form and also the browser. I APOLOGISE for not posting all my code, I did not know it had to do with the first form.
Because I thought the same piece of code had two different problems , I posted another question, very similar , here
In my case the input button had the same ID and NAME. So you can check if they are the same and if indeed they are the same use different value for one of the parameters.
I hope it helps.
Related
I have an old website with JQuery 1.7 which works correctly till two days ago. Suddenly some of my buttons do not work anymore and, after clicking on them, I get this warning in the console:
Form submission canceled because the form is not connected
The code behind the click is something like this:
this.handleExcelExporter = function(href, cols) {
var form = $('<form method="post"><input type="submit" /><input type="hidden" name="layout" /></form>').attr('action', href);
$('input[name="layout"]', form).val(JSON.stringify(cols));
$('input[type="submit"]', form).click();
}
It seems that Chrome 56 doesn't support this kind of code anymore. Isn't it? If yes my question is:
Why did this happened suddenly? Without any deprecation warning?
What is the workaround for this code?
Is there a way to force chrome (or other browsers) to work like before without changing any code?
P.S.
It doesn't work in the latest firefox version either (without any message). Also it does not work in IE 11.0 & Edge! (both without any message)
Quick answer : append the form to the body.
document.body.appendChild(form);
Or, if you're using jQuery as above
$(document.body).append(form);
Details :
According to the HTML standards, if the form is not associated to the browsing context(document), the form submission will be aborted.
HTML SPEC see 4.10.21.3.2
In Chrome 56, this spec was applied.
Chrome code diff see ## -347,9 +347,16 ##
P.S about your question #1. In my opinion, unlike ajax, form submission causes instant page move.
So, showing 'deprecated warning message' is almost impossible.
I also think it's unacceptable that this serious change is not included in the feature change list. Chrome 56 features - www.chromestatus.com/features#milestone%3D56
if you are seeing this error in React JS when you try to submit the form by pressing enter, make sure all your buttons in the form that do not submit the form have a type="button".
If you have only one button with type="submit" pressing Enter will submit the form as expected.
References:
https://dzello.com/blog/2017/02/19/demystifying-enter-key-submission-for-react-forms/
https://github.com/facebook/react/issues/2093
add attribute type="button" to the button on who's click you see the error, it worked for me.
alternatively include
event.preventDefault();
in your
handleSubmit(event) {
see https://facebook.github.io/react/docs/forms.html
I have found this problem in my React project.
The problem was,
I have set the button type 'submit'
I have set an onClick handler on the button
So, while clicking on the button, the onclick function is firing and the form is NOT submitting, and the console is printing -
Form submission canceled because the form is not connected
The simple fix is:
Use onSubmit handler on the form
Remove the onClick handler form the button itself, keep the type 'Submit'
You must ensure that the form is in the document. You can append the form to the body.
I see you are using jQuery for the form initialization.
When I try #KyungHun Jeon's answer, it doesn't work for me that use jQuery too.
So, I tried appending the form to the body by using the jQuery way:
$(document.body).append(form);
And it worked!
<button type="button">my button</button>
we have to add attribute above in our button element
A thing to look out for if you see this in React, is that the <form> still has to render in the DOM while it's submitting. i.e, this will fail
{ this.state.submitting ?
<div>Form is being submitted</div> :
<form onSubmit={()=>this.setState({submitting: true}) ...>
<button ...>
</form>
}
So when the form is submitted, state.submitting gets set and the "submitting..." message renders instead of the form, then this error happens.
Moving the form tag outside the conditional ensured that it was always there when needed, i.e.
<form onSubmit={...} ...>
{ this.state.submitting ?
<div>Form is being submitted</div> :
<button ...>
}
</form>
I faced the same issue in one of our implementation.
we were using jquery.forms.js. which is a forms plugin and available here. http://malsup.com/jquery/form/
we used the same answer provided above and pasted
$(document.body).append(form);
and it worked.Thanks.
I was able to get rid of the message by using adding the attribute type="button" to the button element in vue.
An example of Mike Ruhlin's answer, I was redirecting with react-router-dom Redirect on form submission.
Placing e.preventDefault() into my submit function removed the warning for me
const Form = () => {
const [submitted, setSubmitted] = useState(false);
const submit = e => {
e.preventDefault();
setSubmitted(true);
}
if (submitted) {
return <Redirect push to={links.redirectUrl} />
};
return (
<form onSubmit={e => submit(e)}>
...
</form>
);
};
export default Form;
Depending on the answer from KyungHun Jeon, but the appendChild expect a dom node, so add a index to jquery object to return the node:
document.body.appendChild(form[0])
Adding for posterity since this isn't chrome related but this was the first thread that showed up on google when searching for this form submission error.
In our case we attached a function to replace the current div html with a "loading" animation on submission - since it occurred before the form was submitted there was no longer any form or data to submit.
Very obvious error in retrospect but in case anyone ends up here it might save them some time in the future.
I have received this error in react.js. If you have a button in the form that you want to act like a button and not submit the form, you must give it type="button". Otherwise it tries to submit the form. I believe vaskort answered this with some documentation you can check out.
if using react and something like formik, the issue seems to be in the onClick handlers in the submit button
You can also solve it, by applying a single patch in the jquery-x.x.x.js just add after " try { rp; } catch (m) {}" line 1833 this code:
if (r instanceof HTMLFormElement &&! r.parentNode) {
r.style.display = "none"; document.body.append (r);
r [p] ();
}
This validates when a form is not part of the body and adds it.
I noticed that I was getting this error, because my HTML code did not have <body> tag.
Without a <body>, when document.body.appendChild(form); statement did not have a body object to append.
Your button has to be in the context of Form tag
button type="submit"
I was also facing the same issue , I removed onClick={onSubmit} form the button tag (I used Formik here)
I saw this message using angular, so i just took method="post" and action="" out, and the warning was gone.
I have a form,
<form name="myForm" method="post" action="MyPage" id="myForm" style="display:inline;"> </form>
which I am submitting with Javascript.
function performFunction() {
$('#myForm:first').submit();
}
In IE and FF this will go the right post action in my asp.net app; so mySite.com/MyPage. In Chrome however it appears to just be going to mySite.com. Looking into the network tab I can see the request to the server is indeed just mySite.com. Stranger yet is if I use the above JS code in the DevTools console it will submit correctly, even when breakpointed on that exact point.
I was looking into if form attributes were getting change directly after the submit as I was reading chrome has a problem with that. That however doesn't seem to be the case.
Why would this be happening?
Change
action="MyPage"
to
action="/MyPage"
If this solution doesn't work, try:
function performFunction() {
setTimeout(function() {
var myForm = $('#myForm');
myForm.action = '/MyPage';
form.submit();
}, 0);
};
Read more about this issue here:
https://code.google.com/p/chromium/issues/detail?id=104205
I am helping someone with a web page that they are having a problem with, I sorted out the validation part but behavior of the submit process is not as you would expect.
To catch and stop the default event, I used the following in the head of the function
var evt = event ? event:window.event;
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
evt.cancelBubble = true;
If I change any part of it, the prevention of the default action doesn't work and the page in MSIE will submit even when validation errors exist or persist. Under Chrome the browser does not submit but throws an error, with the prevent routine under MSIE the debug show up an error in the same line.
Chrome: Uncaught TypeError: object is not a function
MSIE : Object doesn't support this property or method
The line in question :
document.forms[0].submit();
Trying
document.forms.form1.submit();
// or
document.forms['form1'].submit();
doesn't work however
document.forms.form1.reset();
or any of the variants of addressing, including the .getEmelentsById("..."); method works fine, I am just stumped as to the problem, the thought that my JS Interpreter is stuffed up did cross my mind...
Anyone got any ideas that DOES NOT use JQuery please.
Since form.reset() does work, but form.submit() does not, something is overwriting the submit method on the form. I bet you have a form element with an id or name of "submit":
<input id="submit" />
Or:
<input name="submit" />
That way form.submit would resolve to the input element, rather than the form's submit() method.
Quick jsFiddle demo
The easy fix is to change the id of the element. The harder, less sensible, fix would be to get a reference to the prototype submit method and call it in the context of your form:
var f = document.forms.form1;
Object.getPrototypeOf(f).submit.call(f);
or
document.createElement("form").submit.call(document.forms.form1);
I hesitate to ask this as it is a bit complex, but I will try to make it simple.
I have a page with several form fields.
I submit the page via a submit script (note more is done in this submit script, but I am leaving it out for simplicity
function do_file_form_submit(gonext) {
var f = document.getElementById('file_form');
f.gonext.value = gonext;
alert(gonext);
f.submit();
}
Please note that there are other variables included in this function. gonext is not the only one, but I am leaving the others out in this case to keep it simple.
My HTML for simplicity sake looks like this:
<form name="file_form" id=file_form action="<?= $this->URL('#', 'UpdateUploadUser', array('mode'=>'upload', 'ID'=>$_GET['ID']));?>" method="post" enctype="multipart/form-data">
<input type="text" name="oneitem">
<button name="submit1" id="submit1" onclick="do_file_form_submit(2);"><img src="<?=$theme;?>/images/12addphoto32px.png">Save Settings Then Upload/Register Another</button>
On the backend side within the "UpdateUploadUser" function we have a checker which checks each submitted field to see if it is empty or not. If it is empty, it returns:
$this->chk = new mVal($event);
if(!$this->chk->Validate()) {
$this->mode = 'error_redisplay';
//$this->mode='Error';
return;
}
If all info is there, then the script continues and runs as expected. So, here is the issue.
If all information is there, and I click the button, then all works fine. The file_form submit JS ALERTS the gonext value and the script runs and updates as it should.
HOWEVER, if an item is missing, then the validation script runs and "RETURNS".
Once the page has been returned, if you THEN attempt to click the submit button, the page STILL submits as it should, but the file_form submit script seems as if it doesn't even run, so that the gonext value is not passed at all.
So, I am trying to figure out how the submission of the form is still happening apart from this do_file_form_submit script. Is there something having to do with "return" that I don't know about?
Hope that makes sense and thanks for any help!
Craig
Review your code
function do_file_form_submit(gonext) {
var f = document.getElementById('file_form');
f.gonext.value = gonext;//f.gonext. i can not find gonext in ur form. just oneitem try something like f.oneitem.value = gonext; i believe that is where the //problem occurs
alert(gonext);
f.submit();
}
in nutshell, replace the line:
f.gonext.value = gonext;
with
document.file_form.value = gonext;
and then submit like
document.file_form.submit();
I'm new to JavaScript, and working on a hobby project with a few developers. We have a simple page that is used to submit requests to a database.
I decided to try learning JQuery, and started implementing some AJAX functionality into this request page. It works fine in FireFox, IE and Safari, but for some odd reason, I can't get it to work in Chrome.
I've been debugging it for a couple of hours now, and I have no idea why it's not working. Here's the relevant part of the HTML form (post action removed due to JavaScript):
<form method="POST">
<input type="text" name="amount" value="0" size="7" />
<input type="submit" value="Fulfill!" /><br />
<input type="hidden" name="index" value="69" />
<input type="hidden" name="item" value="Iron Ore" />
</form>
And here's the PHP form that it posts to:
<?php
require_once("../classes/Database.php");
$database = new Database();
$amount = $database->sanitizeString($_POST['amount']);
$index = $database->sanitizeString($_POST['index']);
$username = $database->sanitizeString($_POST['username']);
$item = $database->sanitizeString($_POST['item']);
$database->connect();
$database->setRequest($amount, $index, $username, $item);
$database->setKarma($username, $amount, $item);
?>
And most importantly, here's my newbie JavaScript code that's simply in the HTML file:
<script language="JavaScript">
var amount = 0;
var index = 0;
var item = 0;
var username = "";
var data = "";
$(document).ready(function(){
$("form input[type=submit]").click(function(){
amount = $(this).siblings("input[name=amount]").val();
index = $(this).siblings("input[name=index]").val();
item = $(this).siblings("input[name=item]").val();
username = "<?=$_SESSION['username']; ?>";
//var stuff = $.post("pages/ajaxfulfill.php", {amount:amount,index:index,item:item, username:username}, function(data){alert(data)}, "html");
var stuff = $.ajax(
{
url: "pages/ajaxfulfill.php",
type: "POST", data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,
success: function(data)
{
alert("Success")
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert("error" + XMLHttpRequest.status);
alert("error" + XMLHttpRequest.responseText);
}
}
)
$(this).parents("td").text("Submitted");
});
});
</script>
At first, I was using the commented out $.post function, which works with the above mentioned browsers. I attempted to switch to the $.ajax function during my debug process, and found out that FF, IE, and Safari always return a "Success" alert, whereas Chrome is returning an Error with status 0 and a blank response.
Being a JavaScript newbie, I'm completely lost at why this would fail. If anyone could point me in the right direction, you'll have my profound respect and well wishes. Thanks.
You don't seem to be preventing the default action on the submit button. So after your click function fires, the form still submits, presumably cancelling your XMLHttpRequest.
(What might make a difference cross-browser here is that at the end of the function you remove the form from the page by calling the text() function. Should that stop the form getting submitted? Don't know... some browsers might, but there is no specification that says so.)
Use event.preventDefault(); on the argument passed into the handler function(event) { ... } to stop the button click going through to submit the form.
But don't bind form submission code to an input button. Your script may (depending on browser and other attributes of the form) fail to fire on another kind of submission such as an Enter press. Always bind validation and AJAX-form-replacement using the submit event on the form itself. event.preventDefault(); still applies.
Omitting the action attribute of a <form> is invalid; the browser typically chooses the existing page's URL to submit to. If you want form fields without a form to submit (and you don't need radio inputs), just omit the <form> element. But really you should be using progressive enhancement: make the form work from plain HTML first, with a proper method="POST" action="ajaxfulfill.php", and then build a trivial AJAX function on top of that.
username = "<?=$_SESSION['username']; ?>";
Script injection. Instead:
username= <?= json_encode($_SESSION['username'], JSON_HEX_TAG); ?>
And:
data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,
You would need to use encodeURIComponent(...) over each of the values in a URL-encoded-form-submission, or special characters will break it. Better to let jQuery do that for you:
data: {amount: amount, index: index, item: item, username: username},
or even simpler, drop all the manual reading of field.val() and just use the existing serialize function that does it all for you:
data: $(this).serialize(),
(Assuming this is now the form you're handling onsubmit for... if it were the submit button, you'd have to say $(this.form).)
Do you really want to be taking the username from user-submitted POST data, which they might have changed? Unless usernames are deliberately security-free, it would seem a better idea to get it from the session whence it came.
First thing that you need to do is isolate the problem. Chrome v4.0.249.27 (on OS X, at least) comes with developer tools that you'd probably find useful. See what Chrome is doing when you click that button. You might also want to add ".ajax" to the list of "watched expressions" in the "Scripts" tab of the Developer Tools.
The Developer Tools can be found through View » Developer » Developer Tools.
You can do a few things to diagnose this yourself:
Shift + Ctrl + J in Chrome to launch the Javascript console and enable debugging. Stick breakpoints and step through your function
Watch the Javascript error/warnings console (even in your other browsers)
I realise this is an old post, but I have just had similar symptoms in my project and ended up here trying to find a solution.
I followed some of the advice here about debugging and realised that Chrome does not update the same as other browsers. Changes I had made in the js code, and css were instantly updated in Safari and Firefox with a normal refresh, but Chrome needs a Hard Reload and Cache clear before it updated those same items.
I'm not saying this is the cure for all the issues mentioned above, but it solved my problem.