1

I have created an HTML5 contact form as part of a check-out system on this website: http://www.organik-music.com/.

I have set it up so that a previously hidden DIV is shown when the user submits the form. This DIV contains the final payment button. Basically, I would like the purchaser to provide some information before they are able to complete their payment. Payment is being made via a third-party plugin which sends the data to PayPal, the site is a custom Wordpress installation.

In Chrome and other browsers, this DIV is only shown if the required fields are filled out. These required fields are marked with required="true". In Safari, however, it has not been working, so I appended the following to the form:

        <script>
var form = document.getElementById('datacapture');
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
    if (!event.target.checkValidity()) {
        event.preventDefault(); // dismiss the default functionality
        alert('Please complete all required fields'); // error message
    }
}, false);
</script>

While this creates a pop-up box that prompts the user to complete the form, and requires this before the data will be sent to the action php, the hidden DIV is also shown at this point regardless of whether the form has been properly completed.

The show/hide script I am using for my hidden DIV (ID "complete") is as follows:

<script>
function showHide() {
var div = document.getElementById("complete");
if (div.style.display == 'none') {
 div.style.display = '';
}
else {
div.style.display = 'block';
} }
<script>

So basically I want the same functionality in Safari that I'm currently getting in Chrome etc - the hidden DIV "complete" only shows up on successful submission of the form, including all required fields. I am a little restricted in what sorts of mail form I can use as it needs to work with the plugin.

Many thanks in advance! :)

Matt Mook Mak
  • 29
  • 1
  • 7
  • I think this is a duplicate of [OSX Safari Frame Load Interrupted](http://stackoverflow.com/q/30459045/369446) – Michael Shopsin Nov 03 '15 at 15:09
  • Thanks for the link Michael, I took a look and can see there might be a connection/similar issue, but can't work out how to relate it to the problem I'm having...? :'( Could you explain what I need to look at if possible, would be much appreciated – Matt Mook Mak Nov 04 '15 at 16:09
  • You're trying to script the result of an ajax call in Safari. I found that trying to fake click on div's I added or change the url path in Safari caused frame loading interrupt problems or other errors. Apple seems to interpret anything that overrides expected behavior in Safari as a security violation. – Michael Shopsin Nov 04 '15 at 16:26
  • I see, thanks for the info Michael. Safari is a bit of a nightmare generally to be honest haha. The thing is, the specific hide/show functionality is working fine in Safari, it's the fact that it shows the hidden div when the user hits Submit, even if the form hasn't been properly completed. Is there any practical workaround to this? Cheers :) – Matt Mook Mak Nov 04 '15 at 16:34

1 Answers1

0

I've found that trying to fake click on div's I added or change the url path in Safari caused frame loading interrupt problems or other errors. Apple seemed to interpret anything that overrides expected behavior in Safari as a security violation. My workaround for Safari was to use a regular form with post and end up with a page reload. In my case the page interaction was heavy, requesting a report so the users didn't mind a reload for an action that could take a few seconds on the server end anyways.

Community
  • 1
  • 1
Michael Shopsin
  • 2,055
  • 2
  • 24
  • 43