I can't find anything regarding this simple problem.

I'm trying to create an order page and allow the user to update the total of their order using a button (without having to submit the form). I'm calling an external JS file to make the necessary calcs based on the input selections made by the user, but when I click a "Calculate Total" button the form appears to submit and clears everything.

I'm confused as to how to define the form. Do you "POST" or "GET"? I'll eventually tie this to a PHP script on the action field, but I just want to do client-side updates for the order total so the user can see an updated total before they submit it.

<script type = "text/javascript" src="js/special_order_calcs.js"></script>
<form  id="frmSpecialOrder" name="frmSpecialOrder" action="" method="">
  
   ... Here I do all my other fields definition, then ...
   
   ... Here is where the text box is created to store the calculated total ...
   Order Total $:&nbsp;</strong><input  type="textbox" id="ordertotal" name="ordertotal" readonly>&nbsp;USD

    ... Here's where I'm trying to update the order total within the JS file when the Calculate Total button is clicked ...

    ot_final = qty1   qty2   qty3   qty4   ot_shipping_handling;
    document.getElementById('ordertotal').value = ot_final;
    // Set successful status
    return true();

   ... Here are the button definitions ...
<!-- Create buttons -->
<button type="input"  onclick="calculate_total()" >Calculate Total</button>&nbsp;&nbsp;<button type="submit" >Submit</button>&nbsp;&nbsp;<button type="reset" >Reset</button></p>

I verified the calculation works via Alerts, so my goals is when I click Calculate Total, I'm expecting the updated calculation to show up in the 'ordertotal' textbox on the form so the user can see a new value if they change quantities, etc. without submitting the form. I know a zillion product websites use this and I'm just trying to do something simple. Thanks.

CodePudding user response：

If I have not misunderstood, what you want to do is to calculate the total amount of an order, well, to do that on the client-side you don´t need a form because you don´t have to submit any data. Just get the input values, calculate the total price of the order and change the textarea value with .innerHTML

CodePudding user response：

Instead of using <button type="input"> in the Form, try using <button type="button". Otherwise you will realize that by clicking on the button, it always refreshes your site, therefor deleting your previously input data.

For more info about how button behaves in a form, look at this thread. The attribute type of the html-tag button has only three values: submit/reset/button.

If an invalid type is used, in your case type="input" it behaves like type="submit", therefore submitting the form and refreshing the page

A tip from me: Use Console.log for error checking

So console.log(ot_final);, and afterwards:
return document.getElementById('ordertotal').value = ot_final;

Console.log() helps you find mistakes in your code way easier than using alert(). In this case alert fired of so you saw, that the result of the calculation was correct, but you didnt realize, that your site refreshed, after alert() was executed. Something that could have been prevented using console.log.