Guide to Inputting Numbers in a Form Field using a Pop-up Keypad (with Javascript/AJAX)

I am working on a small project that involves creating a keypad with buttons for all the digits, backspace, and decimal. When these buttons are clicked, they should populate a form field like a text box. The keypad will be located next to the form field as a link.

For this project, I prefer using Javascript or AJAX for the keypad functionality. It should also have a close button to minimize the popup keypad, similar to a calendar control seen on ticketing websites.

The main purpose of the keypad routine is simply to populate the form field when the buttons (digits) are clicked.

I need assistance in coding the keyboard routine. How do I go about designing the javascript? How can I include the buttons (for digits, decimal, and backspace) in the file? And how should I code it so that when the buttons are clicked, their values appear in the form field?

Any help provided would be greatly appreciated.

Thank you

javascriptajaxkeyboardformfield

Answer №1

What's causing the issue?

Avoid relying on ajax. Here's a simple and efficient alternative:

Check this out --> 

<html>
<head><title></title></head>
<body>

<script> function $(id) { return document.getElementById(id); } </script>

<input id="num" type="text" readonly="true"/>
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>

<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="$('num').value+=7;"/>
<input type="button" value="8" onclick="$('num').value+=8;"/>
<input type="button" value="9" onclick="$('num').value+=9;"/><br/>
<input type="button" value="4" onclick="$('num').value+=4;"/>
<input type="button" value="5" onclick="$('num').value+=5;"/>
<input type="button" value="6" onclick="$('num').value+=6;"/><br/>
<input type="button" value="1" onclick="$('num').value+=1;"/>
<input type="button" value="2" onclick="$('num').value+=2;"/>
<input type="button" value="3" onclick="$('num').value+=3;"/><br/>
<input type="button" value="X" onclick="$('keypad').style.display='none'"/>
<input type="button" value="0" onclick="$('num').value+=0;"/>
<input type="button" value="&larr;" onclick="$('num').value=$('num').value.substr(0,$('num').value.length-1);"/>
</div>

</body>
</html>

Avoid using it "as is"... incorporate css stylesheets, functions, etc.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable AJAX Pagination to function with AJAX URL filter parameters upon refreshing

I've successfully implemented an AJAX filter with two components: one for a load more button and the other for drop-down filters. These filters reload a list of properties on the front-end using AJAX and work seamlessly together. For instance, selecti ...

phpjqueryajaxwordpress

Controller action names combined with Web API route prefixes

