Adding HTML form using JavaScript to get a total in text box

Question

So for the final piece of my code, I need to add all the form values together and show a running total in a textbox underneath the 'table'. Is there a way using JavaScript that this can be done? I have my drop down boxes with values in them.

This is a snippet of my code:

function eraseText() {
    var out = document.querySelectorAll(".out");
    for (var i=0;i<out.length;i++) {
      out[i].value="";
    }
}

var sections = {

  p1 : {sname: "Dynamic Table   ", mscore: 20},
  p2 : {sname: "IntelliJ Usage  ", mscore: 10},
  p3 : {sname: "Calender Control", mscore: 30},
  p4 : {sname: "Active Form     ", mscore: 20},
  p5 : {sname: "Object Database ", mscore: 20}
};

document.write("<pre>");
document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + (i>0?'<br><br><br><br>':'') 
     + o.sname + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' 
     + o.mscore + '&nbsp;&nbsp;&nbsp;' 
     + '<textarea class="out" id="output" rows="4" cols="25"></textarea>' 
     + '&nbsp;&nbsp;&nbsp;' 
     + '<select>'
     + '<option value="1">1</option>'
     + '<option value="2">2</option>'
     + '<option value="3">3</option>'
     + '</select>' }, '')
);
document.write("</pre>");

This is what you want to do - You have a dropdown with numbers and one by one user can select multiple numbers and then you would show the sum? — Gandalf the White
– Gandalf the White, Commented Feb 5, 2016 at 18:55
Are you really just trying to loop through the 'sections' object and combine all the 'mscore' values? You must not have pasted the full scripts b/c running your Javascript creates errors. — HaulinOats
– HaulinOats, Commented Feb 5, 2016 at 18:55
@GandalftheWhite So I've got my options, I just don't know how to go about creating a text box which would show a sum of them as users changed the values — DoN_Dan
– DoN_Dan, Commented Feb 5, 2016 at 18:56
@Brett84c That already works. What I want to do now is add all of the selects together and display it as a running total underneath in a text box. — DoN_Dan
– DoN_Dan, Commented Feb 5, 2016 at 18:58
@DoN_Dan so you're just trying to take whatever number they've chosen in the dropdown and then add it to the textarea to the left of it, or are you trying to take all the values chosen in the dropdowns and add them all into a new textbox? What's the point of those big textarea's next to the dropdowns? — HaulinOats
– HaulinOats, Commented Feb 5, 2016 at 18:59

Brent L · Accepted Answer · 2016-02-05 19:05:09Z

4

Something like this?

var selects = [].slice.call(document.querySelectorAll('select')); // [].slice.call turns NodeList into an array
var total = selects.reduce(function (previousValue, select) {
   previousValue += select.options[select.selectedIndex].value || 0;
}, 0);
// ... then query for textbox, set the value of it to 'total'

answered Feb 5, 2016 at 19:05

Brent L

8218 silver badges5 bronze badges

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

2 Comments

jmcgriz Over a year ago

This is a nice quick way to calculate the value, combining this with the onchange binding in my answer below should work out

HaulinOats Over a year ago

Nice, succinct solution, @jmcgriz. The way Don's HTML is built and displayed is not ideal with all the non-breaking spaces and relying on document.write. Makes the code hard to understand and read, but I guess if he is ONLY using Javascript for everything (no static HTML or CSS files) there's not much else he can do.

jmcgriz · Accepted Answer · 2016-02-05 19:06:24Z

1

You'd want to bind to the onchange event of each select, and recalculate the sum each time.

var output = document.getElementById('output'),
  selects = document.querySelectorAll('select');

//helper method
function doToAll(elems, fn) {
  var len = elems.length;
  while (--len > -1) {
    fn(elems[len]);
  }
}

//sum values
function sumSelects() {
  var sum = 0;
  doToAll(selects, function(t) {
    sum += parseInt(t.value);
  });
  return sum;
}

//bind to onchange event
doToAll(selects, function(t) {
  t.addEventListener('change', function() {
    output.textContent = sumSelects();
  });
});

//run once on load
window.addEventListener('load', function() {
  output.textContent = sumSelects();
});

<select>
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
</select>
<select>
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
</select>
<select>
  <option value=1>1</option>
  <option value=2>2</option>
  <option value=3>3</option>
</select>
<p>The current total is
  <span id="output"></span>
</p>

answered Feb 5, 2016 at 19:06

jmcgriz

3,3981 gold badge11 silver badges16 bronze badges

2 Comments

DoN_Dan Over a year ago

One issue I find with this, is due to my text boxes having the id and class as 'output' also, this will print in the first box I have, would you suggest changing the name?

jmcgriz Over a year ago

Sure, the IDs are only a placeholder, you can change them to whatever you like. The only thing is that you should only ever have one element with a particular ID. You can assign the same class to a bunch of elements, but IDs are meant to exist only once per page

Collectives™ on Stack Overflow

Adding HTML form using JavaScript to get a total in text box

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related