从php / javascript填充输入字段

Question

如何从外部定界“ |”填充50个html5输入字段 文本文件（“ players.txt”）：

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

我有这样的输入字段：

<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>

Answer 1

尝试使用jQuery $符号获取html元素，例如

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

Answer 2

您当前引用的数据变量dataString错误，而是引用data 。 另外，如果您知道ID是顺序的，则可以避免编写50行不同的JS行并运行for循环，例如：

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

Answer 3

不要单独设置每个元素的值，请使用forEach循环。

确保考虑到字符串填充。

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

Answer 4

 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"> 

Answer 5

没有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> 

使用ajax的示例：

您必须使用actual url替换/path/to/your/text-file

 $(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>