Loop round array, append input text boxes then set values of those text boxes

Question

I am trying to loop round and append a number of containers based on the values stored in an array, then set those values accordingly but I am currently duplicating those values and cant get the values to be different for each time it goes around the loop.

var arr_tele = ['02991812376', '02982919291'];

//Prevent Duplicates.
$(".teledivcontain").remove();

//Append Container for numbers
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>');

//Loop and append fields for each number
for (i in arr_tele) {
  $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>').find('input:text').val(arr_tele[i]);
}

.fieldpos {
  margin-left: 45px;
  width: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-body row fieldpos">
  <fieldset class="form-group">
    <label for="telenum">Your Telephone Numbers</label>
    <div class="row">
      <div id="telediv">
      </div>
    </div>
  </fieldset>
</div>

I am missing something minor but cant see what anyone any ideas?

Zakaria Acharki · Accepted Answer · 2016-08-09 10:58:41Z

2

You have to find the last input appended then assign the value, so just adding the :last selector will do the work :

.find('input:text:last').val(arr_tele[i])

Or you could just assign the value directly using <input value="'+arr_tele[i]+'" ....

Hope this helps.

var arr_tele = ['02991812376', '02982919291'];

//Prevent Duplicates.
$(".teledivcontain").remove();

//Append Container for numbers
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>');

//Loop and append fields for each number
for (i in arr_tele) {
  $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>').find('input:text:last').val(arr_tele[i]);
}

.fieldpos {
  margin-left: 45px;
  width: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-body row fieldpos">
  <fieldset class="form-group">
    <label for="telenum">Your Telephone Numbers</label>
    <div class="row">
      <div id="telediv">
      </div>
    </div>
  </fieldset>
</div>

edited Aug 9, 2016 at 10:58

answered Aug 9, 2016 at 10:44

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

2 Comments

Nick Bull Over a year ago

Think this is the equivalent of my answer... :p

Nick Bull Over a year ago

Apologies, did not see that! +1 for fixing the jQuery

Nick Bull · Accepted Answer · 2016-08-09 10:43:28Z

Just add as a property in the HTML you're appending instead. Note within the loop '<input type="text" ... value="' + arr_tele[i] + '"disabled>:

var arr_tele = ['02991812376', '02982919291'];

//Prevent Duplicates.
$(".teledivcontain").remove();

//Append Container for numbers
$("#telediv").append('<div class="form-group col-md-3" id="teledivcontain"> </div>');

//Loop and append fields for each number
for (i in arr_tele) {
  $("#teledivcontain").append('<input type="text" class="form-control telenumber" placeholder="No number currently" value="' + arr_tele[i] + '"disabled><div class="form-group col-md-3"><button type="submit" class="btn btn-primary form-control detach">Detach</button></div>');
}

.fieldpos {
  margin-left: 45px;
  width: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel-body row fieldpos">
  <fieldset class="form-group">
    <label for="telenum">Your Telephone Numbers</label>
    <div class="row">
      <div id="telediv">
      </div>
    </div>
  </fieldset>
</div>

Collectives™ on Stack Overflow

Loop round array, append input text boxes then set values of those text boxes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related