Javascript text区域和复选框导致Firefox中的提交按钮失败

我有一个带有onclick事件的php上传按钮。直到最近，它才在Firefox67上运行，但在悬停时不会改变，也不再可以点击。但同样的按钮在Chrome中也可以正常工作

我将问题隔离到两个表单元素：textarea和checkbox。当我在submit按钮上方插入其中一个按钮时，它将不再工作（光标不会更改，按钮也不再提交）。大约两周前，我用php测试了这个按钮，效果非常好。现在它不再工作了

以下是整个页面代码：

<div class="center_text_grid flex-item joinpage_text">Introductory sign-up page text goes here.<br></div><br><br>

<!-- ________________ -->

<form action="register.php" method="post" name='register' id='register'>

    <div><input type="hidden" id="datefield" name="datefield" value="Today"></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd" style="padding-left:12.5%;">
    <input type="text" class="signup_join" autofocus="autofocus" placeholder="Your email address" id="email_field" name="email_field" style="width:80%; font-size: 18px;" required></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd" style="padding-left:12.5%;"><input type="text" class="signup_join" autofocus placeholder="First Name (optional)" id="firstname" name="firstname" style="width:80%;"></div>

    <div class="center_text_grid flex-item mktg_text EMail_Pwd" style="padding-left:12.5%;">
    <input type="text" class="signup_join" autofocus placeholder="Last Name (optional)" id="lastname" name="lastname" style="width:80%;"></div><br>

<!-- THE SUBMIT BUTTON WORKS HERE WITH EVERYTHING BELOW COMMENTED OUT -->

    <textarea maxlength="1000" id="comments" name="comments" cols="3" rows="3" autofocus placeholder="Comments"></textarea><br>

<label class="container">
   <span class="joinpage_checkbox">Add me to your email list</span>
  <input type="checkbox" id="ckbx" checked="checked" value="Yes">
  <span class="checkmark"></span>
</label>

<!-- THE SUBMIT BUTTON STOPS WORKING HERE WITH EITHER OR BOTH OF TEXTAREA AND CHECKBOX -->

<div class="center_text_grid flex-item EMail_Pwd" style="padding-left:27%;"><button class="btn_joinnow" style="color:rgb(255,255,255);" id="btn_submit" onclick="GetDate(); GetCkBx(); CollectData();">Click here to sign up</button></div>

<!--CollectData();-->

<script>
function GetDate() {
    var d = new Date();
    var month = d.getMonth()+1;
    var day = d.getDate();
    var output = d.getFullYear() + '/' + month + '/' + day;
    console.log(output);
    document.getElementById("datefield").value = output; }
</script>

<script>
function GetCkBx() {
    var ckbxYN = $("#ckbx").is(':checked');
     document.getElementById("checkbox").value = ckbxYN; }
</script>

<script>
function CollectData() {
    form_data = $('form').serialize()
    return $.ajax({
        type: "POST",
        url: "register.php",
        data: form_data,
        success: function (responseText) {
        },
        error: function (error) {
            console.log("Okay, I failed" + error);
        }
    });
}
</script>

</form><br>

<br><br><br>

介绍性注册页面文本显示在此处。







将我添加到您的电子邮件列表中
单击此处注册
函数GetDate（）{
var d=新日期（）；
变量月份=d.getMonth（）+1；
var day=d.getDate（）；
var输出=d.getFullYear（）++'/'+月+'/'+日；
控制台日志（输出）；
document.getElementById（“datefield”）.value=output；}
函数GetCkBx（）{
var ckbxYN=$（“#ckbx”）.is（'：checked'）；
document.getElementById（“复选框”）.value=ckbxYN；}
函数CollectData（）{
form_data=$（'form'）。serialize（）
返回$.ajax({
类型：“POST”，
url:“register.php”，
数据：表格数据，
成功：函数（responseText）{
},
错误：函数（错误）{
log（“好的，我失败了”+错误）；
}
});
}

