Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Copy Paste multiple rows from CSV to input fields in an HTML Form without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a 2 5 b 3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data"> <table style="display : inline;width : 100%;"></table> <table id="" class="system_form_tables_parent"> <tbody> <tr> <th></th> <td> <table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;"> <tbody> <tr> <td style=" " id="container_validation_options[0]"> <table> <tbody> <tr id="tr_validation_options[0]" style=""> <th class="th_class1"><span class=""> validation_options </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td style=" " id="container_validation_display[0]"> <table> <tbody> <tr id="tr_validation_display[0]" style=""> <th class="th_class1"><span class=""> validation_display </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td style=" " id="container_blocked_modules[0]"> <table> <tbody> <tr id="tr_blocked_modules[0]" style=""> <th class="th_class1"><span class=""> blocked_modules </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> </tr> <tr> <td style=" " id="container_validation_options[0]"> <table> <tbody> <tr id="tr_validation_options[1]" style=""> <th class="th_class1"><span class=""> validation_options </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td style=" " id="container_validation_display[0]"> <table> <tbody> <tr id="tr_validation_display[1]" style=""> <th class="th_class1"><span class=""> validation_display </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td style=" " id="container_blocked_modules[0]"> <table> <tbody> <tr id="tr_blocked_modules[1]" style=""> <th class="th_class1"><span class=""> blocked_modules </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> </tr> <tr style=""> <td style="text-align : left;padding-left:0.5em"> <table id="submit_table"> <tbody> <tr> <td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back"> <input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset"> <input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </form>
Answer
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your “main” container <td>s. After that the whole thing fell into place fairly easily:
- to prevent the actual TSV text from being pasted directly into the first input field I used
e.preventDefault() - I then used
.split()twice on the TSV string to turn it into the 2D arrayvals - I identified the
.closest()td.contTD element (–>td) and its column and row numbers (colandrow) by finding the.index()oftdand its parent row. - starting form the
.closest('tbody')I then worked my way down again through the.slice()of rows starting withrowand its (sliced) child input elements starting at columncol. - in an
.each()loop I then assigned the value of thevals-array to the input element, but only ifval[i][j]exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/r?n */).map(r=>r.split(/t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data"> <label>sample data for copying and pasting via clipboard:</label> <table> <tr><td>1</td><td>4</td><td>a</td></tr> <tr><td>2</td><td>5</td><td>b</td></tr> <tr><td>3</td><td>6</td><td>c</td></tr> </table> <table id="" class="system_form_tables_parent"> <tbody> <tr> <th></th> <td> <table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;"> <tbody> <tr> <td class="contTD"><table> <tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr> <tr><td class="td_class"><input type="text" value="00A"> </td></tr> <tr><th></th></tr> <tr><th></th></tr> <tr><td class="val_error"></td></tr></tbody> </table></td> <td class="contTD" id="container_validation_options[0]"> <table> <tbody> <tr id="tr_validation_options[0]"> <th class="th_class1"><span class=""> validation_options </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td class="contTD" id="container_validation_display[0]"> <table> <tbody> <tr id="tr_validation_display[0]"> <th class="th_class1"><span class=""> validation_display </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td class="contTD" id="container_blocked_modules[0]"> <table> <tbody> <tr id="tr_blocked_modules[0]"> <th class="th_class1"><span class=""> blocked_modules </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> </tr> <tr> <td class="contTD"><table> <tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr> <tr><td class="td_class"><input type="text" value="00A"> </td></tr> <tr><th></th></tr> <tr><th></th></tr> <tr><td class="val_error"></td></tr></tbody> </table></td> <td class="contTD" id="container_validation_options[1]"> <table> <tbody> <tr id="tr_validation_options[1]"> <th class="th_class1"><span class=""> validation_options </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td class="contTD" id="container_validation_display[1]"> <table> <tbody> <tr id="tr_validation_display[1]"> <th class="th_class1"><span class=""> validation_display </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> <td class="contTD" id="container_blocked_modules[1]"> <table> <tbody> <tr id="tr_blocked_modules[1]"> <th class="th_class1"><span class=""> blocked_modules </span></th> </tr> <tr> <td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td> </tr> <tr> <th></th> </tr> <tr> <th></th> </tr> <tr> <td class="val_error"></td> </tr> </tbody> </table> </td> </tr> <tr> <td style="text-align : left;padding-left:0.5em"> <table id="submit_table"> <tbody> <tr> <td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back"> <input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset"> <input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </form>
We are here to answer your question about Copy Paste multiple rows from CSV to input fields in an HTML Form - If you find the proper solution, please don't forgot to share this with your team members.