CODEWITHSUNDEEP
javascriptjqueryajaxjsonhtml
Ariasa
Ariasa

Reputation: 1959

Why javascript function is not running?

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>

Upvotes: 0

Views: 109

Answers (3)

Anand Dwivedi
Anand Dwivedi

Reputation: 1500

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

});

Upvotes: 0

abdullacm
abdullacm

Reputation: 636

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.

Upvotes: 0

BenM
BenM

Reputation: 53198

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

Upvotes: 4

Related Questions