The Prototype of a Variable: Its Intrinsic Value

Question

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>

javascript twitter-bootstrap-3 prototype

Answer 1

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

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 3

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
}

Answer 4

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
}

The Prototype of a Variable: Its Intrinsic Value

Answer №1

Answer №2

Similar questions

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

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

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

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

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

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

"Encountering issues with getStaticPaths not generating any paths

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

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

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

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

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?

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

Trigger a fire event upon entering a page containing an anchor

Issue: mongoose.model is not a valid function

Navigate to the chosen item in material-ui scroll bar

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

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

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

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