У меня есть кнопка загрузки 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();
}
?>
Следующая ошибка связана с тем, что ShowAjax не определена, функция, которую вы вызываете в кнопке onclick, но я нигде не вижу в опубликованном вами коде. Когда я удаляю вызов, форма отправляется дважды. Один раз для AJAX и один раз для браузера, так как вы не останавливаете событие отправки.
Крис, ShowAjax просто показывает другую страницу после нажатия кнопки и отправки данных. Это длинно, но я отредактирую, чтобы опубликовать его, если вам это нужно. Я тестировал эту страницу раньше, и все сценарии работают для отправки, но совсем недавно кнопка щелчка перестала функционировать как кнопка из-за двух элементов html, которые я показал выше.
Что касается вашего первого комментария выше, вы заставили кнопку отправки работать так, как сейчас. Я даже не могу зайти так далеко.
@PeterSmith Можете ли вы прикрепить register.php к этой странице?
Вот мое мнение: jsfiddle.net/khrismuc/d2ekocL5
Спасибо за скрипку @Chis G - я тоже над этим поработаю.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваша ошибка в обновленном коде находится в функции 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 вызывает ту же проблему?
Я бы подумал о рефакторинге этого JavaScript кода, поскольку вы используете jQuery, вам не нужно путать HTML-код со встроенным JavaScript. И вам не нужно 3 тега <script>, достаточно одного, просто поместите в него свой JS-код.
Ваш код работает без текстового поля. Формально код JS должен быть в файлах; Я поместил его в HTML для удобства. Еще раз спасибо за вашу помощь.
Я получаю сообщение об ошибке для этой строки:
document.getElementById("checkbox").value = ckbxYN;(что в любом случае не имеет смысла, так как вы берете значение в предыдущей строке и пытаетесь присвоить его обратно флажку, но используетеcheckboxв качестве идентификатора вместоckbx)