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

punyasiapa (25)in #utopian-io • 7 years ago (edited)

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

#tutorial #jquery

7 years ago in #utopian-io by punyasiapa (25)

$0.00

Sort:

Trending