Prevent form submitting

Hi Paul,

Could you please provide a bit more details. How exactly you have implemented the form? The link to the page with the form may be also helpful.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi,

I have added a standard form via Nicepage. I then click the submit button > Form (tab) > Send to and leave the default "#". If I try and add "javascript: sendData()" my function is not invoked as this code is added to the "action" attirbute of the form.

Therefore, I run some custom javascript in a nicepage HTML block at the bottom of my page to add a click event to my forms Submit button so that my function will run...

var submitlink = document.getElementsByClassName("u-btn-submit")[0];

submitlink.onclick = function( event ) {

// if (event.preventDefault) event.preventDefault();

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://logicappurl");
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
var item = {

    name: document.getElementsByName("name")[0].value,
    email: document.getElementsByName("email")[0].value,
    phone: document.getElementsByName("phone")[0].value,
    message: document.getElementsByName("message")[0].value

};

// document.getElementsByName("sent message").classList.remove("hidden");

xhr.send(JSON.stringify(item));

// return false;

};

Everything works as epxected but I get a jQuery error...

Access to XMLHttpRequest at 'file:///private/var/folders/4r/s7z5_ylj3w79ycvbllv8ttn80000gn/T/Nicepage/chrome/index.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
send @ jquery.js:6
ajax @ jquery.js:6
submit @ nicepage.js:7
dispatch @ jquery.js:4
v.handle @ jquery.js:4
trigger @ jquery.js:4
(anonymous) @ jquery.js:5
each @ jquery.js:4
each @ jquery.js:4
trigger @ jquery.js:5
b.fn.(anonymous function) @ jquery.js:6
click @ nicepage.js:7
dispatch @ jquery.js:4
v.handle @ jquery.js:4

Hi Paul,

In general, we do not provide support for custom coding but js error you mentioned contains all the information you need:

Access to XMLHttpRequest at 'file:///private/var/folders/4r/s7z5_ylj3w79ycvbllv8ttn80000gn/T/Nicepage/chrome/index.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

But you're making a preview in browser and in this case, the page is opened from a local drive using "file:///" protocol. This causes an error.
You will not see this message if you load a page on a webserver through the http or https protocol.
...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

I think you are missing the point. I know about the CORS error. That's expected as im working from my dev environment.

The original question was "How can I stop a form from submitting?". This is usually simple but becuase you are using jQuery it is doing something unusual under the hood.

I've tried every trick in the book to stop the form submitting but it still attempts to send.

For example, I grab a handle to the form and try...

var frm = document.getElementsByTagName("form")[0];
frm.setAttribute("onsubmit", "event.preventDefault(); return false;");

But still the form tries to submit givving a javascript error (the CORS in my dev envirnoemnt and a 405 in live environment)...

jquery.js:6 POST http://liveenvironment.net/Home.html 405 (Method Not Allowed)
send @ jquery.js:6
ajax @ jquery.js:6
submit @ nicepage.js:7
dispatch @ jquery.js:4
v.handle @ jquery.js:4
trigger @ jquery.js:4
(anonymous) @ jquery.js:5
each @ jquery.js:4
each @ jquery.js:4
trigger @ jquery.js:5
b.fn.(anonymous function) @ jquery.js:6
click @ nicepage.js:7
dispatch @ jquery.js:4
v.handle @ jquery.js:4

As you can see, its jQuery thats trying to send the form but I need to stop it. Im sure your dev guys will have a simple answer for this.

Paul,

You can try to subscribe to click handler

$(".u-clearfix.u-form-spacing-15.u-form-vertical.u-inner-form a").click(myHandler);

and then call preventDefault in your handler

the selector my deffer depending on your form settings.

...................................................
Sincerely,
Chris
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Last edited 04 December 2018 by Support Team

Im getting $ is not defined when I try and use jQuery.

If I reference the form using...

document.querySelector(".u-form-spacing-15.u-form-vertical.u-inner-form a").click(function(event) {

event.preventDefault(); 
return false;

});

The form still submits?

Hi Chris - sorry to be a hasstle.

I've also tried...

document.querySelector(".u-form-spacing-15.u-form-vertical.u-inner-form a").removeEventListener("click", function(e) {

e.preventDefault();
return false;

});

but still the form submits.

Paul,

Try this solution by adding this code to Page Properties in Additional Head HTML

<script>
    function clickHandler(event) {
      event.preventDefault(); 
      event.stopPropagation();
      console.log('stopped');
    }

    document.addEventListener("DOMContentLoaded", function(event) {
        document.querySelector("form .u-btn.u-btn-submit").addEventListener("click", clickHandler)
    });
</script>

...................................................
Sincerely,
Chris
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp