JQuery：event.preventDefault() 不会阻止刷新

Question

我一直在构建一个邮件表单，该表单应该将信息传递到处理清理和邮件的php文档中，但是我不希望它刷新，所以我决定使用JQuery和AJAX。我对 JQuery 相当陌生，以前没有使用过任何 AJAX，所以在这方面我有点菜鸟......

即使我有.submit(function(e){e.preventDefault();});它仍然以普通方式提交，并在 PHP 中找不到film_mail时给出错误。这意味着它不会停止提交，也不会将代码传递给 PHP。

我已经测试了警报，JQuery 可以在if()工作，但在那之后出现了一些问题。

这是导致问题的代码(一些类和 id 是瑞典语，但这不应该导致错误......

.HTML

<div id="film" class="hidden" >
<form id="film_form" action="formular-send.php" method="post">
<input id="film_mail" type="text" name="mail" placeholder="Mail adress">
<input id="film_nr" type="number" name="nr" min="1">
<input id="film_antal" type="number" name="antal" min="1">
<input id="film_namn" type="text" name="namn" placeholder="Namn">
<input id="film_adress" type="text" name="adress" placeholder="Adress">
<input id="film_ort" type="text" name="ort" placeholder="Ort">
<input id="film_postnr" type="text" name="postnr" placeholder="Postnummer">
<textarea id="film_medelande" name="medelande" placeholder="Medelande"></textarea>
<button id="film_submit" type="submit" name="submit">Skicka</button>
<div class="error-mesage" ></div>
</form>
</div>

杰奎里

$(document).ready(() => {
var emne = $('#emneid').val();
if (emne == 'film') {
$('#film_form').submit(function(e) {
e.preventDefault();
var mail = $('#film_mail').val();
var nr = $('#film_nr').val();
var antal = $('#film_antal').val();
var namn = $('#film_namn').val();
var adress = $('#film_adress').val();
var ort = $('#film_ort').val();
var postnr = $('#film_postnr').val();
var medelande = $('#film_medelande').val();
var submit = $('#film_submit').val();
$.post('formular-send.php', {
film_mail: mail,
film_nr: nr,
film_antal: antal,
film_namn: namn,
film_adress: adress,
film_ort: ort,
film_postnr: postnr,
film_medelande: medelande,
film_submit: submit,
emne: emne
});
// I heard that .load() had been removed in 3.0 so i tried to use $.post() because I thougt that might work but it sadly didn't...
// but I kept the .load() incase it'd be useful
/*$('#film_form').load('formular-send.php', {
film_mail: mail,
film_nr: nr,
film_antal: antal,
film_namn: namn,
film_adress: adress,
film_ort: ort,
film_postnr: postnr,
film_medelande: medelande,
film_submit: submit,
emne: emne
});*/
});
} else {
}
})

.PHP

<?php 
$filmmail = $_POST['film_mail'];
?>

如果还有其他需要的地方，我很乐意将其发布到。

Answer 1

我认为$('#emneid').val()返回的东西与"电影"不同，你的听众永远不会依恋。

您能否仔细检查$('#emneid').val();的返回值

Answer 2

除了其他注释，我认为您需要为您的按钮添加正确的名称，否则您的 PHP 表单将不起作用。

<?php 
$filmmail = $_POST['film_mail']; //for the moment your need to put $_POST['mail'] because your button is named mail instead of film_mail
?>

在生产/以后使用时也请小心，不要直接使用 $_POST 否则你的代码会容易受到某些 SQL 注入等的攻击。看看htmlspecialchars函数。

编辑：

我认为你可以只使用HTML表单和php来发布你的数据，而不是通过JS/Jquery发布。如果你想在发送之前进行一些数据验证，你可以在提交之前调用一个事件，如这篇文章所述：(在提交jquery之前验证表单(

我认为您的选择器可能遇到触发该功能的问题，我不知道提交功能，但可能会尝试使用on('submit')或者至少它可以与on('click')一起使用。

$(document).on('click', '#film_submit button[type=submit]', function(e) {
var isValid = $(e.target).parents('form').isValid();
if(!isValid) {
e.preventDefault(); //prevent the default action
} 
});

Answer 3

><button>没有属性类型，但<input>有，请尝试将<button>更改为<input>

UPD

ID 为 #emneid 的标签在哪里？

Answer 4

试试这个。请用我的 HTML 代码替换您的 HTML。

<div id="film" class="hidden" >
<form id="film_form" action="formular-send.php" method="post">
<input id="film_mail" type="text" name="film_mail" placeholder="Mail adress">
<input id="film_nr" type="number" name="film_nr" min="1">
<input id="film_antal" type="number" name="film_antal" min="1">
<input id="film_namn" type="text" name="film_namn" placeholder="Namn">
<input id="film_adress" type="text" name="film_adress" placeholder="Adress">
<input id="film_ort" type="text" name="ort" placeholder="Ort">
<input id="film_postnr" type="text" name="film_ort" placeholder="Postnummer">
<textarea id="film_medelande" name="film_medelande" placeholder="Medelande"></textarea>
<button id="film_submit" type="submit" name="submit">Skicka</button>
<div class="error-mesage" ></div>
</form>
</div>