jQuery table and storing values issue

Question

So I'm working on a JS project for school where I have a form in which the user enters the amount of forces in a problem, once entered a loop will created new fields per force. I have that part down, but I am having an issue with storing the text input from each of these new fields. I am using the .on function where the user has to click a button and then based on the id of the button clicked a number for the force array is created. The input is then suppose to be read into the array, but its just not working and its driving me nuts. Any ideas? Thanks in advance.

function forceRecording(numofforces){
    for(var i =0; i<numofforces; i++){
        $('#button1').after("<tr><td>Force DFO " + i +":</td><td><form><input type='text' name='lengthMeasure_'/></form></td><td><div class='button' id='lengthButton_"+i+"'>Add!</div></td></tr>")
        $('#button2').after("<tr><td>Force " + i +":</td><td><form><input type='text' name='forceMeasure_'/></form></td><td><div class='button' id='forceButton_"+i+"'>Add!</div></td></tr>")
    }
};  

$("button[id^='forceButton']").on("click",function(){
    var num = parseInt($(this).attr("id").split("_")[1]);
    forces[num] = $('input[id=forceMeasure_'+num+']').val();
    $('#button1').after('<td>'+forces[num]+'</td>');
});

As you can see I'm adding another column in my table temporarily just to check if the force is actually point into the array but when I run this, nothing new pops up.

May I suggest putting you code in jsfiddle. When other coders can toy with it(in full), you'll get a solution quick. — Grallen
– Grallen, Commented Jul 10, 2013 at 8:24

Harry · Accepted Answer · 2013-10-21 08:49:13Z

I am pretty sure you would have solved this issue by now. But I just happened to come across this post and thought that an answer could help future readers.

There were three issues in your code which prevented it from working and they are as follows:

$("button[id^='forceButton']") is used instead of $(".button[id^='forceButton']"). Note the . before button. Without the . jQuery would look for a button tag with id like forceButton whereas the tag in question was a div with class as button.
$('input[id=forceMeasure_'+num+']').val(); is used to get the text box value but your input field doesn't have any id. It only has a name, so instead use $('input[name=forceMeasure_' + num + ']').val();.
The input field is set as <input type='text' name='forceMeasure_'/>. Note that the count part after the forceMeasure_ is missing. It should have been <input type='text' name='forceMeasure_" + i + "'/>.

Making all the three changes as mentioned above, the code works fine.

Click here for a sample demo of the working code.

Collectives™ on Stack Overflow

jQuery table and storing values issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related