My asp.net core 3.1 application has the following route in the startup file: app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller}/{action}/{id ...

c#jqueryajaxasp.net-coreasp.net-core-webapi

Is there a way to use a commandButton to dynamically update the src URL in a ui:include tag using

Creating a template using JSF involves including another JSF file within a div in the main layout. Here is an example: <h:panelGroup id="mainCenterBox" styleClass="mainCenterBox" layout="block"> <ui:include id="centerView" src="messageBoa ...

ajaxjsfcommandbuttonuiinclude

The issue of Angular 6 view failing to display accurate data upon page load

In my Angular 6 application, I've implemented a login feature using Firebase's Google login. The interface includes a button labeled Login when the user is logged out, and changes to Logout with the current email address displayed when the user i ...

javascripthtmlangular

What is the best way to retrieve each index from a particular Array within an AJAX object?

Currently, I am using an ajax call to request data from the giphy API. Here is the code snippet: $.ajax({ url: queryURL, method: "GET" }).then(function(response) { console.log(response); Upon checking the console log, I noticed that the response ob ...

ajax

Securing multiple routes in AngularJS using resolve for authentication

How can I authenticate users for all routes in my application without having to specify it individually? Is there a global way to handle authentication for all routes, so that I don't have to include the following code on each $routeProvider.when() c ...

javascriptphpangularjsmodel-view-controllerurl-routing

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

javascripthtmlcssmobile

When attempting to decode a base64 image or pdf in PHP, the process fails if the file size exceeds 500kb

Currently, I am utilizing AJAX to upload files (either image or PDF). The process involves converting the file to base64, then sending the data via AJAX. On the server side (PHP), the data is processed to transform it into an image or a PDF. While my ser ...

phpajaxwordpressbase64file-put-contents

Showing JSON object in an Angular 2 template展示JSON对象在模

When I execute the following code: stanservice.categoryDetail(this.params.get('id')) .then((data) => { this.category = JSON.stringify(data.res.rows[0]); console.log(JSON.stringify(data.res.rows[0])); }) .catch((error) => { ...

javascriptjsonangular

Create an HTML table row that includes a value along with its related sibling and parent values

I need to create an HTML table that compares segments in a JSON object. The format should display the segments along with their measures organized by domain group and vertical: ------------------------------------------------------------------------------ ...

javascriptjqueryhtml-tablelodash

It appears that the home page of next.js is not appearing properly in the Storybook

Currently, I am in the process of setting up my next home page in storybooks for the first time. Following a tutorial, I successfully created my next-app and initialized storybooks. Now, I am stuck at importing my homepage into storybooks. To achieve this, ...

javascriptreactjstypescriptnext.jsstorybook

Inserting HTML content into a DIV with the help of jQuery

Looking for a solution with my index.html file. I want to load other HTML files into a DIV by clicking on buttons. Here's an example of what I'm trying to achieve: I've searched through various examples online, but none seem to work for ...

javascriptjqueryhtml

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

I'm working with an element in my HTML where I need to determine the type of a variable, specifically whether it's a boolean or not. <button process-indicator="{{typeof(button.processIndicator) === 'boolean' ? 'modalProcess&apo ...

javascripthtmlangularjs

Introducing the YAHOO Media Suite, featuring the cutting-edge web player, MediaPlayer

Could someone please help with using the new MediaPlayer by Yahoo? The automatic content parsing is great, but I am encountering some issues when loading new data to the page using AJAX. How can I display or create the player manually? For example, if you ...

ajaxyahoo

What is a reliable method for consistently updating backend C# with user-side JS data whenever it is altered?

I'm working on a front end JS application that includes visual sliders. I need to send the updated slider information to the C# backend (ASP.NET) whenever a user makes changes. After some research, it seems like AJAX is the most efficient way to achie ...

c#javascriptasp.netajax

Looping through AJAX requests in JavaScript

I am attempting to make REST API requests in order to retrieve data and display it on a website. Although I have created a for loop to gather the data, I am encountering an issue where the data is not being displayed on the website. Upon checking with th ...

javascriptjqueryajaxloops

Guide to creating a Chrome extension that can detect updates in MongoDB documents

I have developed a chrome extension for syncing links, which stores the data in a MongoDB database using a custom REST API. While I am successfully able to push changes to the database and listen to them using a change stream in the REST API, I am facing d ...

javascriptnode.jsmongodbapigoogle-chrome-extension

Is there a way to track whether a user has logged into the Google Chrome browser using cookies?

While the LSID cookie can indicate if a user is logged into a Google account, it cannot be reliably used to determine if someone is signed into the Chrome browser because it may also appear when a person is signed into Gmail without being signed into Chrom ...

javascriptgoogle-chromeauthenticationcookiesgoogle-chrome-extension

Combining Date and Time in Javascript: A Guide

As a JavaScript beginner, I am struggling with combining date and time pickers. Despite finding similar questions, I have not yet found the solution I need. I have two inputs: one for the datePicker and another for the timePicker. <form> <div clas ...

javascripthtmljqueryangularjs

Steps to create a custom function that can manage numerous onclick actions to toggle the visibility of a specific field

I'm relatively new to coding and JavaScript. I'm working on a basic webpage that involves showing and hiding parts of sentences for language learning purposes. Is there a way to create a single function that can show and hide the sentence when a ...

javascriptfunctionbutton