<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Webdevelopment at huuah.com &#187; elements</title>
	<atom:link href="http://huuah.com/tag/elements/feed/" rel="self" type="application/rss+xml" />
	<link>http://huuah.com</link>
	<description>webdevelopment, cms, php, javascript etc</description>
	<lastBuildDate>Sun, 20 Nov 2011 20:30:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>jQuery, accessing and modifying form elements</title>
		<link>http://huuah.com/jquery-accessing-and-modifying-form-elements/</link>
		<comments>http://huuah.com/jquery-accessing-and-modifying-form-elements/#comments</comments>
		<pubDate>Wed, 29 Jul 2009 20:43:58 +0000</pubDate>
		<dc:creator>js - huuah</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[elements]]></category>
		<category><![CDATA[form]]></category>

		<guid isPermaLink="false">http://huuah.com/?p=333</guid>
		<description><![CDATA[<p>When working with HTML Forms, it can in some situations improve the usability of the site, if the content of elements can change and reflect the options, that the visitor made in the previous fields.</p>
<p>The most common form element are input, checkbox, radio buttons, textarea and dropdown boxes and &#8230;</p>]]></description>
			<content:encoded><![CDATA[<p>When working with HTML Forms, it can in some situations improve the usability of the site, if the content of elements can change and reflect the options, that the visitor made in the previous fields.</p>
<p>The most common form element are input, checkbox, radio buttons, textarea and dropdown boxes and I will try to cover them all, even though the code might be the same or very much alike.</p>
<a name="Input+boxes"></a><h1>Input boxes</h1>
<input type="text" size="30" value="input box demo text" name="inputbox" id="inputbox" />
</p>
<p><em>Fetching content is done with</em>:</p>
<pre class="brush: jscript; title: ; notranslate">
// fetching the value
$(&quot;#inputbox&quot;).val();
</pre>
<p>Try it:<br />
<button id="inputboxbtn1">Make a popup with the contents</button></p>
<p><em>Setting new content is done with</em>:</p>
<pre class="brush: jscript; title: ; notranslate">
// setting a new value
$(&quot;#inputbox&quot;).val(&quot;We have now changed the text&quot;);
</pre>
<p>Try it:<br />
<button id="inputboxbtn2">Change the content to &#8220;We have now changed the text&#8221;</button></p>
<a name="Check+boxes+%2F+Radio+boxes"></a><h1>Check boxes / Radio boxes</h1>
<p>Both check boxes and radio boxes works the same way.</p>
<table id="elementID">
<tr>
<td>Field 1</td>
<td>
<input type="checkbox" value="Field 1" name="checkbox"></td>
</tr>
<tr>
<td>Field 2</td>
<td>
<input type="checkbox" value="Field 2" name="checkbox"></td>
</tr>
<tr>
<td>Field 3</td>
<td>
<input type="checkbox" value="Field 3" name="checkbox"></td>
</tr>
</table>
<p><em>Checking all fields:</em></p>
<pre class="brush: jscript; title: ; notranslate">
// loop through each checkfield
$(&quot;#elementID input:checkbox&quot;).each( function() {
  // set checked=checked
  $(this).attr(&quot;checked&quot;, &quot;checked&quot;);
});
</pre>
<p>Try it:<br />
<button id="checkboxbtn1">Check all boxes</button></p>
<pre class="brush: jscript; title: ; notranslate">
// loop through each checkfield
$(&quot;#elementID input:checkbox&quot;).each( function() {
  // if field is checked, then uncheck or the other way around
  this.checked ? $(this).attr(&quot;checked&quot;, &quot;&quot;) : $(this).attr(&quot;checked&quot;, &quot;checked&quot;);
});
</pre>
<p><button id="checkboxbtn2">Toggle boxes</button></p>
<p><em>Outputting the checked status for each field:</em></p>
<pre class="brush: jscript; title: ; notranslate">
// temporary variable for output purposes
var status = &quot;&quot;;
// loop through each fieldfield
$(&quot;#elementID input:checkbox&quot;).each( function() {
  // save field value and checkstate in variable
  status += $(this).val() + &quot; is &quot; + this.checked + &quot;,  &quot;;
});
// make a popup box with the result
alert(status);
</pre>
<p>Try it:<br />
<button id="checkboxbtn3">Output checkbox status</button></p>
<a name="Textarea"></a><h1>Textarea</h1>
<p><textarea id="textarea">Textarea sample text</textarea><br />
<em>Fetching content is done with</em>:</p>
<pre class="brush: jscript; title: ; notranslate">
// fetching the value
$(&quot;#textarea&quot;).html();
</pre>
<p>Try it:<br />
<button id="textareabtn1">Make a popup with the contents</button></p>
<p><em>Setting new content is done with</em>:</p>
<pre class="brush: jscript; title: ; notranslate">
// setting a new value
$(&quot;#textarea&quot;).html(&quot;We have now changed the text&quot;);
</pre>
<p>Try it:<br />
<button id="textareabtn2">Change the content to &#8220;We have now changed the text&#8221;</button></p>
<a name="Dropdown+boxes"></a><h1>Dropdown boxes</h1>
<select id="selectbox">
<option value="select1">Select 1</optoin></p>
<option value="select2">Select 2</optoin></p>
<option value="select3">Select 3</optoin><br />
</select>
<p><em>Fetch the value if the dropdown box:</em></p>
<pre class="brush: jscript; title: ; notranslate">
$(&quot;#selectbox&quot;).val()
</pre>
<p>Try it:<br />
<button id="selectboxbtn1">Output which option is selected</button></p>
<p><em>Selecting option 2 in the downdown box:</em></p>
<pre class="brush: jscript; title: ; notranslate">
// loop through options
$(&quot;#selectbox option&quot;).each( function() {
  // if the value is equal to 'select2', then select it
  if ($(this).val() == &quot;select2&quot;) {
    $(this).attr(&quot;selected&quot;, &quot;selected&quot;);
  }
});
</pre>
<p>Try it:<br />
<button id="selectboxbtn2">Select option 2</button></p>
<p><em>Selecting option 3 in the downdown box:</em></p>
<pre class="brush: jscript; title: ; notranslate">
// loop through options
$(&quot;#selectbox option&quot;).each( function() {
  // if the value is equal to 'select3', then select it
  if ($(this).val() == &quot;select3&quot;) {
    $(this).attr(&quot;selected&quot;, &quot;selected&quot;);
  }
});
</pre>
<p>Try it:<br />
<button id="selectboxbtn3">Select option 3</button></p>
<p>There you go. A small demonstration of how to access form elements. There above examples is just one way of doing it. There are other ways as well.</p>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://huuah.com/jquery-accessing-and-modifying-form-elements/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

