I've got a form that is submitted via ajax and is then updated by the response.
Before the submit takes place I execute the following code which works the first time but after that on the second submit, the code does not execute.
$(document).ready(function(){
$('.edit_customer').submit(function(event) {
console.log("test");
if(document.getElementById("sameAsBilling").checked == true){
$("#customer_addresses_attributes_1_line_1").val($("#customer_addresses_attributes_0_line_1").val());
$("#customer_addresses_attributes_1_line_2").val($("#customer_addresses_attributes_0_line_2").val());
$("#customer_addresses_attributes_1_city").val($("#customer_addresses_attributes_0_city").val());
$("#customer_addresses_attributes_1_state").val($("#customer_addresses_attributes_0_state").val());
$("#customer_addresses_attributes_1_zip_code").val($("#customer_addresses_attributes_0_zip_code").val());
}
});
});
I've also tried changing the listener to this:
$(document).on("submit", ".edit_customer", function(){ console.log("test");});
This code doesn't execute at all.
One thing to note is I am using Ruby on Rails which uses Rails UJS. I'm not sure why the second line of code isn't solving the issue. Any help is appreciated.
Thanks in advance.
UPDATE:
I have another element in my form that I use to fire JS using the same type of code and it works fine everytime. Here is the code:
$(document).on('click', '#qb-customers-btn', function(){
//code here makes an ajax call and loads in data
});
<span class="input-group-text bg-success text-light" id="qb-customers-btn">Load</span>
Update:
I ended up abandoning this and just used a button click listener, but now I am back with the same exact problem on a different form on a different page. I've tried everything I can think of. The only thing that works at the moment is wrapping the listener in an init function, calling init on document.load and then calling init again after the ajax has erased and reloaded the form on the page.
I'm creating a website game and currently I am struggling with something I will name "dialogue".
Initially I tried to approach this by creating a form element, but clicking enter or submitting it ended up with page refresh, which ruins everything.
So I used inpute type text without form that looks like this:
You are
<input type="text" id="dead">
<input type="submit" onclick="dead()">
and dead function looking currently like this, later it's gonna check for certain value, and if the value is true it's gonna run another code:
var talk = document.getElementById("dead").value;
function dead() {
alert(talk);
}
And I don't know how to save input from a form so it would be detected by JS and then used as variable in boolean check. How can I solve this problem? If there is a way to use a form tag without refreshing the page that could also work.
You can handle the submit event of your form like this:
document.getElementById('yourFormId').onsubmit = function(e) {
// your code goes here...
e.preventDefault(); // this will prevent the default operation of your form within this event
return false;
}
Or create a function:
function handleForm(e) {
// your code goes here...
e.preventDefault();
return false;
}
And add this to your form tag:
<form onsubmit="return handleForm(this);">
To be able sending some value without refresh the page you can use Asynchronous JavaScript + XML (AJAX) and if you're working with pure Javascript without some frameworks you can see a good documentation about Ajax.
But of course I suggest to use some frameworks like Jquery to make your works more easier
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 multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks
Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.
I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved
i have problems with ajax requests and simple <input type="submit"/>.
i use to load views inside other views, modular i mean, with jquery using .load(url) from one view to another.
so the problem is that if i load view_2 inside view_1 and the js script for view_2 is inside view_1 i need to use live('click') for example to launch an xhr request from view_2, so when i try it launches 3 (multiple) xhr at same time, instead of only 1 at time, don't know why.
the only thing i know is:
using live('click') in view_1 it launches 3 multiple XHR.
using click() in view_1 it doesn't work(obviously i think).
using click() directly inside view_2 it works (but i can't use js
in loaded views, i can use js only in "parents" views)
the functions are really simple, really don't know why i have this problem (i also disabled submit in ajax beforeSend) check this is a view_1 code which runs on loaded view_2 and launches 3 XHR for click :|
$(document).ready(function(){
$('#save-doc').live('click',function(){
var _title = $('#doc-title').val();
var _doc = $('#doc-doc').val();
update_doc(url_update_doc,{'title':_title,'doc':_doc,'id_doc':_choosed_doc,'id_project':id_project},this);
});
});
function update_doc(_url,_data,_starter){
$.ajax({
type:'POST',
data:_data,
url:_url,
dataType:'json',
beforeSend:function(){
$('.ajax-loading').show();
$(_starter).attr('disabled','disabled');
},
error:function(){
$('.ajax-loading').hide();
$(_starter).removeAttr('disabled');
},
success:function(json){
$('.ajax-loading').hide();
$(_starter).removeAttr('disabled');
if(json.error){
$('#error-title').html(json.error_title);
$('#error-doc').html(json.error_doc);
$.scrollTo('.append-form-edit-doc','fast');
}
if(json.confirm){
$.scrollTo('#top','fast');
$.gritter.add({
title:'Document Saved',
text:json.confirm
});
}
}
});
}
If that's a submit button inside the form then unless you prevent the default action, the form will be submitted. (That'd account for 2 POSTs, but not three.)
Remember that .live() is binding the event handler to the document itself. With that in mind, it is searching for #save-doc throughout the document on every click.
If there are multiple elements in the document with the 'save-doc' ID then they'll all be triggered.
However, what I bet is happening to you is you may have multiple forms layered which are all being executed by this one input.
Edit: Third possibility, is what Pointy mentions. Executing a submit via your event handler and another submit occurring because of browser behavior.
Please provide the HTML and what is being loaded into them.