How to reset a form AFTER its submission

Question

The following code runs when the user submits the form. After a check on the quantity of forms submitted (the user can only submit 5 times), the form is recorded on the server side in a google sheet.

function validateForm(form){   
    if(count>=MAX){
        var msg={
            title:"Idea limit reached",
            body:"You can propose a maximum of "+MAX+" ideas for this theme",
            btn:"OK"
        }
        screenMessage(msg)
    }
    else{
        var msg={
            title:"Idea recorded",
            body:"You can still submit "+(5-count-1)+" ideas",
            btn:"OK"
        }
        google.script.run.withSuccessHandler(successMessage(msg), resetForm()).recordIdea(form)    
        count++
    }
    return false;  
  }
function resetForm(){
    $('#title').val("")
    $('#description').val("")
    $('input[name="tags"]').val("")
    $('.creation-tags').empty()
    $('.suggested-tags').empty();
}

My problem is that when I check the database, the information i typed are empty! Meaning the "resetForm" function is actually called BEFORE the form submission.

Is there a way to ensure the resetForm function is called only after the values typed by the user have been successfully submitted ?

I tried to nest the function in the successMessage function with no positive result

Answer 1

This line of code is calling resetForm() right away, not setting the callback function:

google.script.run.withSuccessHandler(successMessage(msg), resetForm()).recordIdea(form)

It should look like this:

google.script.run.withSuccessHandler(function(){successMessage(msg), resetForm()}).recordIdea(form)