populate input fields from php / javascript

Question

How can I populate 50 html5 input fields from an external delimited "|" text file ("players.txt"):

Smith, Bob|Jones, James|Cavanaugh, Harvey|

I have input fields like so:

<input type="text" name = "N01" id = "I01">
<input type="text" name = "N02" id = "I02">

<script>
$jQuery.get('assets/players.txt', function(data) {
splitString = dataString.split("|");

$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);

});

</script>

change function (data) to function(dataString)

Heretic Monkey
– Heretic Monkey

2018-03-24 22:54:48 +00:00
Commented Mar 24, 2018 at 22:54 — Heretic Monkey
– Heretic Monkey, Commented Mar 24, 2018 at 22:54
and please don't space =

Andre Figueiredo
– Andre Figueiredo

2018-03-25 01:26:53 +00:00
Commented Mar 25, 2018 at 1:26 — Andre Figueiredo
– Andre Figueiredo, Commented Mar 25, 2018 at 1:26

null · Accepted Answer · 2018-03-24 22:52:30Z

1

Try getting html elements using jquery $ sign such as

$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);

answered Mar 24, 2018 at 22:52

null

1,1723 gold badges13 silver badges30 bronze badges

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

Comments

Anthony L · Accepted Answer · 2018-03-24 22:56:59Z

1

You're currently referencing the wrong data variable dataString, instead reference data. Also, if you know your IDs are sequential, you can avoid writing 50 different lines of JS and run a for loop, for instance:

for(i=0; i<splitString.length; i++){
  id = "#I0"+(i+1);
  $(id).val(splitString[i]);
}

answered Mar 24, 2018 at 22:56

Anthony L

2,15915 silver badges25 bronze badges

Comments

CertainPerformance · Accepted Answer · 2018-03-24 22:58:31Z

1

Don't set the value of each element individually, use a forEach loop.

Make sure to take into account string padding.

splitString.forEach((str, i) => {
  document.querySelector('#I' + String(i).padStart(2, '0'))
    .value = str;
});

answered Mar 24, 2018 at 22:58

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Comments

Renari · Accepted Answer · 2018-03-24 22:54:30Z

0

let dataString = "Smith, Bob|Jones, James|Cavanaugh, Harvey|";
let splitString = dataString.split("|");

for (let i = 0; i < splitString.length; i++) {
  $("#I0" + i).val(splitString[i]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="N01" id="I01">
<input type="text" name="N02" id="I02">

answered Mar 24, 2018 at 22:54

Renari

9017 gold badges17 silver badges33 bronze badges

2 Comments

Renari Over a year ago

You should factor in what others have suggested, this example only works with the small amount of data provided. Since it hard codes the leading 0. For values >10 look at what CertainPerformance suggested with padStart(2, '0')

verlager Over a year ago

Yes, but the smart money is on removing the leading zeros, which I will always do henceforth. Thank for the suggestion.

Seyed Morteza Hosseini · Accepted Answer · 2018-03-25 00:10:45Z

0

Example without ajax:

$(function(){
  var splitString = 'Smith, Bob|Jones, James|Cavanaugh, Harvey';
  splitString = splitString.split("|");
  $('#playersInputs').empty();
  $.each(splitString, function(i,v){
    $('<input type="text" />')
        .attr('name', 'N'+("0"+(i+1)).slice(-2))
        .attr('id', 'I'+("0"+(i+1)).slice(-2))
        .val(v)
        .appendTo('#playersInputs');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>

Example With ajax:

you must replace /path/to/your/text-file with the actual url

$(function(){
  $.get('/path/to/your/text-file', function(data) {
    var splitString = data.split("|");
    $('#playersInputs').empty();
    $.each(splitString, function(i,v){
      $('<input type="text" />')
          .attr('name', 'N'+("0"+(i+1)).slice(-2))
          .attr('id', 'I'+("0"+(i+1)).slice(-2))
          .val(v)
          .appendTo('#playersInputs');
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>

edited Mar 25, 2018 at 0:10

answered Mar 24, 2018 at 23:12

Seyed Morteza Hosseini

3921 gold badge6 silver badges18 bronze badges

4 Comments

verlager Over a year ago

This doesn't work with Run code snippet. But I do need an ajax version because the assets/players.txt is generated automatically

Seyed Morteza Hosseini Over a year ago

@verlager please give me the full url of your text file

verlager Over a year ago

Thanks but I fixed it with some php.

Seyed Morteza Hosseini Over a year ago

@verlager No problem :)

Collectives™ on Stack Overflow

populate input fields from php / javascript

5 Answers 5

Comments

Comments

Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related