form still submitting even after using preventDefault and return false

Question

I have a very simple comment form, which submits through $.ajax. However, I'm having some problems with it refreshing on submit.

This happens even though I am using both e.preventDefault() and return false within my submission script.

I have looked at every single post I can find on StackOverflow and even various Fiddles, but have come across no solutions.

This is my JavaScript:

$(".f-track-actions__form").submit(function(ev){
    ev.preventDefault();

    var wave = $.cookie("cv"),
        wave = eval(wave),
        waveDuration = wave.getDuration();

    var child = $(this).children(".f-track-actions__form-comment");
    var cTime = (wave.getCurrentTime() / waveDuration) * 100;
    var pD = {
        'c': comment.val(),
        'i': child.attr('id'),
        't': cTime
    };

    $.ajax({
        type: "post",
        url: "/spectrum-rr/core/_func/functions/actionTrack.php",
        data: pD,
        success: function(data) {
            alert(data);
        }
    });

    return false;
});

HTML:

<form method="post" class="f-track-actions__form">
    <input class="f-track-actions__form-comment" type="text" placeholder="Comment on this track..." name="comment" id="c-1">
</form>

Thanks.

Your code should work fine. Is the event bound correctly? Are you running your code within document.ready? — Rory McCrossan, Nov 24 '16 at 10:23
@RoryMcCrossan yes it is. will display HTML now for you all :) — GROVER., Nov 24 '16 at 10:23
As an aside I'm sure there has to be a better way of achieving what you need that using `eval()` — Rory McCrossan, Nov 24 '16 at 10:24
@RoryMcCrossan for what I'm using it for, It is all that I can use at the current time. — GROVER., Nov 24 '16 at 10:25
it might be worth noting that this form is duplicated across the document through PHP. — GROVER., Nov 24 '16 at 10:28
Does the form exist when the page loads, or is it dynamically created/appended? — Rory McCrossan, Nov 24 '16 at 10:32
Then see the referenced question. You can't use your event binding method for elements that don't exist when the page is first loaded. — Barmar, Nov 24 '16 at 10:36
@Barmar there are no static elements which I am able to use as an event handler. :/ most of the stuff on the site is randomly generated — GROVER., Nov 24 '16 at 10:40
@Barmar I have tried using `$(document).on('submit', '.f-track-actions__form', function(ev){` (and `$("body")`). However, I always get this error: `Uncaught ReferenceError: wundefinedw is not defined(…)` — GROVER., Nov 24 '16 at 10:41
Sounds like you have a typo somewhere. I've never heard of `wundefinedw`. — Barmar, Nov 24 '16 at 10:44

score 0 · Answer 1 · edited Nov 24 '16 at 10:31

0

I have used this function before and it is working with e.preventDefaults

$('#contactForm1').on('submit',function(e){
    e.preventDefaults();
});

edited Nov 24 '16 at 10:31

GROVER.

4,071
2
19
66

answered Nov 24 '16 at 10:27

Assem Mahrous

411
3
15

Still doesn't work unfortunately :/ – GROVER. Nov 24 '16 at 10:29
use this for your tag – Assem Mahrous Nov 24 '16 at 10:33
`
`
– Assem Mahrous Nov 24 '16 at 10:34
1

There's absolutely no difference between `$(selector).submit(func)` and `$(selector).on("submit", func)`. The `submit()` function just calls `.on()`. – Barmar Nov 24 '16 at 10:34

score 0 · Answer 2 · answered Nov 24 '16 at 10:29

0

Change your html to this,

<form action="" method="post" class="f-track-actions__form">
    <input class="f-track-actions__form-comment" type="text" placeholder="Comment on this track..." name="comment" id="c-1">
</form>

The submit handler is not working, because you missed to add action attribute to the form

answered Nov 24 '16 at 10:29

akhil.cs

691
1
5
12

Nope. Still not working :( – GROVER. Nov 24 '16 at 10:30
can you create a pen codepen.io? – akhil.cs Nov 24 '16 at 10:32
also make sure that you included the js after the html block. – akhil.cs Nov 24 '16 at 10:32

score 0 · Answer 3 · answered Nov 24 '16 at 10:34

0

Make sure you're binding your button in the document ready event...

$( document ).ready() {
    $(".f-track-actions__form").submit(function(ev){
        ...
        return false;
    }
}

answered Nov 24 '16 at 10:34

bastos.sergio

6,684
4
26
36

There's no available button. The user must hit enter to submit. And, they're already within the `$(document).ready()` event – GROVER. Nov 24 '16 at 10:35
You haven't shown your code wrapped up in the document ready event. Regardless, if you're generating the form dynamically there's a chance that the document ready event runs too late and is not binding the form. Also if there's multiple instances of the form, then there's a change that one of the other forms is not binding correctly and is somehow triggering a postback. Either way, without a way to replicate the error on a jsfiddle, I'm afraid I can't really help... – bastos.sergio Nov 24 '16 at 10:49
ended up fixing it :) – GROVER. Nov 24 '16 at 11:10
What's the solution? If you don't post the answer, then this question won't really help others with the same problem. – bastos.sergio Nov 24 '16 at 11:24

form still submitting even after using preventDefault and return false

3 Answers3