jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxButton is used to illustrate a jQuery button widget that enables us to show a button on the desired web page.
The val() method is used to set or get the value. It has one optional parameter namely, a value which is of type string. It returns a string.
Syntax:
Set the value.
$("#jqxButton").jqxButton('val', "New Value");
Return the value.
var value = $("#jqxButton").jqxButton('val');
Set value using jQuery's val().
$("#jqxButton").val("New Value");
Return the value using jQuery's val().
var value = $("#jqxButton").val();Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
Example: The below example illustrates the jqxButton val() method in jQWidgets.
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="jqwidgets/styles/jqx.base.css"
type="text/css"
/>
<script type="text/javascript"
src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript"
src="jqwidgets/jqxbuttons.js"></script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>jQWidgets jqxButton val() method</h3>
<br />
<input
type="button"
id="jqxBtn"
style="padding: 5px 20px"
value="Click here"
/>
<div id="log"></div>
</center>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxBtn").jqxButton({
width: "150px",
height: "70px",
});
$("#jqxBtn").on("click", function () {
$("#jqxBtn").jqxButton("val", "Button");
});
});
</script>
</body>
</html>
Output:
