CODEWITHSUNDEEP
jqueryhtml
Jon Dan
Jon Dan

Reputation: 95

How do I do this calculation is jQuery and get the answer displayed in HTML?

I want to build a simple calculation app. User inputs cost price and sales price and after clicking on submit I want the profit to be displayed. I want to do this in jQuery not just in standard javascript.

How do I do this calculation is jQuery and get the answer displayed in HTML.

HTML CODE

<form>
  Cost Price:<br>
  <input type="text" id="costPrice" name="firstname"><br>
  Sales Price:<br>
  <input type="text" id="salesPrice" name="lastname">
  <input type="submit" value="Submit">
</form>

<p>The profit is:</p>
<div class="profitOut"></div>

jQuery - Not sure how to do this part

$(document).ready(function () {

  $("submit").click(function(){
    $(("#salesPrice").val() - ("#costPrice").val())
  });

});

Upvotes: 1

Views: 58

Answers (4)

Zorken17
Zorken17

Reputation: 1896

So, I have made som changers to your code and now it should be working. First, I changed type to button on your submit button, and den some changes to the jquery as well.

Don't forget to include jquery to your projcet. Please see the code below:

$(document).ready(function() {
  $("#submit").click(function(e) {
    var result = $('#salesPrice').val() - $('#costPrice').val();
    $("#profitOut").text(result);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  Cost Price:
  <br>
  <input type="text" id="costPrice" name="costPrice">
  <br> Sales Price:
  <br>
  <input type="text" id="salesPrice" name="salesPrice">
  <input id="submit" type="button" value="Submit">
</form>
<p>The profit is:</p>
<div id="profitOut"></div>

Upvotes: 1

Imesha Sudasingha
Imesha Sudasingha

Reputation: 3570

You just have to update the html inside the div(with printOut class) with the answer you get after substracting the two amounts.

$(document).ready(function () {
      $("#form").submit(function(e){
          e.preventDefault();
          var x = $("#salesPrice").val() - $("#costPrice").val();
          $("#profitOut").html(x);
      });
});

HTML

<form id="form">
  Cost Price:<br>
  <input type="text" id="costPrice" name="costPrice"><br>
  Sales Price:<br>
  <input type="text" id="salesPrice" name="salesPrice">
  <input id="submit" type="submit" value="Submit">
</form>
<p>The profit is:</p>
<div id="profitOut"></div>

Upvotes: 2

Don Vincent
Don Vincent

Reputation: 476

Firs you should change

<input type="submit" value="Submit">

to

<input id="submit" type="submit" value="Submit">

You need an ID for your input. Try this, you didn't set output to div

 $(document).ready(function () {
      $("#submit").click(function(e){
          e.preventDefault();
          $('.profitOut').html(parseInt($("#salesPrice").val()) - parseInt("#costPrice").val()));
      });
});

Upvotes: 0

flohdieter
flohdieter

Reputation: 130

You have to give your paragraph an id and then $("#IdOfParagraph").append(result); where result is the result of you calculation stored in a variable as sample

Upvotes: 0

Related Questions