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

Question

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;

Possible duplicate of [Prevent form redirect OR refresh on submit?](http://stackoverflow.com/questions/1263852/prevent-form-redirect-or-refresh-on-submit) — Alexander Mikhalchenko, Jan 13 '16 at 14:18
There are plenty of errors in your code: you have a label for `avanti-testa`, but nowhere an element with that id. Also you should use the label only once. In your JavaScript you are trying to access IDs that are not present in the HTML document. I'd rather take AngularJS for this task. Do you have any constraint to use jQuery? — cezar, Jan 13 '16 at 14:19
@AlexanderM. No, the OP's problem goes beyond that. He needs more help. — cezar, Jan 13 '16 at 14:20
Please post the right code. Wrong code leads to wrong assumptions and thus to proposed solutions that will be also wrong. — cezar, Jan 13 '16 at 14:23
@Odino u can use the onchange function in the input tag.. let me know if u need the complete code.. — Satyam S, Jan 13 '16 at 14:25
@Odino There is still the issue with labels and you're missing a closing form tag. — cezar, Jan 13 '16 at 14:27

score 3 · Answer 1 · answered Jan 13 '16 at 14:21

3

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>

answered Jan 13 '16 at 14:21

Ajay Makwana

2,330
1
17
32

You could enhance the form if you use the HTML5 input types. Instead of `type="text"` you could use `type="number"`. As a consequence you could simplify the line `var x = y + z`. – cezar Jan 13 '16 at 14:26
This is a good way to get around this, but it must be implemented controls on entering data into the form. – Odino Jan 13 '16 at 14:42
thanks for your suggestion but this is just demo of a function. – Ajay Makwana Jan 15 '16 at 05:45

score 0 · Answer 2 · answered Jan 13 '16 at 14:25

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:

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

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

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

return a+ b; }

score 0 · Answer 3 · answered Jan 13 '16 at 14:33

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>

score 0 · Answer 4 · answered Jan 13 '16 at 14:33

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>

score 0 · Answer 5 · answered Jan 13 '16 at 14:48

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.

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

5 Answers5