CODEWITHSUNDEEP
javascripthtml
Reza M
Reza M

Reputation: 63

looping to generate unique id javascript

I want to get unique id in my javascript so, i make a looping and put it after the name of id. Here is my HTML code:

$(document).ready(function() {
  $('input[type="checkbox"]').on('click', function() {
    if ($(this).is(":checked")) {
      var a;
      for (a = 1; a < 300; a++)
        // if checked   add value
        $("#abc" + a).val($('#xyz' + a).attr('value'));
    } else {
      // if unchecked remove value
      $("#abc" + a).val("");
    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="check1" id="check1" />
<input type="text" id="xyz1" name="xyz1" value="3" />
<input type="text" id="abc1" name="abc1" />

<input type="checkbox" name="check2" id="check2" />
<input type="text" id="xyz2" name="xyz2" value="5" />
<input type="text" id="abc2" name="abc2" />

And here is my javascript code:

I add "a" after id name in order to generate the same id with text. But it still didn't working well.. Anyone can help me? I really Appreciates for any helping :-)

Upvotes: 3

Views: 2078

Answers (3)

Rajesh
Rajesh

Reputation: 24915

Per my understanding, following code is causing issue

if ($(this).is(":checked")) {
  var a;
  for (a = 1; a < 300; a++)
    // if checked   add value
    $("#abc" + a).val($('#xyz' + a).attr('value'));
} else {
  // if unchecked remove value
  $("#abc" + a).val("");

If you notice, if $(this).is(":checked") is unchecked, a is undefined and hence it is not setting value. Also, condition to set should be inside loop and not outside it

$(document).ready(function() {
  $('input[type="checkbox"]').on('click', function() {
    for (a = 1; a < 300; a++) {
      if ($(this).is(":checked")) {
        var a;
        // if checked   add value
        $("#abc" + a).val($('#xyz' + a).attr('value'));
      } else {
        // if unchecked remove value
        $("#abc" + a).val("");
      };
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="check1" id="check1" />
<input type="text" id="xyz1" name="xyz1" value="3" />
<input type="text" id="abc1" name="abc1" />

<input type="checkbox" name="check2" id="check2" />
<input type="text" id="xyz2" name="xyz2" value="5" />
<input type="text" id="abc2" name="abc2" />

You can event try something like this:

instead of a loop for 300 iterations, you can search using id and assign value. You can fetch elements with similar id or name using $([attribute^=value])

$(document).ready(function() {
  $('input[type="checkbox"]').on('click', function() {
    var val = $(this).is(":checked") ? $(this).parent().find("[id^=xyz]").val() : "";
    $(this).parent().find("[id^=abc]").val(val);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <input type="checkbox" name="check1" id="check1" />
  <input type="text" id="xyz1" name="xyz1" value="3" />
  <input type="text" id="abc1" name="abc1" />
</div>

<div>
  <input type="checkbox" name="check2" id="check2" />
  <input type="text" id="xyz2" name="xyz2" value="5" />
  <input type="text" id="abc2" name="abc2" />
</div>

Upvotes: 1

dvenkatsagar
dvenkatsagar

Reputation: 936

I think this should do the trick:

$(document).ready(function () {
  $('input[type="checkbox"]').on('click', function() {
    for(var a = 1; a < 300; a++){
      if($(this).is(":checked")){
        // if checked   add value
        $("#abc"+a).val($('#xyz'+a).attr('value'));
      }else{
        // if unchecked remove value
        $("#abc"+a).val("");
      }    
    }
  });
});

Update :

Considering the updated code in the question, if you have a common pattern like a checkbox and 2 fields repeating like given in the question, I suggest you to use a class instead of generating unique ID each time.

<input class="chk" type="checkbox" name="check1" id="check1" />
<input class="xyzs" type="text" id="xyz1" name="xyz1" value="3"/>
<input class="abcs" type="text" id="abc1" name="abc1" />

<input class="chk" type="checkbox" name="check2" id="check2" />
<input class="xyzs" type="text" id="xyz2" name="xyz2" value="5"/>
<input class="abcs" type="text" id="abc2" name="abc2" />

Now the jquery would be something like this:

$("input[type='checkbox']").on('click',function(){
  $(".chk").each(function(i,ch){
    var abc = $(".abcs");
    var xyz = $(".xyzs");
    if($(this).is(":checked")){
      $(abc[i]).val($(xyz[i]).val());
    }else{
      $(abc[i]).val(" ");
    }
  });
});

Hope it helps

Upvotes: 1

zer00ne
zer00ne

Reputation: 43870

Your code is correct, sir :-)

http://codepen.io/zer00ne/pen/dGKvBL/

You need to add this to the head:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Upvotes: 2

Related Questions