I’ve been working for the past few days with jQuery and one of the task was to manipulate HTML forms before submitting it for processing. What I needed to do is to process a form having multiple submit buttons and select tags. These set of select tags requires all values to be selected on submit.
Let’s start with creating the markup of the form. Save the HTML below and name it as index.htm (we won’t be needing PHP stuff for now in this exercise.)
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample Form</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> </head> <body> <form id="myForm" action="index.html" method="post" onSubmit="return false;"> <select id="do-not-select" name="do-not-select[]" multiple="multiple" size="3"> <option>Do</option> <option>not</option> <option>select</option> </select> <select id="color" name="color[]" multiple="multiple" size="3"> <option>Red</option> <option>Green</option> <option>Blue</option> </select> <select id="size" name="size[]" multiple="multiple" size="3"> <option>Small</option> <option>Medium</option> <option>Large</option> </select> <select id="category" name="category[]" multiple="multiple" size="3"> <option>Children</option> <option>Ladies</option> <option>Men</option> </select> <input type="submit" value="Submit" /> </form> </body> </html>
The markup above will create a single form with an id of myForm having four (4) multi-select field with the following ids:
- do-not-select
- color
- size
- category
At line 6, we added the jQuery file (latest version 1.5.2 as of this writing) to use it’s functionality in manipulating DOM objects. Now for the real action, copy the code below and insert it between line 6 and 7:
<script>
$(document).ready(function() {
$('#myForm').submit(function() {
$('#color, #size, #category').find('option').each(function() {
$(this).attr('selected', 'selected');
});
});
});
</script>
The script above will do the following task:
- Instruct the browser to execute the script within
$(document).ready(...);when the page has loaded. - Trigger the script within
$('#myForm').submit(...)once the form with an id of myForm is submitted. - With the given
SELECTelement ids (color, size, category), find allOPTIONtags in each of them and add the attribute and valueselected="selected"
We also added at line 10 the event handler onSubmit with return false; to prevent the page on submitting while we are testing the script.
That’s it! Load the file on your browser and click Submit button. It should highlight all the options under color, size and category while ignoring the do-not-select option since we didn’t add them in the affected elements. See the full markup below. Remember to remove the onSubmit="return false;" in the FORM tag to enable redirection of your form on submit.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Form</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').submit(function() {
$('#color, #size, #category').find('option').each(function() {
$(this).attr('selected', 'selected');
});
});
});
</script>
</head>
<body>
<form id="myForm" action="index.html" method="post" onSubmit="return false;">
<select id="do-not-select" name="do-not-select[]" multiple="multiple" size="3">
<option>Do</option>
<option>not</option>
<option>select</option>
</select>
<select id="color" name="color[]" multiple="multiple" size="3">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<select id="size" name="size[]" multiple="multiple" size="3">
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
<select id="category" name="category[]" multiple="multiple" size="3">
<option>Children</option>
<option>Ladies</option>
<option>Men</option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
i am in blogging since last year (2010) so i used free acount for my webpage. this time i want to register my own domain name and looking for the best hosting to enthrust my website.
would you recommend a webhosting site for me, or rather may i ask who host your web? thank you for helping!
Hi,
Thanks. It helps me lot.
Regards
iijb
Hello Richard Feraro,
This post is awsome, i was stucked exactly in same situation how to select all option to be selected before it going to $_POST. And i have tried all option but could not find the solution.
Thanks alot ,you save my day.
Keep Posting…… 🙂
thx guys,nice one! 🙂
Thanks! Worked and helped