$(document).ready(function() {
var height = $('body').height();
alert(height)
});
NOTE: Remember to include the JQuery library file.
How do I remove a css class from a div tag and then add another css class to that same div tag using JQuery?
The following code removes a css class and then adds another css class to a specific div tag
$('#div_id').removeClass("OldClass").addClass("NewClass");
#div_id = Div Tags ID
OldClass = CSS class that needs to be removed
NewClass = CSS class that needs to be added
How to upload a file via Ajax using a form with JQuery and PHP
Click here to download JQuery files Answer: Create a new file called form_upload.php Include JQuery and the JQuery Form Plugin between the head tags in the form_upload.php file. {codecitation class=”brush: html;”} <head> <title>Ajax File Uploader</title> <script type=”text/javascript” src=”/jquery-1.3.2.js”></script> <script...
How to get the value of a checked radio button in a group using JQuery
Within your JQuery code use the following line of code to get the value
var radio_value = $("input[name='radio_group_name']:checked").val();
How to count the number of table rows within an html table using JQuery
var countRows = $('#tableID tr').length;
alert(countRows)
or
var countRows = $('#tableID tr').size;
alert(countRows)
The selector takes all rows and then counts them.
How to check if a checkbox has been checked using JQuery
The following code checks if a checkbox has been checked
var checkBox = $("input[name='myCheckBox']:checked").val();
if(checkBox == 'on'){
alert('CHECKED!!');
}else{
alert('NOT CHECKED');
}
myCheckBox is the name of the checkbox element
e.g.
<input type="checkbox" name="myCheckBox" />
How to get the value of an HTML element by the attribute name instead of the attribute id using JQuery
This can be accomplished by using the name attribute selector
$("input[name=ElementName]").val();
ElementName is the attribute name of the element
<input type="text" name="ElementName" />
How to find the id of the first anchor html element within the first element of an unordered list using JQuery
With getting the id I mean getting the attribute id’s value for the first element within the first element of the unordered list tag. Answer: We can obtain this by using the :first Selector from JQuery. Read more about the selector here Example: HTML <ul class="custom_class"> <li><a href="test1.html" id="1" name="link1" /></li> <li><a...
How to get the id of the first html element within a div tag element using JQuery
How to get the id of the first img html tag element within a specific div tag using JQuery? With getting the id I mean getting the attribute id’s value for the first element within the div tag. Answer: We can obtain this by using the :first Selector from JQuery. Read more about the selector here Example: HTML <div class=”custom_div”> <img id="1" name="image1"...
How to remove a html table row using JQuery
Ensure that the html table row has an id
e.g.
<tr id="TABLE_ROW_ID"><td>I want to be removed</td></tr>
Now the JQuery code that you will need to remove the table row
$('#TABLE_ROW_ID').remove();
If you do not have an id for the table row, try using one of the JQuery selectors available here.
How to check if JQuery library is loaded
Use the following code withing your JavaScript tags
if(jQuery){
alert('jQuery loaded');
}else{
alert('jQuery not loaded');
}
This method can be used to check if any other JavaScript variable or function exists or is set and thus is not limited to jQuery alone.
How to get the value of a radio button within a radio button group when selected using JQuery
Give all the radio buttons within a group the same name <input type="radio" name="RADIOGROUP" value="1" /> <input type="radio" name="RADIOGROUP" value="2" /> <input type="radio" name="RADIOGROUP" value="3" /> <input type="radio" name="RADIOGROUP" value="4" /> Now use the following JQuery code to obtain the value for the selected radio button within the Group...
How to submit an HTML Form using JQuery
For example you have a form with id “myform“ <form id="myform" action="submit.php"> <input type="text" value="This is a test form" /> <input type="button" id="mybutton" value="Save" /> </form> Now when the button with id “mybutton” is clicked we want to submit the form using the JQuery submit() function which executes each time the specified...
How to remove all options within a Html select box using JQuery
You have a html select box “combo box” <select id="selectBox"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> In order to remove all items using JQuery use the JQuery empty function $('#selectBox').empty(); Replace selectBox with the relevant id for the select box If you wish...
How to use JQuery to make a field Read Only
Say you have a input text field as below <input type="text" name="inputField" id="inputField" /> As soon as the page has finished loading we will make use of JQuery to make the input field Read Only so that the field can’t be edited by the user. We do it like this <script type="text/javascript"> jQuery(document).ready(function($){ $('#inputField').attr('readonly'...
How to make a Textarea Read Only using JQuery
Use the following JQuery code
$("input[name=postaddr], textarea").attr('readonly', 'readonly');
postaddr is the name of the textarea
How to check and uncheck a html checkbox using JQuery
We will use a checkbox with ID “myCheckbox” in this example First to check a checkbox using JQuery use the following code, remember to replace “myCheckbox” with the ID of your checkbox $('#myCheckbox').attr('checked','checked'); To un-check the checkbox use the following JQuery code, remember to replace “myCheckbox” with the ID of your checkbox $('#myCheckbox')...
Adding inline styles to html element using JQuery
This can be done by using the css JQuery function. Read more
An example is
$("#myElement").css('border','1px solid #FF0066');
The example above will produce the following
<input style="1px solid #FF0066" id="myElement" />
How to add a new Select Box option after the second option in the Select Box using JQuery
<select id="options"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> If you want to add a new option under Option 1, you would need to use the JQuery after function as example below $("#options option:first").after("<option>New second option</option>"); The above will find the first option and...