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>

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'];
?>

如果还有其他需要，我很乐意post。

Answer 1

我认为 $('#emneid').val() returns 与 'film' 不同，您的听众永远不会依恋。

能否请您仔细检查 $('#emneid').val();

的返回值

Answer 2

<button> 没有属性 type，但是 <input> 有，尝试将 <button> 更改为 <input>

UPD

id 为#emneid 的标签在哪里？

Answer 3

试试这个。请用我的 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>

Answer 4

除了其他评论外，我认为您需要为您的按钮添加正确的名称，否则您的 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 来 post 您的数据，而无需 post 通过 JS/Jquery 处理数据。如果您想在发送之前进行一些数据验证，您可以在提交之前调用一个事件，如 post 中所述：()

我认为您的选择器触发功能可能有问题，我不知道提交功能，但可以尝试使用 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
     } 
});

JQuery: event.preventDefault() 没有阻止刷新

JQuery: event.preventDefault() isn't preventing a refresh

php

forms

jquery

submit