Question posted in
You can find the official documentation here.

Jquery ajax – AJAX form only allows one submission?

I am creating a form which will be submitted through the use of jQuery AJAX, but I am for some reason only able to submit the form once. To submit again I have to refresh page?

How do i accomplish the form and script so I do not have to refresh?

Here is the form:

<form role="form" class="form-horizontal validate" name="create_form" id="create_form">

<div class="form-group">
    <label class="col-sm-2 control-label" for="name">Name</label>

    <div class="col-sm-10">
        <input type="text" class="form-control" id="name" name="name" data-validate="required" data-message-required="Remeber to fill name" placeholder="">
    </div>
</div>

<div class="form-group-separator"></div>

<div class="form-group">
    <button id="submit_btn" class="btn btn-success">Create</button>
    <button type="reset" class="btn btn-white">Reset</button>
</div>

</form>

And here is the AJAX part:

$(document).ready(function(){

    $("#submit_btn").on("click", function () {

        $.ajax({
            type: 'POST',
            url: 'data/create.php',
            cache: false,
            data: $('#create_form').serialize() 
        })
        .done(function(data){ 
            $("#name").val("");
        })
        .fail(function() { 

            console.log("ERROR");

        });

        // Prevent refreshing the whole page page
        return false;

    });
});

Hoping for help and thanks in advance 🙂

Tags:

2

Answers


  1. 0

    use submit instead of click.

    $('#submit_btn').on('submit', function(e) {
    e.preventDefault();
    ... //rest of the code
});
    Login or Signup to reply.
  2. 0

    I don’t really see why you are wanting to run your script on document load. I would suggest you to include the script’s source in the html and include an onClick attribute to the button element and then assign the event handler function call to it to be fired every time you click the Submit button.

    <button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search