javascript - How to get input from multiple text boxes -


i'm starting play around javascript , jquery , have hit roadblock. want users able add & subtract boxes , fill input. here's html

<body>  <h1>math grades</h1> <div id="mathgrades">   <input style="height:50px; width:50px; font-size:16pt; text-align: center" type='number' id="foobar">   <input style="height:50px; width:50px; font-size:16pt; text-align: center" type='number' id="foobar"> </div>  <button type="button" id="addbox">+</button> <button type="button" id="subtractbox">-</button>  <br> <button type="button" id="getgrades">submit grades</button>  <script src="calcjq.js"></script>

here's code:

$(document).ready(function() {  var addmathbox = document.getelementbyid("addbox"); addmathbox.addeventlistener('click', addbox, false);  var subtractmathbox = document.getelementbyid("subtractbox"); subtractmathbox.addeventlistener('click', subtractbox, false);  var getscores = document.getelementbyid("getgrades"); getscores.addeventlistener('click', getusergrades, false);  function getusergrades(){     var usergrades = document.getelementbyid("foobar").value;     console.log(usergrades); }  function subtractbox(){     $('#foobar').remove() }  function addbox(){     $('#mathgrades').append('<input style="height:50px; width:50px; font-size:16pt; text-align: center" type="number" id="foobar">') };   });

how can make sure gather of input without knowing how many boxes they'll add , fill?

edit

finally found way this:

var mathgrades = $("input[class='mathgrades']")             .map(function(){return parseint($(this).val(), 10);}).get();

first of all, , know wanted point out way, id attribute should unique each element. make sure it's not foobar of them.

what solve problem add unique class, i.e. mathgrades, each input , use following code collect of data , please it.

var mathgrades = document.getelementsbyclassname('mathgrades'); var m, v; for(m in mathgrades) {     v = $(mathgrades[m]).val(); // takes value , converts string i.e. "1"     $(mathgrades[m]).val(v+1); // assigns new value "1" + "1" = "11" }

in javascript change function addbox to:

function addbox() {     $('#mathgrades').append('<input style="height:50px; width:50px; font-size:16pt; text-align: center" type="number" class="mathgrades">') };

Comments

Post a Comment