Usually there will be a div tag with an ID in which you will load the content. Example: <div id=”load”></div> Now in order to have a preloader displayed while the content is busy loading we need to include the following code within the function used to load the content. function load(){ //This is the function that loads the preloader $(‘#load’)...
This can be done by using the hide() and show() methods or the toggle() method. The toggle() method calls the show() method if the element is hidden and the hide()method if the element is showing. $(“selector”).hide(); $(“selector”).show(); or $(“selector”).toggle(); Example: <script type=”text/javascript”> $(function() {...
NOTE: Please not that the prop JQuery function should be used instead of the attr function in JQuery 1.6 and higher Answer: To disable all input elements within div use the following code: $(‘#message :input’).attr(‘disabled’, true); To disable all select elements within div use the following code: $(‘#message :select’).attr(‘disabled’, true);...
$(document).ready(function() {
var height = $('body').height();
alert(height)
});
NOTE: Remember to include the JQuery library file.
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
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...
Within your JQuery code use the following line of code to get the value
var radio_value = $("input[name='radio_group_name']:checked").val();
var countRows = $('#tableID tr').length;
alert(countRows)
or
var countRows = $('#tableID tr').size;
alert(countRows)
The selector takes all rows and then counts them.
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" />
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" />
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 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"...
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.
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.
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...
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...
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...
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'...
Use the following JQuery code
$("input[name=postaddr], textarea").attr('readonly', 'readonly');
postaddr is the name of the textarea
I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.