Ajax: prevent refreshing page after submitting more than once

Question

I have been used jQuery function to refresh the div but when i submit the form more than once page will be refreshed. I want to stop that refreshing and show the new contents like facebook comments updating. Please help me to solve this issue.

Here is my code:

<div class="row">
   <div id="right-side" class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
        <div id="profile_container">
            <div class="profile_items">
                <ul class="profile_ul">
                    <li id="personal-info">
                        <div class="profile_content">
                            <form action="" method="POST" id="personal-info-form" class="form-group">
                                <table>
                                <?php   foreach ($personal as $pdata) { ?>
                                <tr id="new_personal" class="pro-info-set">
                                    <td class="info-group-left">
                                        <p class="pro-info-left"><?php echo $pdata['js_personal_title']; ?></p>
                                    </td>
                                    <td class="info-group">
                                        <p class="pro-info-right"><?php echo $pdata['js_personal_desc']; ?></p>
                                    </td>
                                </tr>
                                <?php   } ?>
                                <tr class="pro-info-set">
                                    <td class="info-group-left">
                                        <input class="form-control" type="text" id="js_personal_title" name="js_personal_title">
                                    </td>
                                    <td class="info-group form-inline">
                                        <input class="form-control" type="text" id="js_personal_desc" name="js_personal_desc">
                                        <input id="submit_person" class="form-control" type="submit" value="Add">
                                        <label id="submit_person_msg" value="Add"></label>
                                    </td>                                       
                                </tr>
                                </table>
                            </form>
                            <script>
                                $(document).ready(function(){
                                    $("#submit_person").click(function(e){
                                        e.preventDefault();
                                        js_personal_title = $("#js_personal_title").val();
                                        js_personal_desc= $("#js_personal_desc").val();
                                        var datastr = 'js_personal_title='+js_personal_title + '&js_personal_desc='+js_personal_desc; 
                                        $.ajax({
                                            type: "POST",
                                            url: "<?php echo base_url().'index.php/Jobseeker/add_personal' ?>",
                                            data: datastr,
                                            success:function() {
                                                $("#personal-info-form")[0].reset();
                                                $(".row").load(location.href  + "#new_personal");
                                                $( "#submit_person_msg" ).append( "<p> Loading... </p>" );
                                            }
                                        });
                                    return false;
                                    });
                                });
                            </script> 
                        </div>                            
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Why don't you disable once the user clicked the button and reenable it after complete execution of `ajax` — Guruprasad J Rao, Sep 24 '15 at 07:11

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Try this:

$("#submit_person").click(function(e){
    e.preventDefault();
    $(this).prop('disabled', true); //<---disabled it here
    var data = { // instead you can send an object too
        js_personal_title : $("#js_personal_title").val(),
        js_personal_desc  : $("#js_personal_desc").val()
    }
    $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/Jobseeker/add_personal' ?>",
        data: data,
        success:function() {
            $("#personal-info-form")[0].reset();
            $(".row").load(location.href  + " #new_personal", function(){
                $("#submit_person").prop('disabled', false); // now enable it here.
            });
            $( "#submit_person_msg" ).append( "<p> Loading... </p>" );
        },
        error: function(){ 
            $("#submit_person").prop('disabled', false); // now enable it here. 
        }
    });
});

Issue seems to me is that user is able to send multiple requests, so you can disable the button when clicked and enable it when the data is appended in the DOM.

Updates:

You can use a callback function of the .load(url, cb) function to enable the disabled button, which ensures that the content is loaded and you are able to click the submit button again.

$(".row").load(location.href  + " #new_personal", function(){
     $("#submit_person").prop('disabled', false); // now enable it here.
});

Another suggestion is to put either unique ids to each element or change it to class name. I can see you are duplicating the ids in php loop:

   <?php   foreach ($personal as $pdata) { ?>
    <!-- <tr id="new_personal" class="pro-info-set"> -->
    <tr class="pro-info-set new_personal">
        <td class="info-group-left">
            <p class="pro-info-left"><?php echo $pdata['js_personal_title']; ?></p>
        </td>
        <td class="info-group">
            <p class="pro-info-right"><?php echo $pdata['js_personal_desc']; ?></p>
        </td>
    </tr>
    <?php   } ?>

@SahanPerera at that point of time your request might be finished. — Jai, Sep 24 '15 at 07:21
You mean I have to hide the button after success the function? — Sahan Perera, Sep 24 '15 at 07:30
@SahanPerera ok i guess i got your point, instead you can enable it after the load happend. you can pass a callback function there. — Jai, Sep 24 '15 at 07:30
@SahanPerera Did you get the updated one. also i would mention that you should add a space in the load url like above: `.load(location.href + " #new_personal"` which says to load the contents from that div. — Jai, Sep 24 '15 at 07:35

score 0 · Answer 2 · answered Sep 24 '15 at 07:21

You should listen the submit event of the form istead of the click listening

$("#personal-info-form").on('submit', function(e){
e.preventDefault();
js_personal_title = $("#js_personal_title").val();
js_personal_desc= $("#js_personal_desc").val();
var datastr = 'js_personal_title='+js_personal_title + '&js_personal_desc='+js_personal_desc; 
$.ajax({
   type: "POST",
   url: "<?php echo base_url().'index.php/Jobseeker/add_personal' ?>",
   data: datastr,
   success:function() {
     $("#personal-info-form")[0].reset();
     $(".row").load(location.href  + "#new_personal");
     $( "#submit_person_msg" ).append( "<p> Loading... </p>" );
   }
 });
  return false;
})

At the third attempt page will be reloaded – Sahan Perera Sep 24 '15 at 07:25 — Sahan Perera, Sep 24 '15 at 07:25

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

I found the answer here Jquery: Click event doesn't work after append. (Don't know how to use .ON)

$(document).on('click', '.choimg', function(e) {

});

edited May 23 '17 at 10:27

Community

1
1

answered Sep 30 '15 at 15:38

Sahan Perera

194
1
4
17

Ajax: prevent refreshing page after submitting more than once

3 Answers3

Updates: