Issue
I have a HTML file with Input tags. The csv file has two rows, row one equals the "id" of the input tag and row two is the value.
How can I loop through row 1 to get the input id and populate it with the value from row 2?
There will just be the two rows.
var fileSelector = document.getElementById('f_csv');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
label {
display: block;
font: 1rem 'Fira Sans', sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
<h1>Open CSV and fill input boxes</h1>
<div>
<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="f_csv">
<script>
var fileSelector = document.getElementById('f_csv');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
</script>
<label for="f_name">First Name:</label>
<input type="text" id="f_name" name="f_name" value="" />
<label for="l_name">Last Name:</label>
<input type="text" id="l_name" name="l_name" value="" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="" />
</div>
f_name,l_name,age
Francis,AppleSeed,22
Solution
Here is an adapted version of your code, this should work in the way you requested.
var fileSelector = document.getElementById('f_csv');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
console.log(fileList);
});
label {
display: block;
font: 1rem 'Fira Sans', sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
<h1>Open CSV and fill input boxes</h1>
<div>
<input type="file" id="f_csv">
<script>
var fileSelector = document.getElementById('f_csv');
fileSelector.addEventListener('change', (event) => {
const fileList = event.target.files;
const reader = new FileReader();
reader.onload = function(event) {
const content = event.target.result;
const rows = content.split('\n');
const ids = rows[0].split(','); // Split first row to get IDs
const values = rows[1].split(','); // Split second row to get values
for (let i = 0; i < ids.length; i++) {
const element = document.getElementById(ids[i].trim());
if (element) {
element.value = values[i].trim();
}
}
};
reader.readAsText(fileList[0]);
});
</script>
<label for="f_name">First Name:</label>
<input type="text" id="f_name" name="f_name" value="" />
<label for="l_name">Last Name:</label>
<input type="text" id="l_name" name="l_name" value="" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="" />
</div>
Answered By - Julius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.