<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

Biting the Postman's Leg

Software Development, Software Solutions

By Joel Brinkman

I don't always write JavaScript onClick() handlers to post hidden forms, but when I do, I always re-write a bunch of boring code tailored for each specific case.
…until now.
For example, JavaScript similar to the following is sprinkled throughout an application I am tasked to work on. As you might expect, it is designed to submit a dynamically created form when the user clicks the element with the id of meow. Clicking said element results in a form being submitted that contains but one field and that field is defined in the block of JavaScript. Obviously, this is highly tailored and not at all reusable.
[javascript]
$(function() {
$('#meow').click(function() {
$('<form id="hidden-form-meow" style="display: none;"><input type="hidden" name="cat-goes" value="meow" /></form>').appendTo('body');
$.ajax({
type: 'POST',
url: "/secured/meow/do-shizz/",
data: $("#hidden-form-meow").serialize()
})
});
});
[/javascript]
While there are many ways to skin this cat, let's review one pretty simple generalization. Instead of jamming all this specific behavior in the JavaScript, let's define everything about our POST in the element for which we want a click handler. For example, if we want an anchor click to submit a form in the background, let's create it like this:
[html]
<a class="post-me-sweetly" href="#" data-cat-goes="meow" data-url="/secured/meow/do-shizz/">Cat Goes</a>
[/html]
Now we need some JavaScript to do some AJAX magic when any post-me-sweetly element is clicked.
[javascript]
$(function() {
$('.post-me-sweetly').click(function() {
var url = $(this).data("url"); //this is where we will post our form
var fields = ""; //this will be our dynamically created fields will be accumulated
$.each($(this).data(), function(i, v) {
//iterate the data elements and create a form field for each
fields+='<input type="hidden" name="'+i+'" value="'+v+'"/>';
});
//create a form and append it to the dom
$('<form id="hidden-form-'+$(this).data('id')+'" action="'+url+'" method="post" style="display: none;">'+fields+'</form>').appendTo('body');
//post da form, yo!
$.ajax({
type: 'POST',
url: url,
data: $('#hidden-form-'+$(this).data("id")).serialize()
})
});
});
[/javascript]
Now we can add as many elements as we desire, each with the data you might want posted back to the server.
[html]
<a class="post-me-sweetly" href="#" data-foo="meow" data-url="/secured/meow/do-shizz/">Cat Goes</a>
<a class="post-me-sweetly" href="#" data-moo="cow" data-url="/secured/meow/do-shizz/">Something Else</a>
<a class="post-me-sweetly" href="#" data-sweet="this is neat" data-jebuz="another value" data-url="/secured/meow/do-shizz/">Wow!</a>
[/html]

TAGS: Software Development, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts