0

I am generating IDs of three sets of input boxes dynamically (autoincrement). So one set has IDs such as "inputbox1, inputbox2 etc" and the other set has IDs such as "value1, value2 etc" and the third set has "result1, result2 etc"

My basic function in jquery is this:

$("#button").click(function() {
var inputbox1 = parseInt($('#inputbox1').val());
var value1 = parseInt($('#value1').val());

$("#result1").val(inputbox1 + value1);
});

I don't know how many inputboxes will be there since they are dynamically generated. So how can i apply this same basic function for all the textboxes? I know that multiple functions like this would be inefficient and it is probably not the right way to go about it.

$("#button").click(function() {
var inputbox1 = parseInt($('#inputbox1').val());
var value1 = parseInt($('#value1').val());
$("#result1").val(inputbox1 + value1);

var inputbox2 = parseInt($('#inputbox2').val());
var value2 = parseInt($('#value2').val());
$("#result2").val(inputbox2 + value2);
});
Improve this question
2
  • Can you add a common class to the generated elements? Commented Feb 2, 2016 at 14:21
  • @tymeJV I could do so, but I will still need the result textbox to show only the result of two particular textboxes. Commented Feb 2, 2016 at 14:23

3 Answers 3

Reset to default
2 
$("#button").click(function() {

  $('input[id="^inputbox"]').each( function(){
    var inputbox = parseInt($(this).val());
    var number = $(this).attr( "id" ).split ( "inputbox" )[ 1 ];
    var value =  parseInt($('#value' + number).val());
    $("#result" + number).val(inputbox + value);

  });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You can write a query for the ID attributes to match the prefix substring, so you get every element which has an ID attribute beginning with "inputbox" for example.

$("[id^='inputbox']").each(function() { 
  // extract the number with a simple split or substring, and do whatever you need 
});

Or be more specific if you need: 

$("input[id^='inputbox']").each(function() { 
  // extract the number with a simple split or substring, and do whatever you need
});

See the documentation

Improve this answer

Comments

0

Try using .each() :

$('input').each(function(e){
    //do your stuff
});

You may need to identify the specific inputs to be included with another class. Using an id won't work in this case.

Check out this page: http://api.jquery.com/each/

Improve this answer

Comments