Question

I havent quite found an answer that works for my exact function so here it goes

I wrote a quick function that should send values to an external php file and load the result into a div.. that works fine for 1 form input – what is the best way to get all the form inputs from the form and pass them through the php file and load the results? serialize? how would I implement it??? 🙂

$(function() {  
    function showLoader(){
        $('#results .loader').stop(true,true).fadeIn(200);
    }
    //hide loading bar
    function hideLoader(){
        $('#results').fadeIn(1500);
        $('#results .loader').fadeOut(200);
    };
    $('#submit').keydown(function(e) {
      if(e.keyCode == 13) {
        showLoader();
        $('#results').fadeIn(1500);
        $('#results').load('/patientform.php?val=' + $('#patientSearchForm input').val(), hideLoader());
        e.preventDefault();
      }
      });     
    $('#submit').click(function(){  
        //show the loading bar
        showLoader();
        $('#results .loader').fadeIn(1500);      
        $('#results').load('/patientform.php?val=' + $('#patientSearchForm input').val(), hideLoader());

    });
});

Answer 1

Just change it to use serialize. But I think a more generic function can be more usefull:

function postForm(formId, callback) {
    $(formId).on("submit", function(){
        $.ajax({
            url: "url/GoesHere",
            data: $(this).serialize(),
            success: function(data) {
                // request succeeded
                if (callback) callback.apply(data);
            },
            error: function(xhr) {
               // request error
               alert(xhr.responseText);
            }
        });

        return false;
    })
};

You can use it to bind the event on every form you want on DOM ready.