php - Get values from dynamic inputs generated by javascript -

i writing generator improving knowledge of php programming , handling weak , know ask how can make this. generate input data in javascript , want dynamically capture value in php. not know how many of them, because generated after clicking button in, hence problem.

at same moment succeeded in js using name: name_0, name_1 , on.

is feasible? below not

var tytul = document.getelementbyid("k-title");  var opis = document.getelementbyid("k-description");  var popup = document.getelementbyid("info_box");  var overlay = document.getelementbyid("overlay");  var podsumowanie = document.getelementbyid("summary");    $("#add").on("click", function () {  var id = $(".wiersz").length;  $('#tabela').append('<tr class="wiersz"><td class="komorka-lewa"> <input class="cecha" name="cecha_'+ id + '" type="text" placeholder="cecha produktu"> </td><td class="komorka-prawa"><input class="cecha-opis" name="cecha-opis_'+ id + '" type="text" placeholder="opis cechy produktu"></td></tr>');  document.getelementbyid("default-table").style = "display: none";  });    $("#add_square").on("click", function() {  var szerokosc = prompt("podaj szerokość obrazka");  var wysokosc = prompt("podaj wysokość obrazka");  var sciezka = prompt("podaj link zdjęcia");  $("#other-photos").append('<div class="other-img" style="width: '+szerokosc+'px;"><img class="img-present" style="height: '+ wysokosc +'px;" src="'+sciezka+'" /></div>');    if (szerokosc < 1050) {  $(".other-img").css("float", "left");  }  });    $("#add_photo").on("click", function () {  var sciezka = prompt("podaj link zdjęcia");  var opis = prompt("podaj opis zdjęcia dla wyszukiwarek");  $("#gallery").append('<div class="photo-container"><button class="del">usuń zdjęcie</button><img src="' + sciezka + '" class="photo" alt="' + opis + '"/></div>');    if ($(".photo").length > 0) {  document.getelementbyid("default-gallery").style = "display: none";  }  $(".del").on("click", function () {  $(this).parent().css("display", "none");  document.getelementbyid("default-gallery").style = "display: block";  });  });    $("#gen").on("click", function () {    if (opis.value.length < 1 || tytul.value.length < 1) {  popup.style = "display: block";  overlay.style = "display: block";  document.getelementbyid("infobox-content").innerhtml = "uzupełnij wszystkie potrzebne dane, zanim wygenerujesz kartę produktu.";  } else {  popup.style = "display: block";  overlay.style = "display: block";  document.getelementbyid("infobox-content").innerhtml = "karta została wygenerowana, plik z kodem znajduje się w katalogu generate.";  podsumowanie.innerhtml = "tytuł: " + tytul.value + "<br>" + "opis produktu: " + opis.value + "<br>" + "cecha produktu: " + cecha +  "<br>" + "opis cechy produktu: " + cechaopis;  }  });    $("#close").on("click", function() {	  popup.style = "display: none";  overlay.style = "display: none";  });    $("#add_section").on("click", function() {  var szerokosc = prompt("określ szerokość sekcji");  var wysokosc = prompt("określ wysokosć sekcji");  var tlo = prompt("określ kolor tła sekcji (paleta rgb - np. ffffff)");  var kolor = prompt("określ kolor tekstu w sekcji (paleta rgb - np. ffffff)");  $("#new_section").append('<div class="sekcja" style="width: '+ szerokosc +'px; height: '+ wysokosc +'px; background: #'+ tlo +'; color: #'+ kolor +';"><button type="button" class="check_btn">checklista</button><button type="button" class="txt_btn">sekcja tekstowa</button></div>');    if ($(".sekcja").length > 0) {  $("#default-section").css("display","none");	  }    if(szerokosc < 1050) {  $(".sekcja").css("float","left");	  }    });

