I am experiencing an issue where the result is not appearing on the input tag within my

<script>
<form action="do-add-cek.php" id="myForm" method="post" enctype="multipart/form-data">


                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input type="text" name="amount" class="form-control" id="amount" onkeyup="convertToWords();"/>
                                        </div>
                                        <div class="form-group">
                                            <label>In Words</label>
                                            <input type="text" name="inWords" class="form-control" id="inWords" />
                                        </div>
                                        <div class="form-group">
                                            <label>Destination Account Number</label>
                                            <input type="text" name="destAccount" class="form-control"  onkeyup="validateNumber(this)"/>
                                        </div>
                                        <div class="form-group">
                                            <label>Destination Bank</label>
                                            <input type="text" name="destBank" class="form-control"  onkeyup="this.value = this.value.toUpperCase()" />
                                        </div>
                                        <button name="save" type="submit" class="btn btn-default">Save</button>
                                        <button name="reset_button" type="reset" class="btn btn-default">Reset</button>
                                    </form>
</script>

Answer №1

Use JavaScript debugging to identify the reason your code is not working! Utilize the browser console for troubleshooting.

Additionally, incorporate jQuery to attach event listeners instead of relying on inline JavaScript.

$('input').on('input', function(){
  console.log(this.value);
})// Check the input value

