Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Friday, 15 May 2020

How to add new elements to DOM in jQuery

Answer: User the jQuery append() function

You can add element to dom using append function. sometimes we need to create dynamic html to dom at that time you can use append function.

$("#dvData").append("How to add new elements to DOM in jQuery");


at 1 comment:
Labels:

Monday, 30 December 2019

How to Get the Value of Selected Option in a Select Box Using jQuery

How to Get the Value of Selected Option in a Select Box Using jQuery

Use the jQuery :selected Selector

You can use the jQuery :selected selector in combination with the val() method to find the selected option value in a select box or dropdown list.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected Option Value</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(this).children("option:selected").val();
        alert("You have selected the country - " + selectedCountry);
    });
});
</script>
</head>
<body>
    <form>
        <label>Select Country:</label>
        <select class="country">
            <option value="usa">United States</option>
            <option value="india">India</option>
            <option value="uk">United Kingdom</option>
        </select>
    </form>
</body>
</html>
at No comments:
Labels:

How to call a function automatically after waiting for some time in jQuery

Use the jQuery delay() method

You can use the jQuery delay() method to call a function after waiting for some time. Simply pass an integer value to this function to set the time interval for the delay in milliseconds.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Execute a Function after Certain Time</title>
<style>
    img{
        display: none;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function showImage(){
    $("img").fadeIn(500);
}
$(document).ready(function(){
    $(".show-image").click(function(){
        $(this).text('loading...').delay(1000).queue(function() {
            $(this).hide();
            showImage(); //calling showimage() function
            $(this).dequeue();
        });       
    });
});
</script>
</head>
<body>
    <button type="button" class="show-image">Show Image</button>
    <img src="../images/kites.jpg" alt="Flying Kites">
</body>
</html>
at No comments:
Labels:

Friday, 22 April 2016

file size validation in jquery


Introduction:

 Here I will explain how to validate file size using Jquery or Javascript. Sometimes required  validation like File size cannot be more than 2Mb or 5MB otherwise alert to user "File size cannot be more than 2Mb or 5MB"

Description: 

In previously post I explained to  
file type validation in jquery
Change the column name or datatype or size in sql server
How to set or get textbox value using Javascript or Jquery
Server does not support secure connections  
textbox allow only characters javascript
button click event not firing in asp.net c#

 And now here I explain to how to validate file size using Jquery or Javascript in asp.net.

Now copy the following javascript code in your page.


function IsFileValid() {

        var objFileUpload = document.getElementById("fuContentImage");
        if (objFileUpload.value != null || objFileUpload.value != "") {
        var file;
        file = objFileUpload.files[0];
      

 if (file.size > 2097152) //file.size returns Bytes of the file
        {
                alert("File size cannot be more than 2Mb.");
                return false;
        }
 
    }
}


And copy this html in your page


<h1>how to validate File size cannot be more than 2Mb or 5MB using Jquery or Javascript</h1>

<input type="file" name="Image" id="fuContentImage" />  

<input type="submit" onclick="return IsFileValid();" value="Add" class="btn btn-success" style="width:200px" />

at No comments:
Labels: , ,

file type validation in jquery


Introduction:

 Here I will explain how to validate file type like JPG,PNG or JPEG using Jquery or Javascript. Sometimes required this type of validation like upload only  JPG,PNG or JPEG file otherwise alert to user "file type is not valid to upload "

Description: 

In previously post I explained to  
Change the column name or datatype or size in sql server
How to set or get textbox value using Javascript or Jquery
Server does not support secure connections  
textbox allow only characters javascript
button click event not firing in asp.net c#

 And now here I explain to how to validate file type like JPG,PNG or JPEG using Jquery or Javascript in asp.net.

Now copy the following javascript code in your page.



function IsFileValid() {

        var objFileUpload = document.getElementById("fuContentImage");
        if (objFileUpload.value != null || objFileUpload.value != "") {
            var file;
            file = objFileUpload.files[0];
            if ((file.name.split('.').pop().toLowerCase()) == "png" || (file.name.split('.').pop().toLowerCase()) == "jpg" || (file.name.split('.').pop().toLowerCase()) == "jpeg" || (file.name.split('.').pop().toLowerCase()) == "bmp") {

            }
            else {
                alert("Please upload png,jpg or jpeg image only.");
                return false;
            }
           
           
        }
        return true;
    }


And copy this html in your page




<h1>how to validate file type like JPG,PNG or JPEG using Jquery or Javascript</h1>

<input type="file" name="Image" id="fuContentImage" />  

<input type="submit" onclick="return IsFileValid();" value="Add" class="btn btn-success" style="width:200px" />






 


at No comments:
Labels: , ,

Tuesday, 5 April 2016

How to set or get textbox value using Javascript or Jquery ?

Introduction:

 Here I will explain How to set textbox value using Jquery, How to get textbox value using Jquery, How to set textbox value using Javascript, How to get textbox value using Javascript. If you want to How to set or get textbox value using Javascript or Jquery then copy following code in your page.

Description: 

In previously post I explained to  
file type validation in jquery
Change the column name or datatype or size in sql server
How to set or get textbox value using Javascript or Jquery
Server does not support secure connections  
textbox allow only characters javascript
button click event not firing in asp.net c#

 And now here I explain to How to set textbox value using Jquery, How to get textbox value using Jquery, How to set textbox value using Javascript, How to get textbox value using Javascript in asp.net.

Now copy the one by one following javascript code in your page.


How to set or get textbox value using Javascript or Jquery ?

How to set textbox value using Javascript


function setValueJavascript() {
        document.getElementById('txtName').value = "Set Value To textbox using javascript";
    }

How to get textbox value using Javascript

function getValueJavascript() {
        var Name = document.getElementById('txtName').value;
        alert(Name);
    }

How to set textbox value using Jquery

function setValueJquery() {
        $("#txtName").val('Set Value To textbox using Jquery');
    }

How to get textbox value using Jquery

function getValueJquery() {
        var Name = $("#txtName").val();
        alert(Name);
    }

Here full example of How to set textbox value using Javascript, How to get textbox value using Javascript How to set textbox value using Jquery and How to get textbox value using Jquery

Example: 


<!DOCTYPE html>
<html>
<head>
    <title>How to set or get textbox value using Javascript or Jquery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
    </script>
    
    <script>

    function setValueJavascript() {
        document.getElementById('txtName').value = "Set Value To textbox using javascript";
    }

    function getValueJavascript() {
        var Name = document.getElementById('txtName').value;
        alert(Name);
    }

    function setValueJquery() {
        $("#txtName").val('Set Value To textbox using Jquery');
    }

    function getValueJquery() {
        var Name = $("#txtName").val();
        alert(Name);
    }
    </script>
</head>
<body>
    <h1>How to set or get textbox value using Javascript or Jquery</h1>

    Enter Name: <input type="text" id="txtName" />

    <br /><br />
    <input type="button" value="Set Value Javascript" onclick="setValueJavascript()" />
    <input type="button" value="Get Value Javascript" onclick="getValueJavascript()" />
    <input type="button" value="Set Value Jquery" onclick="setValueJquery()" />
    <input type="button" value="Get Value Jquery" onclick="getValueJquery()" />
</body>
</html>

How to get Value of All textbox of particalar Div

Some times required to get Value of All textbox of particalar Div and inserting or doing some operation to these texboxes value. so I have added this complete code to get Value of All textbox of particalar Div or get Value of multiple textbox of particalar Div using Jquery.

Example: 


<!DOCTYPE html>
<html>
<head>
    <title>How to get Value of All textbox of particalar Div</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
    </script>

    <script>
        function GetValue() {
            var Contain = "";
            $("#divRegsiter :text").each(function () {
                alert($(this).val());
            });
        }
    </script>
</head>
<body>
    <h1>How to get Value of All textbox of Div</h1>

    <div id="divRegsiter">
        Enter Name: <input type="text" id="txtName" /><br />
        Enter User Name: <input type="text" id="txtUserName" /><br />
        Enter Email: <input type="text" id="txtEmail" /><br />
    </div>
    <div id="divLogin">
        <p>Not getting this textbox value when you click on button, because 
        this is exist in different Div</p>

        Enter Name: <input type="text" id="txtNameLogin" /><br />
    </div>
    <br /><br />
    <input type="button" value="Get All Textboxes Value" onclick="GetValue()" />
</body>
</html>

at No comments:
Labels: , ,
Subscribe to: Posts (Atom)


Asp.net tutorials