Add two numbers in a form without button using JavaScript (in cshtml MVC)

Question

I am building in .net-mvc and I will like to substract two numbers in a textbox and display in another textbox all in the View (cshtml). I have tried all ways but can't figure out why it will not work.

var a = parseInt(document.getElementById("sale").value);
var b = parseInt(document.getElementById("cost").value);
var c;

a.onkeyup = function() {
  var c;
  if (isNaN(a.value) == false) {
    c = (parseInt(a.value) || 0) - (parseInt(b.value) || 0);
    document.getElementById("profit").value = c;
  }

}
b.onkeyup = function() {

  if (isNaN(b.value) == false) {
    c = (parseInt(a.value) || 0) - (parseInt(b.value) || 0);
    document.getElementById("profit").value = c;

  }
}

<div class="form-style-5">
  <form method="get" action="InsertBattCalcDetails">
    <fieldset>
      <legend><span class="number">1</span> Insert Battery Calculations</legend>

      Date: <input type="date" name="Date" /> <br /> Battery Value: <input type="number" name="Batt_value" /> <br /> Battery Sales: <input type="text" name="Batt_sales" id="sale" /> <br /> Battery Cost: <input type="text" name="Batt_cost" id="cost" />      <br /> Battery Profit: <input type="text" name="Batt_profit" id="profit" /> <br /> Battery Bought: <input type="number" name="Batt_bought" /> <br />

    </fieldset>

    <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
  </form>
</div>

What is a supposed to be? You initialise it as parseInt(document.getElementById("sale").value); which means it will be a number but then use use it as if it's an element by calling a.onkeyup and a.value. Same with b — VLAZ
– VLAZ, Commented May 12, 2019 at 21:41

Christos · Accepted Answer · 2019-05-12 22:00:03Z

1

Both a and b should hold references to elements with ids sale and cost respectively. As you have defined them, they are just number values, on which it does not make any sense on registering events, like onkeyup.

By changing a to saleInput and b to costInput would make your code more readable:

var saleElement = document.getElementById("sale");
var costElement = document.getElementById("cost");

saleElement.onkeyup = calculateProfit;
 
costElement.onkeyup = calculateProfit;

function calculateProfit() {
  let sale = parseInt(saleElement.value, 10);
  let cost = parseInt(costElement.value, 10);
  
  if(isNaN(sale) || isNaN(cost)) {
      // either sale or cost are not numbers. profit cannot be calculated.
      return;
  }
  
  let profitElement = document.getElementById("profit");
  profitElement.value = sale - cost;
}

<div class="form-style-5">
<form method="get" action="InsertBattCalcDetails">
    <fieldset>
        <legend><span class="number">1</span> Insert Battery Calculations</legend>

        Date: <input type="date" name="Date" /> <br />
        Battery Value: <input type="number" name="Batt_value"  /> <br />
        Battery Sales: <input type="text" name="Batt_sales" id="sale" /> <br />
        Battery Cost: <input type="text" name="Batt_cost" id="cost" /> <br />
        Battery Profit: <input type="text" name="Batt_profit" id="profit" /> <br />
        Battery Bought: <input type="number" name="Batt_bought" /> <br />

    </fieldset>
    <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</form>
</div>

edited May 12, 2019 at 22:00

answered May 12, 2019 at 21:42

Christos

54.1k9 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

NAHEEM OLANIYAN Over a year ago

Sorry, I forgot to mention that am developing in asp.net-mvc. The View format is cshtml (I updated the question). I added <script><script/> to the JavaScript code and it still doesn't work. Please any other recommendation? Thanks

NAHEEM OLANIYAN Over a year ago

Got it work. I added AutoPostBack="true" runat="server" to the html code. Thank you for your help

Christos Over a year ago

@NAHEEMOLANIYAN You are welcome. I am glad that I helped. However, I missed something in your explanation. AutoPostBack is a property of ASP.NET controls that are used in ASP.NET WebForms, not in ASP.NET MVC. You have mentioned that you are developing in ASP.NET MVC. So I can't get it how you used this. Let alone the fact that in your HTML code I don't see any ASP.NET control.

Dijalma Silva · Accepted Answer · 2019-05-12 22:04:57Z

1

Try

<div class="form-style-5">
        <form method="get" action="InsertBattCalcDetails">
            <fieldset>
                <legend><span class="number">1</span> Insert Battery Calculations</legend>

                Date: <input type="date" name="Date" /> <br />
                Battery Value: <input type="number" name="Batt_value" /> <br />
                Battery Sales: <input type="number" name="Batt_sales" id="sale" onkeyup="substract()"/> <br />
                Battery Cost: <input type="number" name="Batt_cost" id="cost" onkeyup="substract()"/> <br />
                Battery Profit: <input type="text" name="Batt_profit" id="profit" /> <br />
                Battery Bought: <input type="number" name="Batt_bought" /> <br />

            </fieldset>

            <script>
                function substract() {
                    var sale = document.getElementById("sale").value;
                    var cost = document.getElementById("cost").value;

                    if (sale && cost) {
                        document.getElementById("profit").value = sale - cost;
                    }

                }  
            </script>

            <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
        </form>
    </div>

answered May 12, 2019 at 22:04

Dijalma Silva

2,1181 gold badge9 silver badges7 bronze badges

1 Comment

NAHEEM OLANIYAN Over a year ago

Working now, but just added AutoPostBack="true" runat="server" to the html code. Thank you for your help

Collectives™ on Stack Overflow

Add two numbers in a form without button using JavaScript (in cshtml MVC)

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related