Q:

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

I've been building a mail form that is supposed to pass the information into a php document that handles sanitization and mailing, but I didn't want it to refresh so i decided to use JQuery and AJAX. I'm fairly new to JQuery and haven't used any AJAX before so I am a bit of a rookie when it comes to this...
Even though I have the .submit(function(e){e.preventDefault();}); it still submits the ordinary way and gives an error when it can't find film_mail in the PHP. Which means that it isn't stopping the submit and isn't passing the code to the PHP.
I've tested with alerts and the JQuery works in to the if() but after that some thing goes wrong.
Here is the code that causes the issue (some of the classes and ids are in swedish but that shouldn't cause an error...)
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'];
?>

If there is anything else that is needed i'd be happy to post it to.

A:

I think $('#emneid').val() returns something different than 'film' and your listener is never attached.
Can you please double check the returned value of $('#emneid').val();

