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

Question

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.

schildi · Accepted Answer · 2018-08-22T11:52:00.723

0

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();

edited Aug 22 '18 at 11:52

answered Aug 22 '18 at 11:37

schildi

136
7

It is returning film, i tried it with alert() and it works all the way into the if() statement – CactusFruit Aug 22 '18 at 12:01
Can you execute your `$('#film_form').submit(function(e) {...});` js code in the browser console and submit the form again? For me your code (if condition is just true) works fine – schildi Aug 22 '18 at 12:10
It works when i run it through the console so then my problem must ly elsewhere, this needs further investigation! thank you for the tip of running it through the console :) – CactusFruit Aug 22 '18 at 13:10

Karakayn · Answer 2 · 2018-08-22T15:21:27.483

In addition of other comments, I think you need to add the correct name for you button or your PHP form will not work.

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

Please also take care in production / later use, don't use directly $_POST or your code will be vulnerable from some SQL injection and so on. Take a look at htmlspecialchars function.

Edit :

I think you can just use HTML form and php to post your data, without posting it via JS/Jquery. If you want to have some data validation before sending it, you can just call an event before submit like described in this post : (Validate form before submit jquery)

I think you maybe have a problem with your selector to trigger the function, I don't know the submit function but maybe try with on('submit') or at least it will work with 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
     } 
});

I tried this and it no longer gives an error!! it still refreshes the page but absolutely one huge step forward thanks :) — CactusFruit, Aug 22 '18 at 12:53
I did the same mistake each time I have a form in HTML, you need to put a name foreach input/button/html elements if you want to retrieve it in PHP. Just always remember it's retrieve by name and not with Id like we thought ;) I think you can just post your form using only HTML and php and just check for validation. I will update my answer. — Karakayn, Aug 22 '18 at 15:06

ambrous · Answer 3 · 2018-08-22T11:48:00.993

-1

<button> does not have attribute type, but <input> has, try change <button> to <input>

UPD

Where is the tag with id of #emneid?

edited Aug 22 '18 at 11:48

answered Aug 22 '18 at 11:39

ambrous

194
2
11

this form is part of a larger form where the id #emneid is, that code is working so i thought that it wasn't necessary to include. – CactusFruit Aug 22 '18 at 11:58
without if (emne == 'film') condition, all works fine. Maybe really emne is not equal to 'film'? – ambrous Aug 22 '18 at 12:02

shubham chhapre · Answer 4 · 2018-08-22T12:15:44.463

Try this. Please replace your HTML with my HTML code.

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

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

4 Answers4