$('#nominal').on('input',function(){
  if (typeof terbilang === 'function')
    terbilang();
  debugger;
})
$('#terbilang').on('input',function(){
  if (typeof terbilang === 'function')
    terbilang();
})
$('[name="rekTujuan"]').on('input',function(){
  if (typeof validAngka === 'function')
    validAngka(this);
})
$('[name="bankTujuan"]').on('input',function(){
  this.value = this.value.toUpperCase();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="do-add-cek.php" id="myForm" method="post" enctype="multipart/form-data">


<div class="form-group">
<label>Nominal</label>
<input type="text" name="nominal" class="form-control" id="nominal"/>
</div>
<div class="form-group">
<label>Terbilang</label>
<input type="text" name="terbilang" class="form-control" id="terbilang" />
</div>
<div class="form-group">
<label>Rekening Tujuan</label>
<input type="text" name="rekTujuan" class="form-control"/>
</div>
<div class="form-group">
<label>Bank Tujuan</label>
<input type="text" name="bankTujuan" class="form-control" />
</div>
<button name="save" type="submit" class="btn btn-default">Save</button>
<button name="button_reset" type="reset" class="btn btn-default">Reset</button>
</form>

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

Enhancing Typography in Material UI with Custom Breakpoints in React CustomThemes

Currently, I am utilizing material UI and React to develop a single-page application (SPA). However, I have encountered an issue with ensuring that my pages are responsive for smaller screen sizes. To address this, I have been manually adding fontSize: { x ...

Are queued events in React discarded upon a state change?

As I develop a React form component with simple validation, I encounter an issue where the onBlur event of a field and the onSubmit function of the form are triggered simultaneously. If there is a change in the state during onBlur, the onSubmit function do ...

Tips for avoiding background-image zoom on mobile browsers when stacking elements vertically:

Within my ReactJS application, I have implemented a feature where elements are added vertically from top to bottom when the "Post" button is clicked. These elements display correctly on both mobile and desktop browsers. However, there is an issue when vie ...

There seems to be an issue with the React Hooks edit form where it is not selecting the record to edit. Although the currentId is correct

I have a simple CRUD React Hooks app with an ASP.NET Core Web API. The Courses component displays a list, but when I click on a link to edit a particular course, the form shows up with empty fields. Here is the JSX for the Courses component: import React, ...

Transferring image data to a different webpage

Currently, I am facing an issue with obtaining image data from a camera and photo album on a mobile device. Although I have successfully retrieved the chosen image using the provided code snippet below, my dilemma lies in transferring this image data to an ...

Tips for utilizing the material ui auto-complete search feature

I am in search of an alternative to material-ui-search-bar because it is no longer being maintained. I have been suggested to try using Material UI's auto complete instead. However, from the examples I've seen, it seems like only text field struc ...

Loop through each object in an array and verify if the value matches a specific criteria in Javascript

Explore the common issues related to object iteration and queries outlined below. Presented here is a list of objects (used for managing a connection form): const connectionData = { mail: { value: false, isRequired: true }, password: { v ...

Create a personalized Command Line Interface for the installation of npm dependencies

I am looking to develop a Node CLI tool that can generate new projects utilizing Node, Typescript, Jest, Express, and TSLint. The goal is for this CLI to create a project folder, install dependencies, and execute the necessary commands such as npm i, tsc - ...

Eliminate the array from the data retrieved through an http request in AngularJS

Currently, I am making an http call to retrieve data from a database. This process involves calling 6 different types individually. $scope.getAll = function() { var url = 'http://someurl/'; var allObjects = []; $sc ...

What could be causing the "length" property of undefined error when attempting to install React-Bootstrap with the command "npm i react-bootstrap"?

Currently, I am working my way through a comprehensive MERN full-stack tutorial. So far, things have been going smoothly - I used the "npx create-react-app" command to set up the react application and everything is compiling and running perfectly. Howeve ...

When using AngularJS in conjunction with Karma-Jasmine, it is important to note that the functions verifyNoOutstandingExpectation() and verifyNoOutstandingRequest() may not

There is an unresolved HTTP request that needs to be flushed. When I use the following code afterEach(function(){ $httpBackend.verifyNoOutstandingExpectation(); $httpBackend.verifyNoOutstandingRequest(); }); The code functions correctly and I ...

Include a Vue component within another Vue component in a Laravel application using VueJs

I've recently integrated Vue.js into my Laravel project and encountered an issue when trying to call a component within another component. After running the command npm run dev, I received a webpack error. Here is the code snippet from my parent comp ...

Utilizing a PHP-scripted multidimensional array in an AJAX success function

I've encountered an issue while trying to access a multidimensional array passed to my AJAX success function. Here's how I'm sending the data: $response = array(); $response['message']['name'] = $name; $response['m ...

What are some techniques for managing scrolling within a particular element?

I am currently working with Vue.js and utilizing Element UI components. I want to incorporate a scroll management function to achieve infinite scrolling. To better understand, please refer to the screenshot in the Example section: Despite trying differen ...

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

Currently facing an issue with my code where creating a new chip triggers the label model to generate a name and ID. The problem arises when trying to select an option from the dropdown menu. Instead of returning the label name, it returns an Object. The ...

What is the best way to access form data in React using a React.FormEvent<HTMLFormElement>?

I am looking for a way to retrieve the values entered in a <form> element when a user submits the form. I want to avoid using an onChange listener and storing the values in the state. Is there a different approach I can take? login.tsx ... interfa ...

Acquire YouTube embeds from a Facebook community

Currently, I am in the process of extracting wall posts from a Facebook group feed. However, my main focus is on extracting the YouTube embed IDs only. After researching Facebook's Graph API, I have yet to find an easier method for directly extracting ...

Creating a link with a POST method and without using a new line

I am attempting to generate a square matrix and send data using the post method. I have discovered a solution involving JavaScript and form submission, but each time a new form is created, it results in a new line being added. Alternatively, if I move th ...

Model updating with the addition of an item and triggering a secondary ng-repeat for refreshing

As I was working on the phone tutorial, I found myself pondering how to implement a specific use case. The browser renders a list of phones. When the user clicks on add phone for one of these phones, the function addItem is triggered and adds that phone ...

The texture failed to load onto the 3D object during the mapping process

Issues with loading texture into the 3D ring model, although it works fine for other objects. No compile errors detected. Proper lighting conditions are set up but the color of the 3D model appears grey/black. The texture loads correctly for other object ...