Textarea和复选框导致Firefox中的“提交”按钮失败

时间：2019-07-18 17:14:14

标签： javascript php jquery html

我有一个带有onclick事件的php上传按钮。直到最近，它仍可在Firefox 67中运行，但在悬停时不会更改，并且不再可单击。但是相同的按钮在Chrome中可以正常使用。

我将问题分为两个表单元素：textarea和checkbox。当我在“提交”按钮上方插入它们中的任何一个时，它不再起作用（光标不变，按钮不再提交）。大约两周前，我用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>

所以问题出在其中之一或全部：

    <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();
}

?>

1 个答案:

答案 0 :(得分：1)

您更新后的代码中的错误位于

的GetCkBx函数中

document.getElementById("checkbox").value = ckbxYN; }

您定位了无效的html ID，您应该定位了ckbx。

  

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

     

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

     

从此更改：

     

<input type="checkbox" id="ckbx" checked="checked" value="Yes">

     

对此：

     

<input type="hidden" name="my_custom_checkbox" value="No">

     

<input type="checkbox" id="ckbx" name="my_custom_checkbox" checked="checked" value="Yes">

请参阅以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="hidden" name="my_custom_checkbox" value="No">
  <input type="checkbox" id="ckbx" name="my_custom_checkbox" 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("ckbx").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" + JSON.stringify(error));
        }
      });
    }
  </script>

</form><br>

<br><br><br>

相关问题
最新问题