提交按钮不起作用（html、js、php）

Question

我有一个简单的提交按钮，其中有一个字段供访问者输入电子邮件地址。当他们点击按钮时，它应该将他们的电子邮件添加到 csv 文件中，然后显示弹出感谢消息。

目前，当用户单击按钮时，唯一会发生的情况是 URL 更改并重新加载相同的页面，但不会将任何内容添加到 csv 文件中，并且不会出现弹出感谢消息。

$('#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})\.([a-z]{2,6}(?:\.[a-z]{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>

这里是相关的php文件

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

如果我将 (action="import.php") 添加到 HTML 代码中（将这一行从 form id="contacts_form" method="post" .....更改为 form id="contacts_form" action=" import.php" method="post" )，然后它成功地将电子邮件地址添加到 csv 文件中。但是，当我进行此更改时，点击提交后会发生什么，而不是停留在同一页面并打开弹出式感谢消息，而是将站点访问者带到一个空白的 import.php 页面。

有什么建议吗？

======

Google Chrome 控制台中的浏览器错误

[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

一旦表单被提交，它将被发送到任何定义的 url

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

由于没有这样的东西，它会被发送回当前所在的表单。

这意味着 javascript 没有被执行。为了防止重新加载并允许执行 javascript，您可以通过添加来阻止表单执行其默认行为（见上文）

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

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

页面不会重新加载，你的JS代码会被执行。

旁注：

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

封闭的 div 标签对我来说似乎有点过头了。您不妨将 css 类添加到输入字段。

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

Answer 2

当我检查您的控制台日志时，我注意到的第一件事是您使用 HTTPS 协议访问您的页面，但是您通过 HTTP 向另一个 URL 发送了请求。第二件事是您应该在代码中包含flipclock.js 和flipclock.css 文件，但实际上您并没有这样做。因此，要在您的页面中包含 FlipClock 脚本和样式表文件，请在其中添加以下行：

<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>

但是请检查 FlipClock 的较新版本，因为我不确定它的版本是否是最新版本。 希望我的回答对你有帮助