The Prototype of a Variable: Its Intrinsic Value

I have a basic prototype and I am looking to continuously update the 'Balance' value as payments are made. Can anyone advise me on how to maintain the 'Balance' variable using HTML, CSS, Javascript, and Bootstrap? After clicking Submit, I want the value to revert back to $10. I have attempted this using JavaScript with the following simple code:

<html><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="default.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
     var output=10;


     function payment(){

     var amount= document.getElementById ("amountID");

     var merchant= document.getElementById("merchantID");


     output = output - amount.value;

     amount.value=" ";
     var balance=document.getElementById("balance");
     balance.innerHTML = output ;

     }
    </script>

  </head><body>
    <div class="row">
      <div class="col-md-12">
        <div class="headline">
          <h1>Payment</h1>
        </div>
      </div>
    </div>

    <div class="row">
        <div class="col-xs-3 col-md-3 col-lg-3">
                <ul class="nav nav-pills nav-stacked">
                  <li class="active">
                    <a data-toggle="tab" href="#pay">Pay</a>
                  </li>
                  <li>
                    <a data-toggle="tab" href="#send">Send</a>
                  </li>

                </ul>
        </div>    

        <div class="col-xs-9 col-lg-9 col-md-9"> 
                <div class="tab-content">
                  <div id="pay" class="tab-pane fade in active">

                    <div class="row">
                        <label class="col-md-4"  style="text-align:right;"> Available Balance:</label>

                    <label class="col-md-4" id="balance"> 10$</label> 
                    </div>

                    <form action="#" class="form-horizontal">

                    <fieldset>


                        <div class="form-group">


                        </div>  



                        <div class="form-group">
                                <label class="control-label col-md-4 col-xs-4" for="merchantID"> Merchant ID: </label>

                                <div class="col-md-4 col-xs-4">
                                <input type="text" class="form-control" id="merchantID" autofocus/>
                                </div>

                        </div>  

                        <div class="form-group">
                                <label class="control-label col-md-4 col-xs-4" for="amountID"> Amount:</label>

                                <div class="col-md-4 col-xs-4">
                                <input type="text" class="form-control" id="amountID" autofocus/>
                                </div>

                        </div>  

                        <div class="form-group">


                                <div class="col-md-8 col-md-offset-4 col-xs-8 col-xs-offset-4">
                                <button class="btn btn-primary" onclick="payment()"> Submit </button>
                                </div>

                        </div>  


                    </fieldset>
                    </form>

Answer №1

It was just a simple oversight. Make the change in the line below:

<button class="btn btn-primary" onclick="payment()"  > Submit </button>

Update it to look like this:

<button type="button" class="btn btn-primary" onclick="payment()"  > Submit </button>

This adjustment explicitly specifies the type of the button. In HTML5, by default, buttons have a behavior to submit forms. Without declaring the type, the form was submitting and causing your page to reload.

Answer №2

Encountering an issue where clicking a button triggers form submission can lead to unwanted page refreshes as the browser attempts to send data to the server without a specified target attribute. To prevent this, simply intercept and stop the submit action in your JavaScript function.

function handlePayment(e) {

  var amount = document.getElementById("amountID");
  var merchant = document.getElementById("merchantID");

  output = output - amount.value;
  amount.value = " ";

  var balance = document.getElementById("balance");
  balance.innerHTML = output;
  e.preventDefault(); //add
  return false; //add
}

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

I am unable to utilize the MQTT.js node package through a CDN

After installing mosquitto, I located it in the directory path: C:\Program Files\mosquitto Next, I started mosquitto by running the command: mosquitto.exe Then, I inserted the following code into the "test.html" file: <script src="https ...

The outcome of the Javascript Calculator is showing as "Undefined"

I've been attempting to create a calculator using JavaScript, but I'm facing an issue where the 'operate' function keeps returning Undefined, and I can't seem to figure out why. I suspect that the problem lies with the switch state ...

Instructions on passing a PHP variable as a parameter to a JavaScript function when a button is clicked

In my implementation of codeigniter 3, I have a view page where the data from $row->poll_question is fetched from the database. The different values within this variable are displayed on the voting.php page. Next to this display, there is a button label ...

JavaScript and CSS failing to implement lazy loading with fade-in effect

