Form submission canceled because the form is not connected when I try to hide modal Jquery

Question

I am currently working trying to submit a form and hide the modal after submit.

HTML

<div class="overlay">
 <div id="popMainWrpDiv">
  <div id="closeBtn"><img src="close button img" /></div>

  <div id="headCont">
  <h1>Let&rsquo;s get you started!</h1>

  <h2>Please enter your email address here:</h2>
</div>

<p>You&rsquo;ll also receive a subscription to our free e-letter: <em>Health Watch</em>!</p>
<form id="myForm" align="center" action="https://signupapp2.com/signupapp/signups/process" method="post">
  <input name="signup.listCode" type="hidden" value="Blah Blah" />
  <input name="signup.sourceId" type="hidden" value="Blah Blah" />
  <input id="emailField" placeholder="Enter your email address" type="text" name="signup.emailAddress" />
  <input class="submit-gen" type="submit" value="Click to Proceed"id="emailCaptureButton"></input>
</form>

jQuery Script

<script>
 $(window).load(function() {
  if (!localStorage.getItem("emailCapture")) {

  $('.overlay').show();
}
$('.subscribeNow').click(function() {
  $('.overlay').show();
});
$('#closeBtn').click(function() {
  $('#popMainWrpDiv').hide();
  $('#popMainWrpDiv').remove();
  $('.overlay').hide();
  $('.overlay').remove();
});



$("#myForm").submit(function() {
  console.log('WTF');
  $(this).hide();
  $(this).remove();
  $('.overlay').hide();
  $('.overlay').remove();
 })
});
</script>

I have tried everything, from removing the class, to hiding it, switching from button to input both with type="submit". I still receive the same "Form submission canceled because the form is not connected" error. But if I don't hide it the form goes through but the page redirects, but the form goes to back end. I have tried eventpreventdefault but then test email would not show in database. I am just not sure what else to try I felt like I have tried everything. Lastly Sorry about the antiquated code this was passed down to me from a former co worker

You might check out this question, it referenced the same error message. It seems the two approaches are to attach the form to the document body or two ensure there is not a race condition present. https://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-is-not-connected/42150597 — JakeofSpades, Mar 22 '19 at 19:28

score 0 · Answer 1 · answered Mar 29 '19 at 17:04

0

I found the solution was to make the form target a dummy iframe and redirect the form process there. This was the page that helped me

How to submit html form without redirection?

answered Mar 29 '19 at 17:04

AAvelleyra

23
1
5

Form submission canceled because the form is not connected when I try to hide modal Jquery

1 Answers1