CODEWITHSUNDEEP
javascriptjquery
jeanc
jeanc

Reputation: 4833

General jquery function for form submission

I have this small tabbed system developed in PHP/JavaScript.

For form submissioni, I bind a JQuery function to the 'submit' event that sends an Ajax query to the server, avoiding to reload the page (and losing other tabs). I have coded one function for every form, but realized that they are the same (take the inputs, send the Ajax query, show the returning message) so I decided to make a general jquery function with arguments that define each form).

I have this function:

function submit_search(entity){
        $('#'+entity.name+'_searchform').submit(function(){
            var url = public_path+entity.name+'/search';
            var key = $('#'+entity.name+'_search_key').val();

            $.ajax({
                type: 'POST',
                url: url,
                data: {search_key: key},
                success: entity.submit_search(result)
            }); 

            return false;
    });
}

Where entity is a JS object with the name of the entity and the success function I want to execute. This function is written in a script that loads once when the main page is loaded. And when the tab is loaded, I simply call submit_search() with the actual entity.

This seems logical to me. But it doesn't work. And the problem is that jquery doesn't recognize the elements, by example, after var key = $('#'+entity.name+'_search_key').val();, key is null.

What am I doing wrong?

Upvotes: 0

Views: 188

Answers (3)

Matt Whipple
Matt Whipple

Reputation: 7134

If you really want to abstract all of this in a re-usable way you could use something like:

$(function() {
    $("body").on("submit", "form.ajax", function(event) {
        event.preventDefault();
        var $target = $(event.target);
        var successFunk = $target.attr("data-success") || "success";
        var url = $target.attr("action");
        $.post(url, $target.serializeObject(), {
            success: function(data) {
                window[successFunk](data);
            }
        });
    });
});

serializeObject is available here: http://benalman.com/projects/jquery-misc-plugins/#serializeobject

Then you'd just create a form like:

<form class="ajax" action="url_i_want_to_post_to" data-success="successCallabck">
  <input type="text" name="search_key"/>
</form>

Which would post a JSON object of {search_key: ${value_of_search_key}} to the form's destination and call the function successCallback or whatever you specify on return. Ideally you'd want to scope your callbacks better instead of latching on to window. You could use a registry, but otherwise using an object named something like FORM_CALLBACKS would keep things organized.

Upvotes: 1

lavrik
lavrik

Reputation: 1474

Your success function will be executed before request

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search(result)*
        })

I suppose submit_search doesn't return a pointer to a function so you need to pass the pointer to submit_search 

  $.ajax({
            type: 'POST',
            url: url,
            data: {search_key: key},
            success: *entity.submit_search*
        })

And about reconginzing the elements - be sure that you wrote correct selector. Try to hardcode expected experssion in browser's debug/watch tool and check if it's ok, like 

$('#EntityNameValue_search_key').length > 0

Upvotes: 1

Jan.
Jan.

Reputation: 1995

Shouldn't something like this work?

$(document).ready(function() {
    $('#search_form').live("submit", function(event) {
        event.preventDefault();
        // do some magic
    });
});

You wouldn need to mix some manual functions with jquery code then.

Upvotes: 0

Related Questions