Found 766 Articles for JQuery

How to enable the “disabled” attribute using jQuery on button click?

AmitDiwan
Updated on 03-Oct-2020 12:53:40

2K+ Views

Set the disabled property to true in jQuery −ExampleFollowing is the code − Live Demo         Document             $("#change").click(function (buttonEvent) {     buttonEvent.preventDefault();     $('#showTxtBoxHide').prop("disabled", false);   });   To run the above program, save the file name anyName.html(index.html). Right click on the file and select the option “Open with live server” in VS Code editor −OutputThe output is as follows −The text box property is disabled. To enable, you need to click the button −

How to populate select list with jQuery?

AmitDiwan
Updated on 01-Oct-2020 13:42:21

10K+ Views

To populate select list with jQuery, use for loop along with append() and append the options to the already created select.Let’s say we have the following select with options − John David ExampleFollowing is the code to append more number of options using append() − Live Demo            Document           John       David     $(document).ready(function () {    var data = [       { "name": "Bob", "customerName": "Bob" },       { "name": "Mike", "customerName": "Mike" }    ];    for (var index = 0; index

How to print div content using jQuery?

AmitDiwan
Updated on 01-Oct-2020 13:33:17

5K+ Views

Let’s say we have the following button −On click of the above button, call the function() with on() −$('#buttonId').on('click', function () {    displayTheData(); })The above function is using the html() to display the following div −    I am inside the div tag... ExampleFollowing is the complete code to print div content − Live Demo            Document           I am inside the div tag...        I am not inside the div tag...            $('#buttonId').on('click', function () ... Read More

Manipulate two selects on page load with jQuery

AmitDiwan
Updated on 01-Oct-2020 13:20:39

381 Views

Let’s say the following is our first select −    John    David    Bob    Mike    Sam    Carol Following is our second select −    David    Mike    Carol We need to remove the options in the first select, which are similar to options in the second select. For this, use val(). Following is the complete code −Example Live Demo              Document           John       David       Bob       Mike       Sam       Carol               David       Mike       Carol        $('#remaining_name > option').each(function (i, el) {       var value = $(el).val();       $('#all_present_name > option[value="' + value + '"]').remove();    }); OutputThe output is as follows −

Fetch value from Alert pop up in jQuery

AmitDiwan
Updated on 11-Sep-2020 06:35:05

440 Views

To fetch value from alert pop up, use alert(). At first, use prompt() to input the value from user. Following is the code −Example Live Demo Document    var value = prompt("Please enter an integer value");    var multiplyBy10=10*value;    alert("Result after multiplying by 10 = "+ multiplyBy10); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor −OutputThis will produce the following output −Put an integer value and click the OK button.After clicking the OK button, the snapshot is as follows −

List View Search list on typing with filter like keyword search using jQuery?

AmitDiwan
Updated on 10-Sep-2020 07:25:48

4K+ Views

Let’s the following is our input type, wherein the user will search −Now, use hide() and show() to display only relevant search and hide rest. For example, on typing “Ja”, related keywords like “Java” and “JavaScript” should be visible because it begins with “Ja”.Example Live Demo Document Enter the keyword.. JavaScript John Smith Java David Miller -1) {             $(this).show();             $(this).prev('.subjectName').last().show();          } else {             $(this).hide();     ... Read More

How to hide table rows containing zero value with jQuery?

AmitDiwan
Updated on 10-Sep-2020 07:22:42

1K+ Views

Let’s say the following is our table with product quantity records − qty: qty: qty: qty: Let us now hide using the hide() method. Following is the code −Example Live Demo Document qty: qty: qty: qty:    $('.hideRowContainingZeroValue input').filter(function(){       return +this.value === 0;    }).closest("tr").hide() To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −

Change input type value attribute in jQuery

AmitDiwan
Updated on 10-Sep-2020 07:09:35

4K+ Views

Let’s say the following is our input type with value, “John Smith” −To change, use the attr() method −$('#changeTheName').attr('value', 'Please enter your name.......');You need to use the concept of attr(). Following is the code −Example Live Demo Document    $('#changeTheName').attr('value', 'Please enter your name.......'); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −

Place an H1 element and its text at a particular index in jQuery

AmitDiwan
Updated on 10-Sep-2020 06:59:49

422 Views

To set an element and it’s text, use the text() method in jQuery. With that, use the :nth-child selector to place it at a particular position. Following is the code −Example Live Demo Document JavaScript MySQL MongoDB Java C#    $('h1:nth-child(4)').text("Python"); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −

Refresh page after clearing all form fields in jQuery?

AmitDiwan
Updated on 01-Sep-2020 12:30:34

2K+ Views

To refresh page, use the location.reload() in JavaScript. The sample JavaScript code is as follows −Example Live Demo Document UserName: Password: Refresh Page    $('#RefreshPage').click(function() {       location.reload();    }); To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.OutputThis will produce the following output −After filling the form, the snapshot is as follows −When you click the button “Refresh Page”, the page will refresh and the following output is visible −

Advertisements