Submit button not working (html, js, php)

Question

I have a simple submit button with one field for visitors to enter email address. When they hit the button, it's supposed to add their email to a csv file and then display a pop up thank you message.

Currently, when users click the button, the only thing that happens is the URL changes and the same page reloads, but nothing gets added to the csv file and the pop up thank you message does not appear.

 $('#contacts_form').on('submit', function(){ var msg = ''; var error = 0; var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([az]{2,6}(?:\.[az]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); if (.pattern.test($.trim($('#contacts_form #mail');val()))) {error = 1;msg = msg + '\n - Your E-mail'.} if (error){ $('#mail');addClass('active'); return false. }else{ var url = 'import;php'. var email = $.trim($('#contacts_form #mail');val()). $,post(url:{'email',email}.function(data){ $('#thank-you-subscribe');addClass('active'). $('#mail');removeClass('active'). $('#mail'),attr('value';''). $('#mail');val(''); }); return false; } return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-6 margin-top-50"> <form id="contacts_form" method="post"> <input type="text" id="mail" name="email" placeholder="Email address" value="" /> <div class="submit-button"><input type="submit" value="Subscribe" /></div> </form> </div> <div class="full-screen-popup" id="thank-you-subscribe"> <div class="close-layer"></div> <div class="simple-article center-align"> <a class="close-button">+</a> <h1>Thank You,</h1> <h4>We will notify you about any updates, stay tuned,</h4> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>

here is the associated php file

    <?
$email = strip_tags(trim($_POST['email']));
$file = 'email.csv';
$current = file_get_contents($file);
$current .= $email.';'."\n";
file_put_contents($file, $current);
?>

If I add (action="import.php") to the HTML code (changing this line from form id="contacts_form" method="post".....to form id="contacts_form" action="import.php" method="post" ), then it successfully adds the email address to the csv file. However, when I make this change what happens is after clicking submit, instead of remaining on the same page and opening the popup thank you message, the site visitor is taken to a blank import.php page.

Any suggestions?

======

browser errors in Google Chrome console

[URL]/:10 Mixed Content: The page at 'https://URL' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans:400,800&subset=latin,latin-ext'. This request has been blocked; the content must be served over HTTPS.


global.js:86 Uncaught TypeError: $(...).FlipClock is not a function
    at HTMLDocument.<anonymous> (global.js:86)
    at j (jquery-2.1.3.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.1.3.min.js:2)
    at Function.ready (jquery-2.1.3.min.js:2)
    at HTMLDocument.I (jquery-2.1.3.min.js:2)
contentscript.js:3 Content script called

URL/:1 Mixed Content: The page at 'https://URL/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans:400,800&subset=latin,latin-ext'. This request has been blocked; the content must be served over HTTPS.

Answer 1

Once the form is submitted it will be sent to whatever url is defined in

<form action="some_url_here"></form>

since there is no such thing, it gets sent back to were the form currently resides.

That means that the javascript does not get executed. To prevent the reloading and allow for the javascript to be executed, you can prevent the form to execute it's default behaviour (see above) by adding

$('#contacts_form').on('submit', function(){
    event.preventDefault()

    // ... the rest of your code follows here
}

The page will not be reloaded and your JS code will be executed.

Side note:

<div class="submit-button"><input type="submit" value="Subscribe" /></div>

the enclosing div tag looks like overkill to me. You might just as well add the css class to the input field.

<input class="submit-button type="submit" value="Subscribe" />

Answer 2

When I checked your console log, the first thing I noticed was that you use HTTPS protocol for visiting your page, but you send a request to another URL over HTTP. The second thing was that you should include flipclock.js and flipclock.css files in your code but you aren't actually doing that. So for including FlipClock script and stylesheet files in your page, add the following lines to it:

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>

But Please check for newer versions of FlipClock because I'm not sure about its version that it is the latest one or not. I hope my answer will help you