body {  margin: 0;  font-family: 'open sans',sans-serif;  font-size: 15px;  }    .wiersz {  background-color: #eee;   margin: 0;  }    .komorka-lewa {  padding: 3px 10px;   text-align: right;   border-right: 1px solid #dbdbdb;  }    .komorka-prawa {  padding: 3px 10px;   text-align: left;  }    #tabela {  font-size: 14px;   border: none;   border-top: 1px solid #dbdbdb;   border-bottom: 1px solid #dbdbdb;   width: 100%;  }    .cecha, .cecha-opis {  border: 0;  margin: 0;  background: 0;  }    #gen {  display: block;  width: 100%;  margin-top: 10px;  }    #add, #gen, #add_photo, #add_section {  border: 0;  padding: 10px;  background: #222;  color: #fff;   border-radius: 3px;  font-family: 'open sans',sans-serif;  font-size: 15px;  }    #add:hover, #gen:hover, #add_photo:hover, #add_section:hover, .check_btn:hover, .txt_btn:hover {  background: green;  cursor: pointer;  transition-duration: 1s;  }    #add_section {  margin-top: 25px;  margin-bottom: 25px;  }    #container {  max-width: 1050px;   margin-left: auto;   margin-right: auto;  }    #overlay {  width: 100%;  height: 100%;  background: rgba(0,0,0,0.6);  z-index: 2;  position: absolute;  }    #info_box {  background: #fff;  position: absolute;  z-index: 3;  width: 500px;  top: 50%;  transform: translatey(-50%);  padding: 10px;  padding-top: 0;  left: 50%;  margin-left: -250px;  }    #info_box p:first-child {  font-size: 20px;  border-bottom: 1px solid #eaeaea;  padding-bottom: 10px;  }    #info_box, #overlay {  display: none;  }    #info_box > p span {  cursor: pointer;  color: red;  }    .photo {  display: block;  width: 100%;  }    .photo:first-child {  margin-top: 25px;  }    .photo:last-child {  margin-bottom: 25px;  }    #default-gallery, #default-section {  font-size: 14px;  border-bottom: 1px solid #dbdbdb;  padding: 5px;  }    .photo-container {  position: relative;  overflow: hidden;  margin-bottom: 25px;  }    .photo-container:first-child {  margin-top: 25px;  }    .photo-container:last-child {  margin-bottom: 25px;  }    .del {  position: absolute;  bottom: 50px;  right: 25px;  background: transparent;  border: 3px solid #fff;  padding: 10px;  font-family: 'open sans',sans-serif;  font-size: 15px;  color: #fff;  border-radius: 3px;  }    .del:hover {  background: #fff;  cursor: pointer;  transition-duration: 0.5s;  color: #222;  }    #add_square {  width: 150px;  height: 150px;  background: #eaeaea;  margin-bottom: 25px;  padding: 20px;  border: 1px solid #c0c0c0;  }    #add_square:hover {  background: #222;  cursor: pointer;  transition-duration: 0.5s;	  color: #fff;  }    .img-present {  max-width: 100%;  }    .other-img:last-child {  margin-bottom: 25px;  }    .sekcja {  position: relative;	  }    .check_btn, .txt_btn {  position: absolute;  top: 50%;  transform: translatey(-50%);  padding-top: 10px;  padding-bottom: 10px;  border: 0;  background: #000;  font-size: 15px;  font-family: 'open sans',sans-serif;  color: #fff;  }  	  .check_btn {  left: 0;  border-top-right-radius: 3px;  border-bottom-right-radius: 3px;  }    .txt_btn {  right: 0;  b

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="info_box">  <p>informacja <span id="close" style="float: right;">x</span></p>    <p id="infobox-content"></p>  </div>    <div id="overlay"></div>    <div id="container">    <form method="post" action="">    <div style="padding-top: 50px; padding-bottom: 50px;">  <input type="text" value="" id="k-title" name="k-title" placeholder="tytuł karty" style="display: block; width: 100%; font-size: 30px; border: 0; background: 0; margin-bottom: 25px; text-align: center;">  <input type="text" value="" id="k-description" name="k-desc" placeholder="krótki opis" style="display: block; width: 100%; border: 0; background: 0; text-align: justify; padding: 10px;">  </div>    <div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">specyfikacja techniczna</div>    <table id="tabela" border="0" cellspacing="0" cellpadding="5px">  <tbody>    <tr>  <td colspan="2" id="default-table">brak dodanej specyfikacji</td>  <tr>  </tbody>  </table>    <button style="margin-top: 25px; margin-bottom: 25px;" id="add" type="button">dodaj wiersz</button>      <div id="other-photos">  <div id="add_square" style="position: relative;">  <p style="text-align: center; position: absolute; width: 150px; top: 40px; font-size: 60px; margin: 0;">+</p>  <p style="text-align: center; position: absolute; width: 150px; bottom: 40px; margin: 0;">dodaj obrazek prezentacji</p>  </div>  </div>    <div style="clear: both;"></div>    <div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">dodaj nową sekcję</div>    <div id="new_section">  <div id="default-section">brak dodanych sekcji</div>  </div>    <div style="clear: both;"></div>    <button type="button" id="add_section">dodaj sekcję</button>    <div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">galeria zdjęć</div>  <div id="default-gallery">brak dodanych zdjęć</div>    <div id="gallery">  </div>    <button style="margin-top: 25px; margin-bottom: 25px;" id="add_photo" type="button">dodaj zdjęcia</button>    <input id="gen" type="submit" value="generuj kartę" />    </div>    <div id="summary">  </div>    </form>

simplest solution:

name generated inputfields like:

<input ... name="field[]"> // see []-brackets <input ... name="field[]"> <input ... name="field[]"> 

the brackets cause, there sent array named "field" when submitting form. of course can give them key field[0], field[1] or ever.

after submitted form can handle other php-array.

for example:

foreach($_post['field'] $fieldno => $fieldvar){  echo 'field '.$fieldno.': '.$fieldvar.'<br>'; } 

tip: using same keys same section quite helpful processing trough data:

<input name="givenname[0]"><input name="lastname[0]"><input name="age[0]"> <input name="givenname[1]"><input name="lastname[1]"><input name="age[1]"> <input name="givenname[2]"><input name="lastname[2]"><input name="age[2]"> 

you can catch these data after submitting way:

foreach($_post['givenname'] $id => $givenname){  echo 'person #'.$id.': '.$_post['lastname'][$id].', '.$givenname.', '.$_post['age'][$id].'<br>'; }