jQuery - set input array values from array

Question

form output image

The form have 3 variables: useredu_id[] hidden type, useredu_qual[] select type, useredu_detail[] text box.

I try to set values to using JavaScript array which generated using jQuery ajax and the code is given below. But values are not stored

var xx = 0;
var fieldHTML = ''
+ '<div class="form-row field_group">' 
+ $(".field_group_copy").html() 
+ '</div>';
$.each(data.result_qual, function(key, val1) {
    var detail = data.result_detail[key];
    $('input[name="useredu_id[]"]').eq(xx).val(key);
    $('input[name="useredu_qual[]"]').eq(xx).val(val1);
    $('input[name="useredu_detail[]"]').eq(xx).val(detail);
    $('body').find('.field_group:last').after(fieldHTML);
    ++xx;
});

Can you setup this on jsfiddle so that we can debug and fix the issue.? — Manish Kumar
– Manish Kumar, Commented Mar 29, 2018 at 4:32
Your fields are inside of "$(".field_group_copy").html()" this part? — Hanif
– Hanif, Commented Mar 29, 2018 at 4:55
the mysql record is 23, some school, 10th 24, Diploma, some diploma — user5274088
– user5274088, Commented Mar 29, 2018 at 5:11

Aneesh R S · Accepted Answer · 2018-03-29 07:23:04Z

1

processData function will handle the response. I have added a test JSON . You can call the function from your ajaz success method. If it is in the given format. Else you need some small changes according to the response

$(function(){
  // let data be your json response from ajax call
  var data = [
    {id:1, qual:"BTECH", detail:"Engineering"},
    {id:2, qual:"MTECH", detail:"Master Engineering"},
    {id:3, qual:"BSC", detail:"Science"},
  ];  
  processData(data);
});

function processData(data){  
  $.each(data, function(index, value) {
    var fieldHTML = ''
      + '<div class="form-row field_group">' 
      + $(".field_group_copy").html() 
      + '</div>';  
    $('body').find('.data-container').append(fieldHTML);
    $('input[name="useredu_id[]"]').eq(index+1).val(value.id);
    $('select[name="useredu_qual[]"]').eq(index+1).val(value.qual);
    $('textarea[name="useredu_detail[]"]').eq(index+1).val(value.detail);    
  });
}

.hide{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row field_group_copy hide">  
  <input name="useredu_id[]" type="hidden">
  <select name="useredu_qual[]">
    <option value="">Select Qualification</option>
    <option value="BTECH">B.Tech</option>
    <option value="MTECH">M.Tech</option>
    <option value="BSC">B.S.C</option>
    <option value="MSC">M.S.C</option>
  </select>
  <textarea name="useredu_detail[]"></textarea>
</div>

<div class="data-container">  
</div>

edited Mar 29, 2018 at 7:23

answered Mar 29, 2018 at 4:44

Aneesh R S

3,8174 gold badges25 silver badges35 bronze badges

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

1 Comment

user5274088 Over a year ago

sorry anish. i accepted the answer. but i dot know what happened. Thank you very much for your help

Collectives™ on Stack Overflow

jQuery - set input array values from array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related