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

Question

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

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

我已经使用警报进行了测试，并且 JQuery 可以在 if() 中运行，但之后出现了一些问题。

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

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>

jQuery

$(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

除了其他 cmets，我认为您需要为您的按钮添加正确的名称，否则您的 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 发布它。如果您想在发送之前进行一些数据验证，您可以在提交之前调用一个事件，如本文所述：(Validate form before submit 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>没有type属性，但<input>有，试试把<button>改成<input>

更新

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>