Games Arcade Website powered by WordPress

Date: 28th February 2009 at 4:04 pm | Filed under: blog, portfolio, wordpress | Author: Sam Burdge | Tags: , , , ,

I have recently been working on a highly versatile premium theme for WordPress which is due for release soon. As part of the project I wanted to test how the theme (and WordPress itself) could work with sites of various different genres. My intention was that the theme would be configurable enough via it's Options Menu that it could easily be styled to suit corporate sites such as recruitment, blue chip company, technology site  & product portfolio, media sites such as magazine, news, image & video gallery and also youth oriented sites such as music / band website,  games website.

The theme also features simple integration for banners and advertising,  so creating a couple of  'working example' sites was not only a good way of testing the theme's versatility but also a potential source of a few extra quid!

I had been wanting to do a games & videos website for a while, and I had built the theme's default settings around a 'corporate magazine' look & feel, so I decided the games site would be a great way to test the theme. Here is my wordpress games arcade site so far:  Zap Gamez

I decided to look around and see what articles I could find about creating a games arcade website with wordpress, or if there was a plugin that allowed you to easily insert games into your WordPress blog. I found this article by Emanuele Feronato:

It describes a method of populating your WordPress blog with games via a feed from MochiAds (A source of free games for websites) using custom fields. However, for my site I wanted to be able to integrate games from various free content suppliers and host games on my own server as well as embedding games hosted by content suppliers. What I really wanted was a plugin that could embed games into posts or pages using shortcodes.

THE PLUGIN

The prototype plugin I have built includes the following features:

4 Different views:

  1. Grid view - a grid of thumbnail images linking to each game (can be restricted to a single category or parent category)
  2. Category view - this view includes a medium sized image and a written description of the game
  3. Single page view - the page where you play the game itself
  4. Featured Game view - a page with a list of featured games

Different embedding modes:

  1. iFrame embedding - embed iFrame content using code provided by free games sites, or use this method to display games from your own server where an html file has been provided with the free game download.
  2. Flash embedding - embed Flash content using embed codes provided by other sites, or embed flash games directly from your own site. You can even upload them easily using the wordpress 'Add Media' tool.

The beta version of the WP Game Embed plugin can be found here.

