All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Set Input Value

Last Updated : Mar 11, 2024

jQuery Set Input Value

In this article we will show you the solution of jQuery set input value, here we are going to show you example to achieving result with the help of val() and click() methods.

The val() method used to set value for particular element in html then click() method defined for specified source code will start load on browser when clickable element clicked by user.

Otherwise on browser you can’t see the result because it waits for click event occur.

Step By Step Guide On jQuery Set Input Value :-

Here we defined html block with input element it contains type and value attributes for set new value on input element.

Then button ‘Set Value’ which is help you to load major part of code on browser.

In script block we defined ready() method which is automatically loads program when open browser within that click() function defined to load main process after user clicks ‘Set Value’ button.

There we specified input element and val() method appends with it which contains ‘New Value Inserted’ text.

<!DOCTYPE html>
<html>
    <head>
        <title>Set Input Value</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("input").val("New Value Inserted");
                });
            })
        </script>
    </head>
        <body>
            <input type="text" value="Sample String">
            <button>Set Value</button>
        </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Here we imported open source jquery library support file which is needed for coding using jquery in program.
  5. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  6. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  7. In script we defined ready() function then click() method defined with button by specifying element name.
  8. Within click() method we specified input element then using val() method we sets new value ‘New Value Inserted’ on input box.
  9. In html block we defined input element with attributes ‘type, value’ respective values ‘text, Sample String’.
  10. The button ‘Set Value’ used to proceed loading source code when user click on it.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to set input value using jquery.

Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.

When we executes this program on browser we can see input box with text ‘Sample String’, button ‘Set Value’ now user needs to click on it then we can see newly set text ‘New Value Inserted’ on input box on webpage.

I hope this article on jQuery set input value helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