因此，问题在于这两者中的一个或两个：

    <textarea maxlength="1000" id="comments" name="comments" cols="3" rows="3" autofocus placeholder="Comments"></textarea><br>

<label class="container">
   <span class="joinpage_checkbox">Add me to your email list</span>
  <input type="checkbox" id="ckbx" checked="checked" value="Yes">
  <span class="checkmark"></span>
</label>

将我添加到您的电子邮件列表中

两个大谜团是为什么它一直工作到最近，为什么它在Chrome中工作，而在Firefox中却不工作

谢谢你在这方面的帮助

编辑：

为了响应下面的请求，这里是register.php，其中包含敏感信息的虚拟值：

<?php
// PHP file upload using PDO
header('Content-type: application/json');
echo json_encode($array);

$params = [
    'host' => '000.000.000.000',
    'port' => '5432',
    'user' => 'username',
    'pwd' => 'password',
    'db' => 'dbname' ];

try {
$pdo->beginTransaction();
    $sql = "INSERT INTO psq01 ('"
. implode("','", $fields) . "') VALUES (?,?,?,?,?,?,?)";
    $stmt = $pdo->prepare($sql);
    foreach ($data as $row) $stmt->execute($row);
    $pdo->commit();
} catch (PDOException $e) {
    error_log($e->getMessage());
    $pdo->rollBack();
}

?>

---

更新代码中的错误出现在

document.getElementById（“复选框”）.value=ckbxYN；}

如果目标是无效的html ID，则应以
ckbx
为目标

提示：默认情况下，未选中的复选框不会到达请求，为此，请创建一个类型为hidden且名称与复选框相同的输入，以伪造复选框的默认值

因此，如果复选框未选中，则将发送隐藏字段

对此进行更改：


为此：



请参阅下面的代码：



此处显示介绍性注册页面文本。







将我添加到您的电子邮件列表中
单击此处注册
函数GetDate（）{
var d=新日期（）；
变量月份=d.getMonth（）+1；
var day=d.getDate（）；
var输出=d.getFullYear（）++'/'+月+'/'+日；
控制台日志（输出）；
document.getElementById（“datefield”）.value=输出；
}
函数GetCkBx（）{
var ckbxYN=$（“#ckbx”）.is（'：checked'）；
document.getElementById（“ckbx”）.value=ckbxYN；
}
函数CollectData（）{
form_data=$（'form'）。serialize（）
返回$.ajax({
类型：“POST”，
url:“register.php”，
数据：表格数据，
成功：函数（responseText）{}，
错误：函数（错误）{
log（“好的，我失败了”+JSON.stringify（错误））；
}
});
}





我得到一个此行错误：
document.getElementById（“checkbox”）.value=ckbxYN
（这毫无意义，因为您正在获取前一行中的值，并尝试将其分配回checkbock，但使用了
checkbox
作为id，而不是
ckbx
）下一个错误是关于未定义
ShowAjax
，您在按钮的
onclick
中调用的函数，但在您发布的代码中我看不到任何地方。当我删除呼叫时，表单会被发送两次。每个AJAX一次，浏览器一次，因为您没有停止提交事件。Chris，ShowAjax只是在单击按钮并提交数据后显示另一个页面。它很长，但如果你需要的话，我会编辑后发布。我以前测试过这个页面，脚本都可以提交，但是最近由于我上面显示的两个html元素，点击按钮已经停止了按钮的功能。关于你上面的第一条评论，你是否让提交按钮像现在一样工作。我甚至走不了那么远。我的看法是：谢谢你的回答。我现在就测试一下，然后把结果发回来。同时，没有复选框的textarea框也有同样的问题。为什么TeXTaReA框会导致同样的问题？我会考虑重构< <代码> JavaScript < /Cord>代码，因为您使用了<代码> jQuery < /C> >，您不必用内嵌的JavaScript将HTML代码弄乱。你不需要3个标签，一个就足够了，只要把你的JS代码放进去就行了。你的代码在没有文本区的情况下也可以工作。作为一种形式，JS代码应该在文件中；为了方便起见，我将其与html内联。再次感谢你的帮助。