39 Responses to “Games Arcade Website powered by WordPress”

  • Comment by ashish
    Date: March 17th, 2009 at 7:58 am

    good article, thanks for this useful info, I have dug and stumbled this article. I will keep visiting for more useful information.

  • Comment by alex
    Date: March 27th, 2009 at 2:01 pm

    great article. thank

  • Comment by fencze
    Date: April 21st, 2009 at 8:03 am

    this game is so good I have played it several days ago

  • Comment by Budi
    Date: April 23rd, 2009 at 1:34 pm

    Keep it up man! Now, when I need useful info I’ll come here.
    Smarter than an average blog…cheers

  • Comment by Steven
    Date: May 19th, 2009 at 1:52 am

    Nice Kindly visit my site

  • Comment by Games Arcade Website powered by WordPress Sam Burdge | Cast Iron Cookware
    Date: May 26th, 2009 at 8:32 pm

    [...] Games Arcade Website powered by WordPress Sam Burdge Posted by root 19 hours ago (http://www.samburdge.co.uk) 4 responses to games arcade website powered by wordpress comment by ashish date march 17th 2009 at 7 58 am good article thanks for this useful info Discuss  |  Bury |  News | games arcade website powered by wordpress sam burdge [...]

  • Comment by kansas city bbq
    Date: May 29th, 2009 at 3:48 pm

    This is a great game. Great info

  • Comment by Games Arcade Website powered by WordPress Sam Burdge | Paid Surveys
    Date: May 29th, 2009 at 4:34 pm

    [...] Games Arcade Website powered by WordPress Sam Burdge Posted by root 6 hours ago (http://www.samburdge.co.uk) 5 responses to games arcade website powered by wordpress comment by ashish comment by budi date april 23rd 2009 at 1 34 pm keep it up man reliable web hosting linux amp windows hosting starting at just 1 99 per month Discuss  |  Bury |  News | games arcade website powered by wordpress sam burdge [...]

  • Comment by free business advertising
    Date: June 15th, 2009 at 2:42 am

    wow i think wordpress just for blog, but im wrong, good idea bro

  • Comment by pikachu
    Date: June 16th, 2009 at 8:04 pm

    visit mine i have lotz of free games too -yay-

  • Comment by eaonflux
    Date: June 19th, 2009 at 7:05 am

    Nice plugin, made myself also a mochiads wordpress plugin, its still in decelopment.
    i heavily cusomized a video theme for the layout.
    you might wanne check it some times.
    god job…
    grts,

    chris

  • Comment by Dave Smith
    Date: July 10th, 2009 at 5:18 am

    Hey, this is cool free stuff

  • Comment by fred bennett
    Date: July 17th, 2009 at 2:58 am

    Awesome post. Very informative :)

  • Comment by Sam Burdge
    Date: August 3rd, 2009 at 3:49 pm

    This post must contain keywords that are attracting too many spam bots. Sorry but comments are now closed on this post.

  • Comment by Jambo
    Date: August 18th, 2009 at 7:37 pm

    i am new to wordpress but i like this site, good article… and i like the sound od the flash arcade….

  • Comment by bayu
    Date: August 30th, 2009 at 5:00 pm

    i have downloaded your beta plugins, nice plugin mate, thanks

  • Comment by Neo
    Date: September 13th, 2009 at 1:12 pm

    So, this is interesting for me, I will translate it and post to my saite http://grang.info Thanks, Alex

  • Comment by LacnyWebHosting
    Date: October 2nd, 2009 at 2:14 pm

    Great article, adding it to my bookmarks!

  • Comment by blackhatguide
    Date: October 12th, 2009 at 10:28 pm

    Great work with the blog mate let me know if you want to partner up with my blog as well! =]

  • Comment by Jocuri barbie
    Date: October 22nd, 2009 at 3:17 pm

    Nice your beta :) I’ll gonna translate in romanian language this post and i will put a direct link to your site. Thank you

  • Comment by Kwik Games
    Date: November 5th, 2009 at 9:35 pm

    Very cool. I finally got around to changing my own games site, http://www.kwikgames.com over to Wordpress earlier this year. After years of updating static HTML pages it was high time I made the switch and was thoroughly worth it…

    I love your thumbnail “grid”! You might want to use a rating plugin, there are quite a few good ones, so you can show most popular games and encourage more user interaction, but overall it looks great. And to anyone thinking of using WP for a games site I highly recommend it!

  • Comment by kral oyun
    Date: November 6th, 2009 at 2:29 am

    that is what i need :) thanks!

  • Comment by Arcade
    Date: January 29th, 2010 at 10:08 pm

    Very nice articles. Thanks men.

  • Comment by idic
    Date: March 14th, 2010 at 2:16 pm

    Nice article. But there are other sides which are based on wordpress and use mochi games: http://highscoregaming.net
    Cheers idic

  • Comment by Nick
    Date: June 15th, 2010 at 1:16 am

    The wordpress site looks good. I especially like the huge thumbs.

  • Comment by kız oyunları
    Date: June 20th, 2010 at 1:04 pm

    Very cool. I finally got around to changing my own games site

  • Comment by love games
    Date: June 20th, 2010 at 1:05 pm

    i heavily cusomized a video theme for the layout.
    you might wanne check it some times.
    god job…

  • Comment by anime and games
    Date: July 16th, 2010 at 4:09 pm

    I like playing Games..So I make blog and include many games..In order that if I want to play game just open my blog.

    Regard
    Ali Mustika Sari

  • Comment by Ricky Davis
    Date: July 29th, 2010 at 3:18 am

    How has this theme been going? any updates on this one? There has been lots of game themes now and I`m hoping you were successful on this.

  • Comment by kız oyunu
    Date: September 6th, 2010 at 7:15 am

    I love your thumbnail “grid”! You might want to use a rating plugin, there are quite a few good ones, so you can show most popular games and encourage more user interaction, but overall it looks great. And to anyone thinking of using WP for a games site I highly recommend it!

  • Comment by Free WWE Games
    Date: November 23rd, 2010 at 1:34 pm

    I think is a great idea, keep up the great work. Looking forward for some updates on this.
    Thanks.

  • Comment by snooty
    Date: January 1st, 2011 at 8:45 am

    Nice article. But there are other sides which are based on wordpress and use mochi games: http://www.ccymx.com/
    Cheers idic

  • Comment by Jenny Stalker
    Date: January 15th, 2011 at 1:44 pm

    wow, I rarely ever have to scroll down this much just to comment on a post before. Great post, keep them coming!

  • Comment by Tanja Brociner
    Date: January 18th, 2011 at 3:27 pm

    What will they imagine next? In many instances, They’ll guarantee you

  • Comment by cubetz
    Date: January 25th, 2011 at 1:40 pm

    yep. still waiting for some new info. A game theme would be great adition to all of us.

  • Comment by Multiplayers Games
    Date: March 22nd, 2011 at 10:08 am

    Awesome, im testing this on my site, thanks for making it!

  • Comment by Nickelodeon Games
    Date: April 3rd, 2011 at 12:10 pm

    Thanks alot mate, this is a really nice info about WordPress game :) I’m bookmarking this page!!

  • Comment by Play Ms Pacman
    Date: April 21st, 2011 at 7:24 pm

    My website http://playmspacman.net is also powered by Wordpress and I can say that it is doing very well.

  • Comment by Dem Managment
    Date: May 25th, 2011 at 8:23 am

    i love this thing wordprees is now in games also

Leave a Comment

WP Games Embed Plugin

Date: 28th February 2009 at 1:27 am | Filed under: development, plugins, wordpress | Author: Sam Burdge | Tags: , , ,

Turn your wordpress blog into a games arcade!

This beta version WordPress plugin, WP Games Embed, makes it easy to embed games into your WordPress blog by using shortcodes in your posts and pages. WP Games Embed is intended to be able to support content offered by the various free games sites out there using the codes or downloads they provide.

FEATURES

4 Different views:

  1. Grid view - a grid of thumbnail images linking to each game (can be restricted to a single category or parent category)
  2. Category view - this view includes a medium sized image and a written description of the game
  3. Single page view - the page where you play the game itself
  4. Featured Game view - this view is similar to category view, but allows you to pick the games yourself to create your own 'Featured Games' page.

Different embedding modes:

  1. iFrame embedding - embed iFrame content using code provided by free games sites, or use this method to display games from your own server where an html file has been provided with the free game download.
  2. Flash embedding - embed Flash content using embed codes provided by other sites, or embed flash games directly from your own site. You can even upload them easily using the wordpress 'Add Media' tool.

WORKING EXAMPLE

Visit Zap Gamez Arcade to see an example of the plugin in action.

INSTALLATION

  1. Download the plugin from the link at the bottom of this page
  2. Upload the wp-games-embed.php file to your wp-content/plugins folder.
  3. Activate the plugin from the Plugins page in WordPress.

USAGE

Use shortcodes to embed games into your posts, or to create a grid of thumbnails on a page or your home page.

Embedding a game in a post:

Shortcode: [game /]

Additional attributes:

  • width - the width of the game
  • height - the height of the game
  • src - the url of the game (html file for iframe embedding, swf file for flash embedding)
  • flash - if set to true flash embedding will be used, if set to false iframe embedding will be used. (default=false)
  • thumb - the url of the thumbnail image (70px x 60px)
  • main - the url of the large image (appx 300px wide)
  • title - the name of the game!
  • description - your description including controls etc.
  • featured - whether this should be formatted as a featured game. (default=false)
  • game_url - only to be used in Featured mode (when featured is set to true). See  the shortcode examples below for more details.

Shortcode Example 1 (embedding game as iFrame):

[game width="640" height="480" src="http://www.example.com/games/pacman.html" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="false"/]

Shortcode Example 2 (embedding game as Flash):

[game width="640" height="480" src="http://www.mysite.com/games/pacman.swf" thumb="http://www.mysite.com/images/pacman-small.jpg" main="http://www.mysite.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="true"/]

Creating a grid of thumbnails on a page:

Shortcode: [get_latest_games /]

Additional attributes: list_category - the category id for the games you want to appear in the list.

The list_category attribute makes it possible to display the latest games under a certain category e.g. 'Arcade' or the latest games under all categories. Simply set up a main category called 'games' and then create all your games categories (action,adventure,sports, etc.)  as sub-categories.

Shortcode Example 3 (thumbnail grid):

[get_latest_games list_category="2" /]

Creating a Featured Games page:

Shortcode: [game /]
Additional atrtributes: (see above)

The important attributes for creating a features games list are 'featured' which should be set to true, and 'game_url' the url where the game can be played on your site.

Shortcode Example 4 (featured games):

[game  main="http://www.myblog.com/uploads/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/pacman/" /]

[game  main="http://www.myblog.com/uploads/donkeykong-medium.jpg" title="Donkey Kong" description="This is a great game! Use the arrow keys to play." featured="true" game_url= "http://www.myblog.com/games/donkey-kong/" /]

DOWNLOAD THE PLUGIN


26 Responses to “WP Games Embed Plugin”

  • Comment by imad
    Date: March 5th, 2009 at 11:28 am

    good work:) I am going to install it , I have also interest in the wp Mochi plugin..
    Thanx for sharing

  • Comment by Sam Burdge
    Date: March 5th, 2009 at 2:02 pm

    Hi Imad
    Good luck! Don’t forget to post a link to your arcade here as an example…
    The mochi plugin needs a bit more development to integrate the mochi ‘bridge’ which gives the scoreboard functionality etc.
    Sam

  • Comment by The Wordpress Arcade Experiment Has Begun! - Page 2 - Talk Arcades
    Date: March 12th, 2009 at 9:34 pm

    [...] the WP Super Cache plugin, which speeds it up a lot! I have also developed a wordpress plugin WP Games Embed (very much a beta at the moment) which allows you to embed games in a wordpress blog with various [...]

  • Comment by acrylic
    Date: March 19th, 2009 at 9:29 pm

    Hello Sam and thanks for this wonderful plugin.

    I only have a slight problem with the get_latest_games shortcode. Every time I put in and define the category (for example 20) it lists all content from all categories. It might be a bug or might be something that I’m looking over.

    Thanks for your help

  • Comment by Sam Burdge
    Date: March 20th, 2009 at 2:10 am

    Hi Acrylic

    The get_latest_games shortcode will return all posts under a category, and all posts under child categories of that category. So if you have a main category called ‘games’ with an id of 1 and sub-categories of games such as ‘action’ (id =2), ‘arcade’ (id = 3), ‘fighting’ (id =4), etc. if you call category 1 in get_latest_games you will get all games, but if you call category 2 you should just get ‘action’ games.

    If this doesn’t help please comment again as it is this type of feedback that helps me to develop and improve my plugins over time.

    Sam

  • Comment by acrylic
    Date: March 20th, 2009 at 3:20 pm

    Hi Sam!

    I tweaked the code a bit and now it’s doing what I need. My concept was to have the grid system represented on a separate wordpress page rather than in a single post.

    So I created a new page template. The problem that I encountered was that the page template gets the content by running the loop first but the ep-embed.php runs the loop again. So what happens is that the page template loops through all the posts you have and displays the content.

    What I did was that I omitted the while loop and left the if conditional in. In this way the loop only runs when you have a content in your page and retrieves it. Once it happens it activates your function call which loops through the given parameters and retrieves all the game posts.

    I hope I made sense :/

  • Comment by Harri Nyman
    Date: March 26th, 2009 at 11:52 am

    Interesting plugin, no doubt - however I have interesting dilemma, is there some kind of limit how many games is needed before grid appears? On my site it’s not working, at least not yet.

  • Comment by Exam Philippines
    Date: April 1st, 2009 at 4:29 pm

    thank you so much for sharing this plugin. really helpful to my game site

  • Comment by Bilal
    Date: April 11th, 2009 at 7:10 pm

    Hi, great plugin.
    One question, if we use feeds to get mochi games can we use this plugin to show those games in posts?

  • Comment by Create a Wordpress Arcade | I love games
    Date: April 20th, 2009 at 6:15 am

    [...] wp-games-embed-plugin [...]

  • Comment by Eoin
    Date: May 7th, 2009 at 1:41 am

    Hi,
    I’m trying to get this to work, but can’t quite get it right. The plugin is activated - and this is code that I’m trying to use - (I changed example.com and mysite.com to our site)
    [game width="640" height="480" src="http://www.skuzziport.com/games/pacman.html" thumb="http://www.skuzziport.com/images/pacman-small.jpg" main="http://www.skuzziport.com/images/pacman-medium.jpg" title="PacMan" description="This is a great game! Use the arrow keys to play." flash="false"/]
    grateful for tips!

  • Comment by Sam Burdge
    Date: May 9th, 2009 at 9:50 am

    Hi Eoin
    In what way is it not working? Do you have an example I can look at?

  • Comment by Mark
    Date: September 19th, 2009 at 3:48 am

    Thanks for this little plugin…it works a treat.
    I’m gonna use it to add games as I go along, and then put a category page up… in the meantime I’ll just add each game I find as a blog post.

    The 1st game attempt can be found here….

    http://www.foundstuff.co.uk/2009/magic-towers-solitaire-an-addictive-little-solitaire-game/

    Excellent plugin and simple to use.

  • Comment by Steve
    Date: October 30th, 2009 at 3:13 am

    Well it seems to me to be quite useless, the grid view shows evey post of the whole blog, fine if 2-3 is all you have, but when in the 1,000s very terrible.

  • Comment by Ronnie
    Date: January 11th, 2010 at 11:49 am

    When I click the game, it just reloads the page..

    Example:
    http://www.munkholmvej41.dk/?page_id=487

  • Comment by shiv
    Date: February 17th, 2010 at 8:08 am

    hie friends i have installed but unable to put the games in blog.. help me out….

  • Comment by Transformez votre Blog en plateforme de jeux vidéos! | 5axe Deluxe Edition – Le blog
    Date: May 30th, 2010 at 11:34 am

    [...] de l’auteur : ici A VOIR AUSSI :Embed iFrame Plugin pour [...]

  • Comment by 5 plugins para criar um site de games flash em Wordpress | Templates e Wordpress Themes
    Date: June 3rd, 2010 at 3:10 pm

    [...] 4. WORDPRESS GAMES EMBED [...]

  • Comment by Crie um site de games em flash em Wordpress :: Tutoriais CTDO - Sua Base de Tutoriais Online
    Date: June 10th, 2010 at 9:45 am

    [...] quando você considera que é bastante mais acessível que todos os seus competidores.04. Wordpress Games EmbedEste plugin Wordpress, ainda em versão beta, é gratuito e lhe permite embutir games flash [...]

  • Comment by lousy jones
    Date: June 13th, 2010 at 3:04 pm

    well thanks for this, but it just refreshes the page loaded once

  • Comment by Crie um site de games em flash em WordPress « Diogo Paixão
    Date: August 23rd, 2010 at 2:24 am

    [...] 04. WordPress Games Embed [...]

  • Comment by Ana
    Date: August 23rd, 2010 at 12:58 pm

    Hi!
    I tried the code for the “Grid” and it is not working, can you please check?
    http://www.juegoxdia.com/?page_id=23
    thanks
    Ana

  • Comment by Super Games
    Date: October 2nd, 2010 at 6:19 pm

    Thanks , I’ll try on my next site.

  • Comment by Plugins para criar um site de jogos com Wordpress | Criar / Fazer site grátis,logomarcas,criar blog, dicas de como criar
    Date: October 6th, 2010 at 1:51 pm

    [...] 04. WordPress Games Embed [...]

  • Comment by How To Embed Mochi Flash Games Into Your Blog Posts | techtikus.com
    Date: March 23rd, 2011 at 3:53 am

    [...] can set attributes such as width and height according to your blogs measurements.  Here is a list of other attributes that you can use with the short [...]

  • Comment by arielsan
    Date: May 27th, 2011 at 2:49 pm

    Sam, I tried to use the plug-in using the same example for iframes (no flash), and I believe you have a bug in your code or in your example. The thing is, if you define flash=”false” (I want to use iframes) then the variable flash will be defined as string “false” but in your code you are checking for if($flash) and that will return true whatever the value of flash variable is. As a user, if you don’t want flash, you will have to remove the flash parameter.

    [game ... flash="false"] -> [game ...]

Leave a Comment

Detecting keypresses cross-browser using jquery

Date: 26th February 2009 at 8:36 pm | Filed under: development, scripts | Author: Sam Burdge | Tags: , , ,

Using keypresses as an alternate way to to navigate through websites  is a great way to make sites more accessible. For instance pressing 'p' takes the user to the previous page, while pressing 'n' takes them to the next. The benefits of using jQuery to achieve this are:

  1. Concise code
  2. Easy to implement various functions on keypress
  3. Works on IE, Firefox & Safari

DETECTING THE KEY CODE

To detect which key a user has pressed you need to set up a function that returns an ascii code each time a key is pressed. A full table of ascii codes is available here. The tricky part to this is that Mozilla and Safari define the value as charCode, while IE defines  it as keyCode. The following script is based on the 'n' key and 'p' key, it takes the links from the 'Previous' and 'Next' buttons on your site and changes page when the key is pressed. Also note that it is important to detect for both the lower-case and upper-case letter as the ascii codes will be different for each.

SOURCE

//process this function whenever a key is pressed
$(document).keypress(function (e) {
//Next
//if the keyCode or charCode is 110 (lower case n) or 78 (upper case N)
if (e.keyCode == 110 || e.charCode == 110 || e.keyCode == 78 || e.charCode == 78){
//grab the href attribute from the link with the id "next_link"
var next_link = $("a#next_link").attr("href");
//if the next link exists (i.e if it's not the last page)
if(next_link){
//go to the next page
window.location = next_link;
}
}
//Previous
//works exactly as the above example but for the 'p' and 'P' keys
if (e.keyCode == 112 || e.charCode == 112 || e.keyCode == 80 || e.charCode == 80){
var prev_link = $("a#prev_link").attr("href");
if(prev_link){
window.location = prev_link;
}
}

});

You must have the jQuery library installed on your site to run this script. For more info about jquery visit the site: http://jquery.com/

7 Responses to “Detecting keypresses cross-browser using jquery”

  • Comment by Steve Holden
    Date: June 26th, 2009 at 4:03 pm

    What happens when the page contains a form and the user types into the form inputs?

  • Comment by Sam Burdge
    Date: June 26th, 2009 at 4:27 pm

    Hi Steve
    Good question. I hadn’t tested that.
    You could always try working around this by using the focus() and blur() events for the form input to switch the keypress function on or off.

    Basic example:

    $(’input’).focus(function(){
    var keypress_active = false;
    });
    $(’input’).blur(function(){
    var keypress_active = true;
    });

  • Comment by lionel
    Date: October 8th, 2009 at 9:39 pm

    Hi, thanks for the infos, the code is working well, but is it possible to replace the windows.location by an ajax call ? thanks ?

  • Comment by lionel
    Date: October 8th, 2009 at 9:40 pm

    if yes how ? ;) thanks

  • Comment by links for 2010-03-13 | Folks Pants
    Date: April 8th, 2010 at 5:22 pm

    [...] Detecting keypresses cross-browser using jquery | Sam Burdge (tags: jquery keypress) [...]

  • Comment by Jason Cramer
    Date: March 15th, 2011 at 11:58 pm

    BRILLIANT! This was exactly what I had been looking for. Love the color scheme to your site too. Very retro DOS-ish.

  • Comment by Rachel Nabors
    Date: March 17th, 2011 at 1:49 pm

    Hello Sam! This is exactly what I am looking for for arrow-key navigation through my comics site. I need to disable it when people are typing in comment fields, though, and I just can’t seem to implement your example code for disabling above.

    Could you expand on it a bit? It would be a great help if you could!

Leave a Comment

A Plethora of Plugins - Open Source Mayhem?

Date: 26th February 2009 at 6:56 pm | Filed under: blog, wordpress | Author: Sam Burdge | Tags: , , ,

It's great that the wordpress plugins search is now working. What a massive step forward! Thanks wordpress!!

Since the plugin search was fixed it has become much more apparent how many plugins there are which are actually renamed / re-branded copies of other plugins. As plugins are released under the GPL public license there is nothing to stop these so called plugin developers from being able to do this.

This is a real problem as it is important that plugin developers who are creating original, useful plugins continue to do so. If they feel that their work is going to be taken and copied, and that they are going to end up having to share some of the credit with one of these 'plugin leeches', they may feel less inclined to make the plugin publicly available.

My suggestion is that wordpress monitor the originality of new plugins more closely when they are submitted by the developer, a good way to do this would be to allow plugin developers to 'flag' plugins which they feel are too similar to their own plugin or are a direct rip-off of their plugin.

Also, if developers have made minor changes or improvements to someone elses plugin they should be encouraged to work with the original plugin's developer to improve the existing plugin and take a share of the credit with the original developer. This will help to increase the  quality rather than quantity of plugins. A good way to implement this could be to list these offshoots or alternative versions on the original plugins page with an explanation of how they differ from the original.

Leave a Comment

A Single html Form With Multiple Submit Buttons - Changing a Form’s Action Attribute using jQuery

Date: 15th February 2009 at 4:48 pm | Filed under: development, scripts | Author: Sam Burdge | Tags: , , , , , ,

I was recently confronted with the problem of having a single html form with three different submit buttons, each button submitting the form data to a different php script. This is obviously impossible with html alone, as a form can only have one 'action' attribute, which dictates the URL of the file that the form's data is submitted to.

I searched around on the web for an easy way to implement this and found various examples. One of the best examples I found was on CoderLab's blog: Multiple submit buttons on a multiple blog which uses javascript to apply a different action attribute to the form depending on which button is pressed. Each button in the form has it's own onClick function like so:

<form name="myForm" id="myForm">
Search: <input type="text" id="wrdSearch"/>
<input type="button" name="google" id="google" value="Google" onClick="SendTo(this.id)"/>
<input type="button" name="msn" id="msn" value="MSN" onClick="SendTo(this.id)"/>
<input type="button" name="yahoo" id="yahoo" value="Yahoo" onClick="SendTo(this.id)"/>
</form>

(Visit the page to see the javascript that goes with it: http://blog.coderlab.us/2005/10/04/multiple-submit-buttons-in-a-form/)

As I already had jQuery installed on the site, and the CoderLab script would still need some modification to serve my specific purpose, I decided to see if I could find a simpler way to achieve a similar result using jQuery. The form on my site was a lot more complex, with many fields etc. So what I really needed was a script that would submit all the form data to each of the 3 php scripts depending on which submit button was clicked.

Firstly, I stripped the onClick functions out of the form and removed the name attributes from the buttons too, like so:

<form id="myForm" method="post">
Search: <input type="text" name="search"/>
<input type="button" id="button1" value="Submit to script 1" />
<input type="button" id="button2" value="Submit to script 2" />
<input type="button" id="button3" value="Submit to script 3" />
</form>

I then wrote the following jQuery script to change the form's action attribute accordingly and submit it when each button is pressed:

$(document).ready(function(){

$("#button1").click(function(){
$('form#myForm').attr({action: "script_1.php"});
$('form#myForm').submit();
});

$("#button2").click(function(){
$('form#myForm').attr({action: "script_2.php"});
$('form#myForm').submit();
});

$("#button3").click(function(){
$('form#myForm').attr({action: "script_3.php"});
$('form#myForm').submit();
});

});

The script should work on any browser that is compatible with jQuery (see here: http://docs.jquery.com/Browser_Compatibility)

For more information on installing and using jQuery visit the website: http://jquery.com/

10 Responses to “A Single html Form With Multiple Submit Buttons - Changing a Form’s Action Attribute using jQuery”

  • Comment by A Single html Form With Multiple Submit Buttons - Changing a Form’s Action Attribute using jQuery - PHP-update.co.uk
    Date: March 11th, 2009 at 1:55 pm

    [...] More here: A Single html Form With Multiple Submit Buttons - Changing a Form’s Action Attribute controlling j… [...]

  • Comment by Dickram
    Date: March 16th, 2009 at 6:33 pm

    You rock man. I was just looking for this and found your site. I’m using jquery too, with code igniter.
    Thank you very much!!

  • Comment by David
    Date: September 24th, 2010 at 1:04 am

    Hey, your article gives me a big help. Why using $(’form#myForm’) rather than $(’#myform’) though?? thank you very much

  • Comment by Sam Burdge
    Date: September 24th, 2010 at 1:17 am

    Hi David
    Glad it helped ;)

    there is no difference between using $(’form#myForm’) or $(’#myform’)

    i just wrote it that way as i thought it would make it clearer for the tutorial.

  • Comment by David
    Date: September 24th, 2010 at 4:25 am

    Thank you for your reply!~many thanks mate

  • Comment by Ben
    Date: October 4th, 2010 at 10:12 am

    Brilliant, cheers mate. Really helped me out of a whole

  • Comment by Ben
    Date: October 4th, 2010 at 10:13 am

    that should have said a whole world of frustration!!

    (pressed enter a little early)

  • Comment by Tom Lackey
    Date: April 27th, 2011 at 9:21 pm

    this served me well, thanks!

  • Comment by Vishal
    Date: June 10th, 2011 at 9:50 am

    Wow….great stuff… really helped a lot.. thanx buddy.

  • Comment by Mr. Serra
    Date: June 17th, 2011 at 2:57 pm

    God save the internet and people like you!
    Thank you very much!!

Leave a Comment

 Page 1 of 3  1  2  3 »