Question

I have this

“fsField” is the class of all elements in the form. So whenever the user blurs to another field it submits the form using the function autosave() – given below. It saves data when the user blurs but when the user clicks the button with class “save_secL” to go to next page it does not save.

$('.fsField').bind('blur', function()
 {
autosave();
 }

 });

but when i use this code

$('.save_secL').click(function()
{
 var buttonid = this.id;
{

                    var answer = confirm("You have left some questions unanswered. Click OK if you are sure to leave this section? \\n Click CANCEL if you want stay in this section. ");
    if(!answer)
    {
    var spl_items = valid().split(',');
    $(spl_items[0]).focus();

return false;
  }
else
{
        $('#hidden_agree').append('<input id="secLuseragreed" name="secL_user_agreed" value="unanswered" type="hidden" />');
    autosave();
    window.location= buttonid+".php"
        }
    }
    else
    {
    $('#hidden_agree').append('<input id="secLuseragreed" name="secL_user_agreed" value="answered all" type="hidden" />');
    autosave();
    window.location= buttonid+".php"
    }
}
  });

**autosave_secL.php is the php source thats saving the data in the database. I ran it independently and it does save data okay. **

function autosave()
{
var secL_partA_ques_1_select = $('[name="secL_partA_ques_1_select"]').val();
var secL_partA_ques_1 = $('[name="secL_partA_ques_1"]:checked').val();
var secL_partA_ques_2_select = $('[name="secL_partA_ques_2_select"]').val();


$.ajax(
    {
    type: "POST",
    url: "autosave_secL.php",
    data: "secL_partA_ques_1_select=" + secL_partA_ques_1_select + "&secL_partA_ques_1=" + secL_partA_ques_1 + "&user_id=<?php echo $row_token[user_id]?>" + "&updated_by=<?php echo $member."-".$key;?>",
        cache: false,
    success: function()
    {    
    $("#timestamp").empty().append('Data Saved Successfully!');
    }

    });

}

**

valid() is a validation function that checks if any field is empty and returns a value if there is an empty field.**

 function valid()
{

    var items = '';
    $('.fsField').each(function() 
    {

        var thisname = $(this).attr('name')
        if($(this).is('select'))
        {
            if($(this).val()=='')
            {
                var thisid = $(this).attr('id')
                items += "#\"+thisid+\",";
                $('[name=\"'+thisname+'\"]').closest('td').css('background-color', '#B5EAAA');
            }
        }
        else
        {
            $('[name=\"'+thisname+'\"]').closest('td').css('background-color', '');
        }
    });

    return items;
}

Can anyone please help? i am stuck for a day now. Can’t understand why it saves when the user goes field to field but does not save when button is clicked with validation.
Tested with Firefox. this line appears in red with a Cross sign beside when the button(save_secL class) is clicked. I am using a ssl connection.

POST https://example.com/files/autosave_secL.php   x

Here is the modified code trying to implement the solution

$('#submit_survey_secL').click(function()
{

    if(valid() !='')
    {
         var answer = confirm("You have left some questions unanswered. Are you sure you want to Submit and go to Section B? ");
         if(!answer)
        {
               var spl_items = valid().split(',');
               $(spl_items[0]).focus();

               return false;
        }
          else
        {
            $('#hidden_agree').append('<input id=\"secLuseragreed\" name=\"secL_user_agreed\" value=\"unanswered\" type=\"hidden\" />');

            autosave(function(){
                window.location= "part1secM.php?token=1&id=4"
            });
        }
    }
    else
    {
        $('#hidden_agree').append('<input id=\"secLuseragreed\" name=\"secL_user_agreed\" value=\"unanswered\" type=\"hidden\" />');

        autosave(function(){
            window.location= "part1secM.php?token=1&id=6"
        });
    }
});


function autosave(callback)
{

    var secL_partL_ques_1_select = $('[name="secL_partL_ques_1_select"]').val();
    var secL_partL_ques_1 = $('[name="secL_partL_ques_1"]:checked').val();
    var secL_partL_ques_2_select = $('[name="secL_partL_ques_2_select"]').val();


    $.ajax(
    {

    type: "POST",
    url: "autosave_secL.php",
    data: "secL_partL_ques_1_select=" + secL_partL_ques_1_select + "&secL_partL_ques_1=" + secL_partL_ques_1 + "&user_id=<?php echo $row_token[user_id]?>" + "&updated_by=<?php echo $member."-".$key;?>",
        cache: false,
    success: function()
        {    
             $("#timestamp").empty().append('Data Saved Successfully!');

                     if($.isFunction(callback))
         {                  
            callback();
         }
        }

    });

}

I don’t understand why this doesn’t work as callback should totally work. Firebug does not show POST https://example.com/files/autosave_secL.php in red any more but it shows that it has posted but I think the callback is not triggering for some reason

Answer 1

$('.save_secL').click(function() {

//...

//start autosave. Note: Async, returns immediately
autosave();
//and now, before the POST request has been completed, we change location...
window.location= buttonid+".php?token=$row_token[survey_token]&$member=$key&agr=1"
//....and the POST request gets aborted :(

Solution:

function autosave(callback)
{
//...
$.ajax(
    {
//...
    success: function()
    {    
        $("#timestamp").empty().append('Data Saved Successfully!');
        if($.isFunction(callback)) 
            callback();
    }
    });
}

//and

autosave(function(){
    window.location= buttonid+".php?token=$row_token[survey_token]&$member=$key&agr=1"
});    

By the way, your autosave function is pretty hard for your server. Did you consider using localStorage + a final POST request containing all data?