JavaScript 后多个输入同名

Question

I want to upload in the database using pure javascript in my following input fields.

 var i = 2; var id=1; function addkid() { var div = document.createElement('div'); console.log('my id cj '+id) div.innerHTML = 'Day' + id + ': <input type="text" name="child_' + id + '"/>' + '<input type="button" class="submit_but" id="rem_kid()_' + id + '" onclick="remkid(this)" value="-" />'; //div.innerHTML = 'Day' + id + ': <input type="text" name="child_' + id + '"/>' + ' <input type="button" id="add_kid()_' + id + '" onclick="addkid()" value="+" />' + ' <input type="button" id="rem_kid()_' + id + '" onclick="remkid(this)" value="-" />'; // event.stopPropagation(); document.getElementById('kids').appendChild(div); id++; } function remkid(div) { document.getElementById('kids').removeChild(div.parentNode); i--; } ///////////////////////////////////////// var i = 1; var idd = 1; function addmen() { var div = document.createElement('div'); console.log('my id cj '+idd); //var id = i; // alert(id); div.innerHTML = 'img' + idd + ': <input type="file" name="child_' + id + '"/>' + '<input type="button" class="submit_but" id="rem_kid()_' + id + '" onclick="remmen(this)" value="-" />'; //div.innerHTML = 'Day' + id + ': <input type="text" name="child_' + id + '"/>' + ' <input type="button" id="add_kid()_' + id + '" onclick="addkid()" value="+" />' + ' <input type="button" id="rem_kid()_' + id + '" onclick="remkid(this)" value="-" />'; document.getElementById('menand').appendChild(div); idd++; } function remmen(div) { document.getElementById('menand').removeChild(div.parentNode); i--; }

 Title: <input type="text" name="name"> <br/> <div id="kids"> Day/s: <:--<input type="text" name="child_1">--> <input type="button" class="submit_but" id="add_kid()_1" onclick="addkid()" value="Add tour day" /><br> </div> <div id="menand"> Img/s: <!--<input type="file" name="img">--> <input type="button" class="submit_but" id="add_kid()_1" onclick="addmen()" value="Add tour Image" /><br> </div> <div> <input type="button" value="Save" name="Save" class="submit_but" onclick="saveroute()"> </div>

I want to know how to upload this multiple same name input field into the database. I'm never doing this type of code in before. please help solve my problem

Answer 1

The id is an unique identifier. The means that your 'id=add_kid()_1' can't repeat for more than one. The class attribute can repeat. In this case, you'll use the class="submit_but" to catch the two input tags.

Then, the first step is extract the info. There's only two inputs to extract info from and they have the tag in common: "submit_but".

const infoElements = document.querySelector('.submit_but');

infoElemnts contains all nodes with class="submit_but".

Here your answer pt1 If you wanna store the info of inputs in an array:

 const infoValues = infoElements.map((element) => {
        return element.value;
    }

Now, infoValues has all inputs values. You can do all this process with yours childs inputs that will be created.

 div.innerHTML = '<input class="dayTour"></input>' 
 div.innerHTML = '<input class="whatever"></input>' 

 const dayTourElements = document.querySelector('.dayTour');
 
 const dayTourValues = dayTourElements.map((element) => {
        return element.value;
 }

Here your answer pt2

I don't how you wanna save this, but for simple approach you can simple write it to your local storage into a '.txt' file.

const fs = require('fs');

fs.appendFile('mynewfile1.txt', 'Hello content!', function (err) {
  if (err) throw err;
  console.log('Saved!');
});

Here tutorial: https://www.w3schools.com/nodejs/nodejs_filesystem.asp