Getting and setting value of html elements using jQuery
If you have started using jQuery recently and you are used to DOM methods of getting and setting values for form and html elements, this article is for you.
Using jQuery can be confusing in the beginning but it is a lot easier once you get hold of it. In this post I will summarize methods for getting and setting values for html elements using jQuery. I assume that you are familiar with the $ function. Though it can be used in different ways to select elements, we will stick to selecting elements by id for the purpose of this tutorial.
An element can be accessed using its id as follows:
$('#someId')
Textbox, Hidden field and Textarea
All these elements share a common method. val() method is used to get and set values for these elements.
Setting:
$('#someid').val('any value')
will set the value of textbox to “any value”.
Getting:
$('#someid').val()
will get the value of that text box.
Radio Buttons and checkboxes
attr() is used to check/uncheck and select/unselect radios and checkboxes
Setting:
$('#id').attr('checked', true)
will select the control
$('#id').attr('checked', false)
will unselect the control
Getting
$('#id').attr('checked')
This will give true if radio/checkbox is checked/selected, false otherwise.
Select box/ Combo box
A notorious control, jQuery makes it very easy to get and set value of a combo box.
Setting:
$('#selectbox').val('1')
Pass the value of option that you wish to select to val()
Getting:
$('#selectbox').val()
This will give value of currently selected option in combo box
Setting/Getting innerHTML of other elements
Just like innerHTML, jQuery provides a handy function to manipulate innerHTML for all html elements.
Setting:
$('#somediv').html('some html inside a paragraph')
This will set the innerHTML of element with id somediv
Getting:
$('#somediv').html()
This will return the innerHTML of an element.
Thats all to it. Again, a demo can be found at this link (and obviously source code too). You can always shoot me a mail in case your question is not answered here.
Give this article a thumbs up on stumble upon if you liked this
Creating an XML in PHP using DOMDocument
In this tutorial you will learn how to create XML documents using PHP’s DOMDocument class.
First things first.There are 3 things that you should always keep in mind about XML. In short, XML has 3 main components.
- Elements, which we also call nodes. e.g.
<name /> - Attributes e.g
<name type="first"/>Here type is an attribute.
- Data/text nodes
<name type="first">Johnson</name>
Here “first” and “Johnson” are text nodes.
Hope this is clear. Now, we will create the following XML from our code.
< ?xml version="1.0" encoding="utf-8"?> <fruit name="Apple"> <weight>100 grams</weight> <calories>43</calories> <protein>3.2 grams</protein> </fruit>
Recently, I have become too much conscious(obsessed!!!) about calories, fat and protein. Hence this XML. 
Never mind, let us jump to code now.
First of all we will create an empty xml doxument. Then we will append nodes to it as required.
$objXML = new DOMDocument('1.0','utf-8');
This is constructor of DOMDocument class which defines an XML document. It will create an empty xml document. 1.0 is version and utf-8 is encoding of resulting xml. Second parameter is optional.
Total 4 functions will be used to create the xml.
- createElement: used to create xml nodes.
- createAttribute: used to create attributes of a node.
- createTextNode: used to create text nodes or createCDATASection if you want cdata sections instead of text nodes.
- appendChild: this will append above mentioned elements to xml.
First, let us create our root node fruit with attribute name=apple.
New Google website translator gadget
It was International Translation Day on 30th September and Google gifted users a new version of their website translator gadget.
From usability point of view this version is far more better then previous one and supports 51 languages. Earlier version of this gadget was a bit ugly in the manner it worked. It used to load the entire page in an iFrame which appeared like a full page reload every time user changed the language. It seems that the new gadget translates the page of text asynchronously. There is a progress indicator too which shows percentage of translation done. It is certainly faster then previous version.
There is one more feature to it. According to google if the language of a users browser visiting your page is different than the language of your page, they will be prompted to automatically translate the page in their language.
To use the gadget in your website just visit google at http://translate.google.com/translate_tools and follow these 3 steps:
- Select the language of your website.
- Select languages in which you want the translation.
- Copy the generated code in your webpages and you are ready to go.
Although the translation is not 100% correct, it is a great help to read and understand text of foreign languages.
Collection of 10 top 10 lists about web development
I am a regular reader of web development articles and in this process bookmark a lot of them. Out of that collection I present to you a list of 10 articles which themselves are lists of 10(tips, functions etc). Not all of them are top 10 
but equally good. All these articles are related to php, javascript, html, mysql and web development in general.
1- 10 code snippets for PHP developers
Simple and handy functions for common tasks like validating email address and XSL transformation.
2- 10 Advanced PHP Tips Revisited
Detailed and excellent tips from famous PHP gurus Chris Shiflett and Sean Coates.
3- Top 10 PHP frameworks
PHP frameworks are quite popular among developers these days. This site is dedicated to php frameworks alone. In this article all frameworks have been compared for features. Very useful to help you in decision making if you are planning to use a framework for your next project.
4- Top 10 custom JavaScript functions of all time
This is my favorite one. These 10 functions are a must in every web developer’s toolbox. Functions like getElementsByClass, toggle and cookie functions are included.
5- 10 JavaScript Quick Tips and Best Practices
Another good article on javascript best practices.
6- Top 10 Firefox Addons For Web Developers
Who hasn’t heard of Firebug or GreaseMonkey. This article lists similar addons for firefox that are a great help in web development.
Quick PHP Tip: How to parse CDATA sections using SimpleXML
Applies to: simplexml_load_string and simplexml_load_file
Problem : SimpleXML does not parse text inside CDATA tags in an XML.
Consider the XML below:
$str = '<rootNode>'; $str.='<childNode>some text goes here</childNode>'; $str.='</rootNode>';
To parse it we use following syntax:
$xml = simplexml_load_string($str);
On printing it outputs:
SimpleXMLElement Object ( [childNode] => some text goes here )
Thats OK. Now the same xml but this time the text is enclosed in CDATA tags.
$str = '<rootNode>'; $str.='<childNode><![CDATA[some text goes here]]></childNode>'; $str.='</rootNode>'
On printing this gives following output:
SimpleXMLElement Object ( [childNode] => SimpleXMLElement Object ( ) )
Yes its empty. This is because SimpleXML does not parse CDATA tags. All data enclosed within CDATA is ignored by SimpleXML parser.
Solution: Set the 3rd parameter to LIBXML_NOCDATA while parsing.
simplexml_load_string(simplexml_load_file too) actually takes 3 parameters.
- The string to parse
- Optional parameter – to return an object of class specified in this parameter. (By default it returns a SimpleXMLElement Object)
- Also optional – libxml parameters can be specified as options. This option provides the solution to our CDATA problem
Provide the 3rd parameter LIBXML_NOCDATA and SimpleXML will consider CDATA nodes as text nodes and will parse them.
$xml = simplexml_load_string($str,'SimpleXMLElement', LIBXML_NOCDATA);
This will output as desired:
SimpleXMLElement Object ( [childNode] => some text goes here )
Please note that using the third parameter requires PHP >=5.1 compiled with libxml.
I will be publishing a new post shortly on how to use SimpleXML to parse xml and extract data.