Is there a way to add the fade-in animation to an image when it is loaded with JavaScript or CSS? Currently, the code I have only fades in the image once it is 25% visible in the viewport. How can I modify it to include the fade effect upon image load? ...

To display the user's input value in the console log upon clicking

Having trouble displaying the user's input value in the console when the button is clicked. function submit(){ var userInput = document.getElementById('input_text').value; console.log(userInput); } ...

Working with Scala PlayFramework and Angular JS can be overwhelming due to the amount of duplication and confusion that arises from mixing different concepts

Attempting to build an application using the combination of playframework, scala, and Angular JS, I aimed to create a web app that functioned seamlessly whether JavaScript was enabled or disabled in the browser. This requirement is common when developing a ...

"Encountering issues with getStaticPaths not generating any paths

I have a folder named data which contains a file called events.ts: export const EventsData: Event[] = [ { name: 'School-Uniform-Distribution', images: ['/community/conferences/react-foo.png', "/community/conferences/react ...

MathJax only functions properly on Firefox Browser; for all other browsers, it fails to work as intended

I have integrated MathJax into a website that I designed. Everything works perfectly fine on Firefox, but there seems to be an issue with MathJax input when I try to open the site on Opera, for example. Here is the code snippet that is causing problems on ...

The serialization method in ajax is not providing the expected values as needed

Having trouble retrieving all the necessary form inputs using AJAX, jQuery, and Bootstrap modal. The serialize method is not returning all the required values. Specifically, I am missing the user_id and btn_action values. What could be the issue? I'v ...

Error message: The 'event' variable is not defined in the Firebase function

I am in the process of creating an appointment application which includes a notification feature. I have integrated Firebase functions to send notifications to users when a new appointment is booked or canceled. However, I encountered an error that says Re ...

What is the importance of context in the subscription method of RxJS or Angular Observables?

In the given situations, I am providing a child Component with a property that is updated later through an RxJs Observable subscription. Angular fails to detect changes when not using an anonymous function or binding the this context. // Situation 1 // C ...

Is it possible for AngularJS to automatically update a view when a persistent model (stored in a server database) is altered by an external application?

I'm just beginning to explore AngularJS, however, I am interested in creating a web application that can automatically update the user interface in real-time without needing to refresh the page whenever there is a change in the server-side database. ...

The operation failed to add the SVG element to the main SVG container

I am facing an issue with adding a text element to my existing svg using a mouseover event. The code seems to work fine in general, but I am having trouble appending the created text element to the existing svg file (root). I have tried various methods, in ...

Trigger a fire event upon entering a page containing an anchor

My query is similar to this particular one, with slight differences. I am working on a page that includes an anchor, such as page.html#video1. Within this page, there are multiple sections identified by ids like #video1, #video2. Each section comprises of ...

Issue: mongoose.model is not a valid function

I've been diving into several MEAN tutorials, and I've hit a snag that none of them seem to address. I keep encountering this error message: Uncaught TypeError: mongoose.model is not a function Even after removing node_modules and reinstalling ...

Navigate to the chosen item in material-ui scroll bar

Currently, I have a list created using material-ui which contains numerous items and displays a scrollbar due to its size. I am looking for a way to automatically scroll to the selected item within the list. Does anyone have any suggestions on how I can a ...

Comparing form submission with a button click to pass data using Ajax - success in one method but failure in the other

I am facing an issue with two pieces of jquery code in my Flask application. While one works perfectly, the other is not functioning as expected. Both the form and a button trigger the same function through ajax calls. Currently, for troubleshooting purpos ...

Following an AJAX request, jQuery.each() does not have access to the newly loaded CSS selectors

Note: While I value the opinions of others, I don't believe this issue is a duplicate based on the provided link. I have searched for a solution but have not found one that addresses my specific problem. Objective: Load HTML content to an element u ...

Show the output of a jQuery query in a label within an ASP.NET page

Is there a way to display the result of this JavaScript code in a label control on my ASP.NET page, instead of using an alert? <script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"& ...

Setting up a Vue 3 parent component to emit events to a child component: a step-by-step guide

Seeking assistance with setting up a Vue 3 Tailwind parent component button to trigger a HeadlessUI transition event in a child component. The objective is for the button in the parent to emit an event, which the child will then watch for before triggering ...