Subscribe
-
-
Recent Posts
Recent Comments
- Michael on Voting System Youtube Style With jQuery & PHP
- Michael on Voting System Youtube Style With jQuery & PHP
- Saran on Voting System Youtube Style With jQuery & PHP
- Neiljun Odiaz on Login with Google using PHP API library
- DjLexsas on Simple Ajax Pagination with jQuery & PHP
Popular Posts
- Ajax Image Upload with jQuery and PHP
- Post to Facebook Page Wall Using PHP + Graph
- 40+ CSS Buttons from codepen
- Ajax Add & Delete MySQL records using jQuery & PHP
- Ajax Image Upload and Resize with jQuery and PHP
- Simple Ajax Pagination with jQuery & PHP
- PayPal Express Checkout with PHP
- 30 Pure CSS3 Tutorials & Examples
- Post on Facebook wall using PHP
- Loading More Results From Database Using jQuery Ajax
- Login with Google using PHP API library
- Ajax Facebook Connect with jQuery & PHP
- 60+ Free Quality Wordpress themes
-
Select Box Change Dependent Options dynamically
We may have seen different examples showing how to change/load the content in child Select Box, depending on the parent Select Box options. Most examples uses database and Ajax to achieve the same, which I think is bit unnecessary. Here’s how we can easily create dynamic dependent select box just using jQuery.
Bootstrap Framework Quick Start
There’s been a lot of buzz lately about Twitter’s Bootstrap framework, many new excellent websites are built upon Bootstrap solid framework. whether your need is a responsive grid system or pre-styled typography, Bootstrap comes in handy, it is very easy to start and well documented. But if you are wondering where to start, look no further, because I am going to create a basic responsive layout using Bootstrap, focusing on some fundamental stuff to get you started quickly.
Enable/Disable Form Submit Button with jQuery
If you are creating a HTML form, especially Ajax driven form, you might want to disable the submit button while page goes into loading mode, because you don’t want user to resubmit the same content and cause script failure. Why not easily prevent user from resubmitting form just by disabling submit button.
Get Selected Values From Radio Button using jQuery
Let’s say you have following radio options for the user, and you need to retrieve the value from selected radio button using jQuery.
1 2 3 4 5 | <div>Choose option:</div> <input type="radio" name="user_options" value="css" /> CSS <input type="radio" name="user_options" value="jquery" /> jQuery <input type="radio" name="user_options" value="html" /> HTML <input type="radio" name="user_options" value="xml" /> XML |
This jQuery line below retrieves the value of selected radio box.
1 | var checked_site_radio = $('input:radio[name=user_site]:checked').val(); |
But when radio isn’t checked, “undefined” error returns, to deal with undefined value do this :
1 2 3 4 5 | var checked_site_radio = $('input:radio[name=user_site]:checked').val(); if(checked_option_radio!=undefined) { //do stuff } |
The complete example :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html> <html> <head> <title>Radio Button Selection</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#radio_submit").click(function (e) { var checked_option_radio = $('input:radio[name=user_options]:checked').val(); var checked_site_radio = $('input:radio[name=user_site]:checked').val(); if(checked_option_radio===undefined || checked_site_radio===undefined) { alert('Please select both options!'); }else{ alert('Your option - "' +checked_option_radio + '", and site - "'+ checked_site_radio +'"'); } }); }); </script> </head> <body> <form id="myform"> <div>Choose option:</div> <input type="radio" name="user_options" value="css" /> CSS <input type="radio" name="user_options" value="jquery" /> jQuery <input type="radio" name="user_options" value="html" /> HTML <input type="radio" name="user_options" value="xml" /> XML <div>Another option:</div> <input type="radio" name="user_site" value="Google" /> Google <input type="radio" name="user_site" value="Yahoo" /> Yahoo <input type="radio" name="user_site" value="Facebook" /> Facebook <input type="radio" name="user_site" value="Twitter" /> Twitter <div><button id="radio_submit" type="button">Show Selected Radio</button></div> </form> </body> </html> |

-

-

-

-

Saaraan On