What are the use of .val() function in JQuery? how to get the and set value in innerHTML.

0 votes
133 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

What are the use of .val() function in JQuery? how to get the and set value in innerHTML.

1 Answer

1 votes
Ravi Vishwakarma answered 29-Jul-2021 by Ravi Vishwakarma

 Val() in jquery are used to get and set value in selected elements. this val function are mostly used for getting value from input, select tag

Syntax

$(selector).val()
 Return value from selected elements
$(selector).val(value)
 It used to set value in selected elements
$(selector).val(function(index,currentvalue))
 It used to set value in selected elements by using the function
<!DOCTYPE html>

<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>val demo</title>
    <style>
        select {
            width:150px;
            height:20px;
        }
    </style>
    <script src='https://code.jquery.com/jquery-1.10.2.js'></script>
</head>
<body>
    <p style='color:white;'></p>
    <select id='color'>
        <option>Select Color</option>
        <option>Red</option>
        <option>Blue</option>
        <option>Black</option>
        <option>Pink</option>
        <option>Yellow</option>
        <option>Cyan</option>
    </select>
    <script>
        function displayVals() {
            var colorName = $('#color').val();
            $('p').text(colorName);
            $('body').css({ 'background-color': colorName.toLowerCase() });
        }
        $('select').change(displayVals);
    </script>
</body>
</html>

What are the use of .val() function in JQuery? how to get the and set value in innerHTML.