Текстовое поле и флажок приводят к сбою кнопки отправки в Firefox

У меня есть кнопка загрузки php с событием onclick. До недавнего времени он работал в 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.info(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.info("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();
}

?>

Я получаю сообщение об ошибке для этой строки: document.getElementById("checkbox").value = ckbxYN; (что в любом случае не имеет смысла, так как вы берете значение в предыдущей строке и пытаетесь присвоить его обратно флажку, но используете checkbox в качестве идентификатора вместо ckbx)

Chris G 18.07.2019 19:20

Следующая ошибка связана с тем, что ShowAjax не определена, функция, которую вы вызываете в кнопке onclick, но я нигде не вижу в опубликованном вами коде. Когда я удаляю вызов, форма отправляется дважды. Один раз для AJAX и один раз для браузера, так как вы не останавливаете событие отправки.

Chris G 18.07.2019 19:22

Крис, ShowAjax просто показывает другую страницу после нажатия кнопки и отправки данных. Это длинно, но я отредактирую, чтобы опубликовать его, если вам это нужно. Я тестировал эту страницу раньше, и все сценарии работают для отправки, но совсем недавно кнопка щелчка перестала функционировать как кнопка из-за двух элементов html, которые я показал выше.

RTC222 18.07.2019 19:25

Что касается вашего первого комментария выше, вы заставили кнопку отправки работать так, как сейчас. Я даже не могу зайти так далеко.

RTC222 18.07.2019 19:30

@PeterSmith Можете ли вы прикрепить register.php к этой странице?

StarShows Studios 18.07.2019 19:45

Вот мое мнение: jsfiddle.net/khrismuc/d2ekocL5

Chris G 18.07.2019 20:13

Спасибо за скрипку @Chis G - я тоже над этим поработаю.

RTC222 18.07.2019 20:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша ошибка в обновленном коде находится в функции GetCkBx на

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

Вы настроили таргетинг на недопустимый HTML-идентификатор, вам следует настроить таргетинг на ckbx.

Tip: By default, an unchecked checkbox will not reach the request, to make this happen, create an input with type hidden and the same name as the checkbox, to fake a default value for the checkbox.

As such, if the checkbox is unchecked, then the hidden field will be sent.

Change from this:

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

To this:

<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.info(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.info("Okay, I failed" + JSON.stringify(error));
        }
      });
    }
  </script>

</form><br>

<br><br><br>

Спасибо за ответ. Сейчас проверю и отпишусь о результатах. Между тем, текстовое поле без флажка имеет ту же проблему. Любое понимание того, почему поле textarea вызывает ту же проблему?

RTC222 18.07.2019 20:06

Я бы подумал о рефакторинге этого JavaScript кода, поскольку вы используете jQuery, вам не нужно путать HTML-код со встроенным JavaScript. И вам не нужно 3 тега <script>, достаточно одного, просто поместите в него свой JS-код.

darklightcode 18.07.2019 20:11

Ваш код работает без текстового поля. Формально код JS должен быть в файлах; Я поместил его в HTML для удобства. Еще раз спасибо за вашу помощь.

RTC222 18.07.2019 20:30

Другие вопросы по теме