0

I have an ajax form and I want to reload the div instead of the whole page, but it isn't working.

This is my handling.js: 

$(document).ready(function(){
    $('#guideForm').submit(function(){
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});

this is my handling.php: 

if ($_POST['guide']) {
    $settings->addGuide($_POST['guide']); 
}

EDIT: Formcodes: 

<div class="col-md-4">
  <h2>test title</h2>
  <p class="guids">This is a test text.</p>
  <form method="post" id="guideForm">
     <input name="guide" value="1" style="positon:absolute; display:none;">
     <button class="btn btn-primary">Got it!</button>       
  </form>         
</div>

Can someone help me to figure out what I'm doing wrong?

web-stars
  • 127
  • 13

6 Answers6

0

You should try e.preventDefault()

$('#guideForm').submit(function(e){
        e.preventDefault(); // added this line and an argument 'e' to the function
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    });
skshoyeb
  • 993
  • 4
  • 11
0

To stop the page from submitting you need to prevent the default behavior of the event i.e. to submit the form.

Your page keeps reloading because after your request DOM submits the form. And, as default behavior, Your form submits itself on the same page as you haven't specified a action param.

So, there are multiple ways of doing this.

i). Stop the JS event from propagating by using the method preventDefault() of event object.

Like this: 

$(document).ready(function(){
    $('#guideForm').submit(function(e){
        e.preventDefault(); //stop default behaviour
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});

This is the most official way of doing this.

ii). You can change your submit button/input to a simple button and bind the ajax with onClick event.

Like this: 

$(document).ready(function(){
$('#fakeSubmitButton').click(function(e){
    $.ajax({
        type: 'POST',
        url: '../includes/handling.php',
        data: $(this).serialize()
    })
    .done(function(data){
        $('#guide').load(document.URL + ' #guide');
    })
    return false;   
}); 
});

iii). You can define javascript:void(0) as your form's action attribute. This will automatically prevent form from submitting.

iv). By returning false from the event handler. Which you are currently doing. It is strange it is not working as jQuery doc itself says:

we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.

Maybe the following post can help you: jQuery - Form still submits with return false

Also check the answer of Chen-Tsu Lin in the above post. It is given a link for when you should not use return false.

Hope this helps.

Parantap Parashar
  • 1,930
  • 1
  • 14
  • 22
0

Use e.preventDefault();

$(document).ready(function(){
    $('#guideForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});
Amalina Aziz
  • 204
  • 2
  • 18
0
$('#guideForm').submit()

The above jquery statement would by default submit the fold which would essentially reload the code. If you do not want this to happen,

add the following 

event.preventDefault();

This would prevent the submit of the form and execute the code in the function

Sudeep Padalkar
  • 58
  • 8
  • there's already a "return false;" inside the submit event..so that should stop the page from reloading – parpar Oct 05 '17 at 06:06
  • @parpar I agree the return false would stop the execution, but then all the lines of code after return false would not be executed, If you need the subsequent lines to be executed you would need to use `event.preventDefault();` – Sudeep Padalkar Oct 05 '17 at 06:17
  • that's why in his code, the "return false" is in last line..which means everything else will be executed, then prevent page from reloading – parpar Oct 05 '17 at 06:31
0

I think there's an error in your js that's why it doesn't execute as expected, have you checked if you get any error? Maybe it's because you don't have a termination on your $.ajax function.. try adding ";" terminator.

$(document).ready(function(){
    $('#guideForm').submit(function(){
        $.ajax({
            type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        });

        return false;   
    }); 
});
parpar
  • 329
  • 1
  • 10
0

Use e.preventDefault(); to stop the default behavior of submit.

$(document).ready(function(){
    $('#guideForm').submit(function(e){
       e.preventDefault(); //stop default behaviour
       $.ajax({
           type: 'POST',
            url: '../includes/handling.php',
            data: $(this).serialize()
        })
        .done(function(data){
            $('#guide').load(document.URL + ' #guide');
        })
        return false;   
    }); 
});
Hayden Passmore
  • 1,135
  • 2
  • 12
  • 34
Amit
  • 11
  • 3