CODEWITHSUNDEEP
javascriptjqueryhtml
Odino
Odino

Reputation: 141

change the value of a label with using a form but without refresh the page

I would like to create a form that based on the input values, calculation results and enter it in a div / label / bit somewhere in the web page html.

an working similar to that of the currency converters online (insert the number for the first currency and you can see the result without the page refresh, with use of the submit button or not)

this is a little piece of my code (I can not understand the concept/mechanism to do what I want as described above)

<form id="form" class="green" method="post">
<label class="title">
    <span class="titolo-riga required">Number1</span>
    <input id="firstId" class="small" type="number" name="number1" required="required" value="0" />
</label>
<label class="title">
    <span class="titolo-riga required">Number2</span>
    <input id="secondID" class="small" type="number" name="number2" required="required" value="0" />
</label>
<div class="submit"><input type="submit" onclick="return submitForm();" value="Submit"/></div>
</form>
<div><label id="printHere" class="result"></label></div>

this a basic script inside the html:

function submitForm(){
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());

result = a+ b;

Upvotes: 2

Views: 2161

Answers (5)

cezar
cezar

Reputation: 12012

As an alternative solution I'd like to post a simplistic answer created with AngularJS. Here is the Plunker: http://plnkr.co/edit/46Xf23jUhrmaT2x31S0K?p=preview

The code would be:

<div class="col-md-2 col-md-offset-5 form-group">
  <input class="form-control" type="number" ng-model="firstValue" />
  <p class="text-center">+</p>
  <input class="form-control" type="number" ng-model="secondValue" />
</div>
<div class="panel panel-primary col-md-2 col-md-offset-5 text-center">
    {{ firstValue + secondValue }}
</div>

The classes are from Bootstrap, just for making it little bit nicer.

Upvotes: 0

A Macdonald
A Macdonald

Reputation: 824

Try this html and jquery combination:

<form id="form" class="green">
  <div class="element-number column1">
    <label for="avanti-testa" class="title">
        <span class="titolo-riga required">Number1</span>
        <input id="firstId" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
    </label>
  </div>
  <div class="element-number column1">
    <label for="avanti-testa" class="title">
        <span class="titolo-riga required">Number2</span>
        <input id="secondID" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
    </label>
  </div> 
  <div id="answer"></div>
  <button id="submitForm" type="button">Submit</button>
</form>

<script>
    // assuming jQuery is loaded
  (function($) {
    $('#submitForm').on('click', function (e) {
        e.preventDefault();
        var answer = parseInt($('#firstId').val(), 10) + parseInt($('#secondId').val(), 10);
        $('#answer').text(answer);
    });
  })(jQuery);
</script>

Upvotes: 0

ChrisBurns
ChrisBurns

Reputation: 319

Good Day Sir,

I would suggest you could bind this input value a few different ways to update it on the page, without requiring a refresh. The jQuery library is probably the easiest to implement over straight javascript. Are you familiar with the following functions? Keyup/Blur?

I created this fiddle for you. Hopefully it helps. https://jsfiddle.net/wkdjwzfv/

<script>
$(function(){
//val for firstid
$("#firstId").keyup(function() {
//val of firstId
var total = parseInt($(this).val()) + parseInt($("#secondID").val());
console.log(total);
$("#total").empty().append(total);
});

//for keyup for second
$("#secondID").keyup(function() {
var total = parseInt($(this).val()) + parseInt($("#firstId").val());
console.log(total);
$("#total").empty().append(total);
});

})
</script>

Upvotes: 0

pailodze
pailodze

Reputation: 71

If I understood it correctly, you are trying to retrieve to input values, do some mathematical operations with them, and return it to the page without refreshing it, if it's so:

  1. make a change event listener on both of inputs, in that case:

    $("#firstId").change(function() { $("#thirdId").val(calculate()); }); $("#secondID").change(function() { $("#thirdId").val(calculate()); });

  2. make a calculation function:

    function calculate() { var a = parseInt($("#firstId").val()); var b = parseInt($("#secondID").val());

    return a+ b; }

Upvotes: 0

Ajay Makwana
Ajay Makwana

Reputation: 2372

try this simple script with html:

<html>
  <body>
    <p>Click the button to calculate x.</p>
    <button onclick="myFunction()">Add it</button>
    <br/>Enter first number:
    <input type="text" id="txt1" name="text1">
    <br/>Enter second number:
    <input type="text" id="txt2" name="text2">
    <p id="demo"></p>
    <script>
      function myFunction() {
        var y = document.getElementById("txt1").value;
        var z = document.getElementById("txt2").value;
        var x = +y + +z;
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

Upvotes: 3

Related Questions