Why javascript function is not running?

Question

I have created javascript function in html file, and in ajax success will console data. But there aren't showing in console, and there are not error found in console.

What happen?

This is my code:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   
</head>

<body>
    <div class="container">
        <div class="div-form">
            <h1>form</h1>
            <fom action="#" id="ajax-form" method="post" accept-charset="utf-8">
                <div class="input-group">
                    <label>Nama:</label>
                    <input class="form-control" type="text" name="name" placeholder="nama mu">
                </div>
                <div class="input-group">
                    <label>Email:</label>
                    <input class="form-control" type="email" name="email" placeholder="email mu">
                </div>
                <div class="input-group">
                    <button class="btn" name="submit" type="submit" value="SUBMIT" id="contact-submit">submit</button>
                </div>
            </form>
        </div>
    </div>

<script type="text/javascript">
    $(document).ready(function(e) {
        $("#ajax-form").submit(function(event) {
            /* Act on the event */
            var jsondata = $("#ajax-form").serialize();
            $.ajax({
                url: 'proccess.php',
                type: 'POST',
                dataType: 'json',
                data: jsondata,
            })
            .done(function() {
                console.log("success" + data);
            })
            event.preventDefault();
        });

    });
</script>

</body>
</html>

e.preventDefault(); should be event.preventDefault(); as the event parameter is called event not e — Arun P Johny
– Arun P Johny, Commented Aug 25, 2015 at 6:56
use error callback in your ajax to see if whats the error, eg. $.ajax({url:....,error:function(msg){ console.log(msg);} } ); — dreamweiver
– dreamweiver, Commented Aug 25, 2015 at 6:56
or use .fail(function( jqXHR, textStatus, errorThrown ) ;). Also, there is a ; missing right after your .done(). — Terry Seidler
– Terry Seidler, Commented Aug 25, 2015 at 7:00
there is a spelling mistake in the form opening tag, pls check its written as fom :) — abdullacm
– abdullacm, Commented Aug 25, 2015 at 7:03
and use event.preventDefault(); instead of e.preventDefault(); because you are passing event as param to the function not e — abdullacm
– abdullacm, Commented Aug 25, 2015 at 7:06

BenM · Accepted Answer · 2015-08-25 06:58:56Z

4

The name of the event you're passing back to the submit() function is event, yet you try to call preventDefault() on a variable of e, which is actually the event passed back from the DOMReady callback. As a result, the submit event is never prevented.

You need to update as follows (notice also that we need to pass a variable of data back to the done() callback):

$("#ajax-form").submit(function(event) {
    event.preventDefault();

    /* Act on the event */
    var jsondata = $("#ajax-form").serialize();

    $.ajax({
        url: 'proccess.php',
        type: 'POST',
        dataType: 'json',
        data: jsondata,
    })
    .done(function( data ) {
        console.log("success" + data);
    });
});

edited Aug 25, 2015 at 6:58

answered Aug 25, 2015 at 6:56

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Guruprasad J Rao Over a year ago

Shouldn't .done receive data as parameter before this -> console.log("success" + data);?

BenM Over a year ago

Yeah, it should. I've added it to the answer, but that isn't the reason his code is 'not working'.

Guruprasad J Rao Over a year ago

True but OP might raise next question if he don't find that data. That was my concern.. :)

Ariasa Over a year ago

i have update the code, check again. but still haven't showing in console

BenM Over a year ago

@Ariasa, then your AJAX request is likely returning an error. Use the error() function to check that, or see the Network tab to check what response your call gives.

HeiN · Accepted Answer · 2015-08-25 07:48:22Z

0

Remember that only event will work here is the updated Code

$(document).ready(function(e) {
    $("#ajax-form").submit(function(event) {
        /* Act on the event */
        var jsondata = $("#ajax-form").serialize();
        $.ajax({
            url: 'proccess.php',
            type: 'POST',
            dataType: 'json',
            data: jsondata,
        })
        .done(function() {
            console.log("success" + data);
        })
        event.preventDefault();
    });

});

edited Aug 25, 2015 at 7:48

HeiN

5033 silver badges17 bronze badges

answered Aug 25, 2015 at 6:58

Anand Dwivedi

1,50814 silver badges24 bronze badges

3 Comments

BenM Over a year ago

Please upvote existing answers, rather than duplicating them :)

Ariasa Over a year ago

please check again, i have update it but still haven't showing in console

vp_arth Over a year ago

You are lie, it can be not only event. It just an argument. It even can be arguments[0]...

abdullacm · Accepted Answer · 2015-08-25 07:22:02Z

0

please correct the spelling mistake in the html tag

 <fom action="#" id="ajax-form" method="post" accept-charset="utf-8">

 <form action="#" id="ajax-form" method="post" accept-charset="utf-8">

jQuery is not able to bind the submit event with the form element since there is no form element.

answered Aug 25, 2015 at 7:22

abdullacm

6465 silver badges17 bronze badges

Collectives™ on Stack Overflow

Why javascript function is not running?

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related