0 to new input box

Question

I recently have a result in a modal from calculatesum JavaScript displayed as <span id="sample">0</span> (the value will increase based on the number key in by users)

How do I display this final sample value in another input box outside of the modal? Help?

JavaScript as below:

$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function() {

        $(this).keyup(function(){
            calculateSum();
        });
    });

});

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(0));
}

HTML or rangeslide code as below:

<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">
                </td><td>&nbsp;&nbsp;(RM)</td></tr></table>
                <br/>
                <input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
                <span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>

Basically, I need to replace placeholder="250,000" for the first input box and value="250000" with the final value from <span id="sample">0</span>.

Answer 1

Not sure if I understand this right but I think you want something along these lines?

I assume you want

• the first field readonly

• the second field as the slider

• on submit calculates the total, in which you can post the results in another div.. In your case a modal.

---

Place the result where ever you like

<p id="result"> </p>

<input id="value1" type="text" value="250000" readonly="readonly"/>
<span> + </span>
<input id="value2" type="text" id="textInput" value="15000">
                <span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>
<input type="submit" onclick="output();">
<p id="result"> </p>
<input type="range" type="range" value="250000" min="15000" max="500000" step="10000" onchange="updateTextInput(this.value);">



<script type="text/javascript" language="javascript" charset="utf-8">

function output(){
    var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}

function updateTextInput(val) {
          document.getElementById('value2').value=val; 
        }

</script>

Answer 2

//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {

  $(this).keyup(function() {
    calculateSum();

  });
});


function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }

  });

  //.toFixed() method will roundoff the final sum to 2 decimal places
  //$("#sum").html(sum.toFixed(0));
  $("#homeContentInput").val(sum.toFixed(0));
  $("#homeContentRange").val(sum.toFixed(0));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
*****************************************************************
<br>if you just want to add up the values then this will work, else you need to be more clear with your question.
<br>form2-1:
<input class="txt" type="text" id="form2-1" value="0">
<br>form2-2:
<input class="txt" type="text" id="form2-2" value="0">
<br>form2-3:
<input class="txt" type="text" id="form2-3" value="0">

<br>Not sure what you want to do bellow this... *****************************************************************
<br>

<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">(RM)
<br>

<input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
<br>
<span class="slider-label-min">RM 15,000</span>  <span class="slider-label-max ">RM 500,000</span>
<br>*****************************************************************