---
title: "What are the use of .val() function in JQuery? how to get the and set value in innerHTML."  
description: "What are the use of .val() function in JQuery? how to get the and set value in innerHTML."  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93803/what-are-the-use-of-val-function-in-jquery-how-to-get-the-and-set-value-in-innerhtml  
category: "web application"  
tags: ["web development", "web application development"]  
reading_time: 2 minutes  

---

# What are the use of .val() function in JQuery? how to get the and set value in innerHTML.

What are the use of .val() [function in JQuery](https://www.mindstick.com/forum/157818/what-is-the-purpose-of-the-each-function-in-jquery-explain-with-an-example)? how to get the and set [value](https://www.mindstick.com/articles/23219/an-optimized-description-adds-value-to-experience-and-in-turn-effectively-guest-posting-packages) in innerHTML.

## Answers

### Answer by Ravi Vishwakarma

Val() in jquery are used to get and set value in selected elements. this val [function](https://www.mindstick.com/articles/43970/purchase-suitable-wedding-dresses-for-your-wedding-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.](https://answers.mindstick.com/questionanswer/63c98863-354d-4e57-8007-9fb1c2c7cf4a/images/ff18af30-d8ba-4429-aa72-28eedb6d45e3.png)\


---

Original Source: https://answers.mindstick.com/qa/93803/what-are-the-use-of-val-function-in-jquery-how-to-get-the-and-set-value-in-innerhtml

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
