How to create a button for input and display a value in a popup with jquery

What Will I Learn?

You will learn jquery click event
You will learn how to show popup with jquery.

Requirements

You have basic about jquery
You have basic about html 5

Difficulty

Basic

Tutorial Contents

In jquery there are many events contained in it, but currently I only focus on event clicks that serve to input data into a form.

There are some things to prepare before starting, first you must have a text editor and browser, it's up to use anything, but if I use notepad ++ and google chrome.
Create an html file named setvalue.html.
The first stage is to prepare an element for html 5, as follows.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>

Before you start making the script, you must download the jquery file and css file first. You can download it here, or you can copy-paste the file below.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>

Now we will enter the stage to create a jquery script, as we know that the code must be between <script> ... <script>.
Add a function to start jquery, like this:

$( function() {
    var spinner = $( "#spinner" ).spinner();
} );

Function () {: opens a function,var: data type,spinner: variable,#spinner: forgives the value of the spinner.
Add a function to start event click,

$( "#getvalue" ).on( "click", function() {

Getvalue: captures data from spinner, on ("click", function () {: click event,function () {: opens a function.
Add a function to display the value:

alert(spinner.spinner ( "value" ) );

Alert: displays a capital, spinner.spinner ("value"): enters the value of the spinner into a value which is then displayed in modal.
Add an event click to input the value.

$( "#setvalue1" ).on( "click", function() {

# setvalue1: id of button, on ("click", function () {: opens a function for click event.

spinner.spinner( "value", 1 );

The above code serves to hold the value 1, and then will be displayed into the form.
The next step we will create the form and buttons using html. First we will create a label for the form, like this:

<label class="spinner">Select a value:</label>

Then we will create a textfile form.

<input id="spinner" name="value"><br>

Input: input form,id: id of form,name: name of form.

<button id="getvalue">Get value</button><br>

<button> create button, id: id of form button,
Here full code :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>input and show value</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>
  <script>
  $( function() {
    var spinner = $( "#spinner" ).spinner(); 
    $( "#getvalue" ).on( "click", function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#setvalue1" ).on( "click", function() {
      spinner.spinner( "value", 1 );
    }); 
    $( "#setvalue2" ).on( "click", function() {
      spinner.spinner( "value", 2 );
    }); 
    $( "#setvalue3" ).on( "click", function() {
      spinner.spinner( "value", 3 );
    }); 
    $( "#setvalue4" ).on( "click", function() {
      spinner.spinner( "value", 4 );
    }); 
    $( "button" ).button();
  } );
  </script>
</head>
<body>
<p>
  <label for="spinner">Select a value:</label>
  <input id="spinner" name="value">
</p>
<p>
  <button id="setvalue1">1</button>
  <button id="setvalue2">2</button>
  <button id="setvalue3">3</button>
  <button id="setvalue4">4</button>
  <button id="getvalue">Get value</button>
</p>
</body>
</html>

here is the output :
after click 1 :
after click get value :

Posted on Utopian.io - Rewarding Open Source Contributors

Sort:

Trending

[-]

shreyasgune (58) 7 years ago

Your contribution cannot be approved because it is not as informative as other contributions. See the Utopian Rules. Contributions need to be informative and descriptive in order to help readers and developers understand them.

As per rule:

End-user focused tutorials must address a minimum of three substantial concepts that are unique to the Open Source project and essential learning requirements for end-users. Ubiquitous functions, such as Save, Open, and Print are unacceptable as substantial concepts.

You can contact us on Discord.
[utopian-moderator]

$0.71

1 vote