Javascript JQuery Examples – CodeInDotNet

How to Redirect a Page After 5 Seconds Using JavaScript and jQuery

admin — Sat, 09 Mar 2024 14:41:01 +0000

Redirecting users to another page after a few seconds can be useful in web development when a certain action is performed and automatically you want to redirect the page to another internal or external link. This article explains how to implement a simple redirection after 5 seconds using both JavaScript and jQuery, with a complete HTML example.

Automatically Redirect to Another Page

Steps:

To redirect use window.location.href
To delay redirection use setTimeout or setInterval

1. window.location.href

Use window.location.href to redirect page to another URL.

example:

function redirect() {
        window.location.href = "https://codeindotnet.com"; 
    }

2. Use setTimeout or setInterval

To delay the redirection to another page after some action, you can use one of the following methods:

setTimeout() or
setInterval()

a. Redirect Using setTimeout()

The HTML example below explains how to delay page redirection using setTimeout().

setTimeout(redirect, 5000); // rediret after 5 seconds

Create the HTML Structure:

"en">
"UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">

In the code above, we:

Define the JSON data (replace this with your actual JSON source).
Use the slice method to extract the first 10 items from the JSON array.
Loop through the extracted items and append them to an HTML element with the id “item-list.”

Latest:

Removing the Readonly Property with JavaScript and jQuery

admin — Thu, 14 Sep 2023 00:10:11 +0000

In web development, there are often situations where you need to allow users to edit input fields that are initially set as read-only. In this article, we will explore how to remove the readonly property from input fields using both plain JavaScript and jQuery, complete with HTML code examples.

Javascript – Remove Readonly Property from textbox input

In this example, we have a text input field with the ID “readonlyInput” and a button with the ID “removeReadonlyBtn” that we will use to trigger the removal of the readonly property.

To remove the readonly property using plain JavaScript, you can use the following script:

javascript example:



    

    Remove Readonly Property


    
        Readonly Input:

In this JavaScript code, we first wait for the DOM content to be fully loaded using the DOMContentLoaded event. Then, we retrieve references to the input field and the button using getElementById. When the button is clicked, we use the removeAttribute method to remove the “readonly” attribute from the input field, allowing users to edit its content.

jQuery – Remove Readonly Property from textbox input

You can achieve the same result with jQuery.

jquery example:




    
    
    Remove Readonly Property


    
        Readonly Input:

In this jQuery example, we first include the jQuery library from the Content Delivery Network (CDN). Then, we use the $(document).ready() function to ensure the DOM is fully loaded before attaching an event handler to the button with the ID “removeReadonlyBtn.” When the button is clicked, we use the removeAttr method to remove the “readonly” attribute from the input field.

popular readings:

– Removing Spaces Validation from Input Field via jQuery

– Difference between window.location.href, window.location.replace, and window.location.assign in JavaScript

– Get Letters Alphabet Array – Javascript (JS)

– Read HTML Tags from URL as text file and insert them into an existing element – Javascript

– Different Ways to Read Text Files from URLs using JavaScript and jQuery

– Check CKEditor Version in JavaScript

– Validate Password with Regex Pattern in JS

– How to check if an element is hidden in jQuery?

– Javascript: find out if Element is hidden or visible

– 6 ways to redirect to another page in JavaScript

– Show JavaScript Popup in a webpage using Div Elements & CSS

– Difference between window.onload and $(document).ready()

– Switch Textbox to readonly in runtime

– Remove Comma in Javascript and jQuery

– Days Array in JS and jQuery

– Remove last tr (row) from table – Javascript & jQuery

Difference between window.onload and $(document).ready()

admin — Tue, 12 Sep 2023 15:30:32 +0000

When working with JavaScript in web development, you often encounter situations where you need to ensure that your code runs when the web page is fully loaded and ready for manipulation. Two commonly used methods for achieving this are window.onload and document.ready. While both seem similar at first glance, they serve slightly different purposes and have distinct use cases. In this article, we’ll explore the differences between window.onload and document.ready functions and provide examples to illustrate their usage.

Key Differences (window.onload vs document.ready)

Timing: The main difference between the two is the timing of execution. window.onload waits for the entire page and all external resources to load, while document.ready (or DOMContentLoaded) fires as soon as the DOM is ready for manipulation.
Dependency: Use window.onload when your code relies on external resources like images and stylesheets that need to be fully loaded. Use document.ready (or DOMContentLoaded) when your code doesn’t depend on external assets and can be executed once the DOM is ready.

window.onload – Javascript

The window.onload is the built-in JavaScript event that is fired when the entire web page, including all its content (images, stylesheets, scripts, etc.), has been fully loaded. It indicates that the DOM (Document Object Model) and all external resources have been completely processed. Any code specified within the window.onload event handler will run only after the entire page has loaded.

Here’s an example of how to use window.onload:




    Window.onload Example


    Hello, World!

In this example, the JavaScript code within the window.onload event handler will display an alert only after the entire page, including the

element, has finished loading.

document.ready – jQuery

On the other hand, the document.ready function is a concept primarily associated with the jQuery library, although similar functionality can be achieved with vanilla JavaScript using the DOMContentLoaded event. The document.ready (or DOMContentLoaded) event is triggered as soon as the DOM is ready for manipulation, even before external resources like images are fully loaded. This makes it ideal for executing code that doesn’t depend on external assets.

