getPostForm
Light-weight jQuery plugin to multi-post via the GET and POST objects from the same form.
The plugin works by changing the form method to POST and recreating all the GET inputs in the action variable.
by laustdeleuran
June 05, 2011
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Plugin - Advanced Form Post / Get</title>
<link rel="shortcut icon" href="http://ljd.dk/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
</head>
<body>
<form id="pgForm" method="get" action="http://login.tv2.dk/login.php" class="group">
<h1>PostGetForm</h1>
<input type="hidden" name="returnURL" value="http://dev.ljd.dk/getpostform/" data-method="post" />
<label for="name">Username</label>
<div class="textbox">
<input name="username" type="text" id="username" placeholder="Username" data-method="get" />
</div>
<label for="name">Password</label>
<div class="textbox">
<input name="password" type="password" id="password" placeholder="Password" data-method="get" />
</div>
<fieldset class="group">
<legend>Please select your gender, if applicable</legend>
<label for="male">
<input id="male" name="gender" type="radio" value="male" data-method="post" />
Male
</label>
<label for="female">
<input id="female" name="gender" type="radio" value="female" data-method="post" />
Female
</label>
</fieldset>
<select multiple="multiple" name="select" data-method="post">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
<input type="submit" value="Log in" />
</form>
<section>
<h1>Notes</h1>
<div>
<h2>Description</h2>
<p>Light-weight jQuery plugin to multi-post via the GET and POST objects from the same form.</p>
<p>The plugin works by changing the form <code>method</code> to POST...
CSS
@charset "utf-8";
/* PostGetForm Example CSS - All styles not directly related to the plugin */
/*=RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0;}address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;}ol,ul { list-style:none;}caption,th { text-align:left;}h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}q:before,q:after { content:'';}abbr,acronym { border:0;} section, article, header, footer, nav, aside, hgroup, video { display:block; }
/*=LAYOUT*/
html {
overflow-y:scroll;
height: 100%;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:62.5%;
background-color:#1d3020;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.1, #1d3020), color-stop(0.9, #223c26));
background-image:-moz-linear-gradient(center bottom, #1d3020 10%, #223c26 90%);
background-repeat: no-repeat;
color:#1d3020;
}
form, section {
background-color:#eee;
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.1, rgb(219,219,219)), color-stop(0.9, rgb(246,246,246)));
background-image:-moz-linear-gradient(center bottom, rgb(219,219,219) 10%, rgb(246,246,246) 90%);
-webkit-background-clip: padding-box;
border:1px solid #fff;
-o-border-radius:1.2em;
-moz-border-radius:1.2em;
-webkit-border-radius:1.2em;
border-radius:1.2em;
width:32em;
padding:2em;
margin:5em auto;
-o-box-shadow:0 0 1em rgba(0,0,0,0.4);
-moz-box-shadow:0 0 1em rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 1em rgba(0,0,0,0.4);
box-shadow:0 0 1em rgba(0,0,0,0.4);
}
h1 {
font-size:4.8em;
font-family:"Lobster", Arial, Helvetica, sans-serif;
-o-text-shadow:0.021em 0.021em 0.021em #fff, -0.021em -0.021em 0.021em #ccc;
-moz-text-shadow:0.021em 0.021em 0.021em #fff, -0.021em -0.021em 0.021em #ccc;
...
JavaScript
/*************************************************
** jQuery getPostForm version 1.0
** Copyright Laust Deleuran, licensed GNU GPL v3
** http://dev.ljd.dk/getpostform
**************************************************/
(function( $ ){
$.fn.getPostForm = function(options) { // Do you get the double meaning - do you, soldier, do you?!
// Settings
var settings = {
postAttribute: 'data-method',
className: 'postGetForm',
createFormId: 'postGetFormAutoPoster',
doRemoveOldFields: true,
affectedFields: 'input[name],select,textarea'
};
if (options) { $.extend(settings, options); }
// Functions
var gpForm = {
create: function(container, className, elName, value){
return container.append('<input type="hidden" class="' + className + '" name="' + elName + '" value="' + value + '" />');
},
handle: function(method, container, className, elName, value) {
if (method.toLowerCase() == "post") {
return gpForm.create(container, className, elName, value);
} else {
return elName + "=" + value;
}
}
}
// Loop and return object collection
return this.each(function(){
if ($(this).is('form')) {
$(this).submit(function(event){
event.preventDefault();
var actionUrl = $(this).attr('action');
var smartActionUrl = "";
if (actionUrl.indexOf("?") == -1) {
actionUrl += "?";
}
$('#postGetFormAutoPoster').remove();
$('<form id="postGetFormAutoPoster"></form>').appendTo('body');
var $form = $('#postGetFormAutoPoster');
$form.attr('method','post');
...