Here’s an example of how to use document.ready with jQuery:




    Document.ready Example
    


    Hello, World!

In this jQuery example, the alert will be displayed as soon as the DOM is ready, which means it will appear before any external resources have finished loading.

popular readings:

– How to hide Scroll Indicator in React Native

– Removing Spaces Validation from Input Field via jQuery

– Difference between window.location.href, window.location.replace, and window.location.assign in JavaScript

– Get Letters Alphabet Array – Javascript (JS)

– Read HTML Tags from URL as text file and insert them into an existing element – Javascript

– Different Ways to Read Text Files from URLs using JavaScript and jQuery

– Check CKEditor Version in JavaScript

– Validate Password with Regex Pattern in JS

– How to check if an element is hidden in jQuery?

– Javascript: find out if Element is hidden or visible

– 6 ways to redirect to another page in JavaScript

– Show JavaScript Popup in a webpage using Div Elements & CSS

– Switch Textbox to readonly in runtime

– Remove Comma in Javascript and jQuery

– Days Array in JS and jQuery

– Remove last tr (row) from table – Javascript & jQuery

– How to access Months Array in Javascript and jQuery

Switch Textbox to readonly in runtime

admin — Wed, 06 Sep 2023 08:11:29 +0000

You can toggle the textbox to read-only or editable mode by using its readOnly property.

jquery code snippet:

textbox.prop("readonly", true);

javascript code snippet:

textbox.readOnly = true;

Make textbox readonly – Full HTML & Scripts

Here’s a complete HTML code example that changes the behavior of textbox based on readonly property. You can use either jQuery or Javascript:

HTML Structure:




    
    Readonly Textbox Example
    


    
        Readonly Textbox Example
        Readonly Textbox:

CSS (styles.css):

.container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
}

button {
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

Using JQuery (script.js)

$(document).ready(function() {
    // Get a reference to the textbox
    var textbox = $("#readonly-textbox");

    // Make the textbox readonly
    $("#make-readonly").click(function() {
        textbox.prop("readonly", true);
    });

    // Make the textbox editable
    $("#make-editable").click(function() {
        textbox.prop("readonly", false);
    });
});

we use jQuery to handle the click events of the “Make Readonly” and “Make Editable” buttons. When the “Make Readonly” button is clicked, we set the readonly property of the textbox to true, making it readonly. When the “Make Editable” button is clicked, we set the readonly property to false, allowing the user to edit the textbox.

Using Javascript (script.js)

document.addEventListener("DOMContentLoaded", function() {
    // Get a reference to the textbox
    var textbox = document.getElementById("readonly-textbox");

    // Get references to the buttons
    var makeReadonlyButton = document.getElementById("make-readonly");
    var makeEditableButton = document.getElementById("make-editable");

    // Function to make the textbox readonly
    function makeReadonly() {
        textbox.readOnly = true;
    }

    // Function to make the textbox editable
    function makeEditable() {
        textbox.readOnly = false;
    }

    // Attach click event handlers to the buttons
    makeReadonlyButton.addEventListener("click", makeReadonly);
    makeEditableButton.addEventListener("click", makeEditable);
});

This JavaScript code achieves the same functionality – It uses the addEventListener method to attach click event handlers to the “Make Readonly” and “Make Editable” buttons and updates the readOnly property of the textbox accordingly.

popular readings:

– Removing Spaces Validation from Input Field via jQuery

– Difference between window.location.href, window.location.replace, and window.location.assign in JavaScript

– Get Letters Alphabet Array – Javascript (JS)

– Read HTML Tags from URL as text file and insert them into an existing element – Javascript

– Different Ways to Read Text Files from URLs using JavaScript and jQuery

– Check CKEditor Version in JavaScript

– How to hide Scroll Indicator in React Native

– Remove Comma in Javascript and jQuery

– Days Array in JS and jQuery

– Remove last tr (row) from table – Javascript & jQuery

– How to access Months Array in Javascript and jQuery

Remove Comma in Javascript and jQuery

admin — Sat, 02 Sep 2023 14:25:18 +0000

The below code shows how to remove all commas from the input string.

Using Javascript

javascript code snippet/ example

// Using String replace() method
var originalString = "1,000,000";
var stringWithoutCommas = originalString.replace(/,/g, '');

console.log(stringWithoutCommas); // Output: "1000000"

In this example, we use the replace() method with a regular expression /,/g to match all commas in the string and replace them with an empty string.

Using jQuery

jquery code snippet/ example

In this jQuery example, we select the element with the ID “text,” retrieve its content using text(), remove commas using replace(), and then set the modified text back to the element using text() again.

popular readings:

– Get Letters Alphabet Array

– Removing Spaces Validation from Input Field via jQuery

– Difference between window.location.href, window.location.replace, and window.location.assign in JavaScript

– Read HTML Tags from URL as text file and insert them into an existing element – Javascript

– Different Ways to Read Text Files from URLs using JavaScript and jQuery

– Check CKEditor Version in JavaScript

– How to check if an element is hidden in jQuery?

– Javascript: find out if Element is hidden or visible

– 6 ways to redirect to another page in JavaScript

– Show JavaScript Popup in a webpage using Div Elements & CSS

– Easy way to find Public IP Address: Javascript Code

– Days Array in JS and jQuery

– Remove last tr (row) from table – Javascript & jQuery

– How to access Months Array in Javascript and jQuery