Add form fields with jQuery to be sent in php

Question

I am using the following code to add a new set of fields to a form that will be emailed in php

$(document).ready(function() {
		    $("a[id='addProd']").click(function() {
		        var domElement = $('<div class="block product" id="novoProduto"><p><label for="tituloProd1">Título do Produto: </label><input type="text" name="tituloBanner1" placeholder="Título do Banner: "><label for="descricaoProd1">Descrição do Produto: </label><textarea name="descricaoProd1" placeholder="Descrição do Banner: "></textarea><label for="fotoProd1">Foto do Produto</label><input type="file" class="typeFile" name="fotoProd1"></p></div>');
		        $(this).before(domElement);
		    });
		});

form label {
	font-size: 1.4em;
	margin: 20px 0 10px;
	display: block;
}
form input {
	width: 97%;
	height: 35px;
	padding-left: 2%;
	background: #FFF;
	border: 1px solid #ccc;
	border-radius: 10px;
	font-family: "Open Sans", sans-serif;
}
form .typeFile {
	width: 97%;
	height: 35px;
	padding-left: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: "Open Sans", sans-serif;
}
form textarea {
	width: 97%;
	height: 100px;
	padding: 2% 0 0 2%;
	background: #FFF;
	border: 1px solid #ccc;
	border-radius: 10px;
	font-family: "Open Sans", sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form>
<div class="block product">
							<p><label for="tituloProd1">Título do Produto/Serviço: </label>
							<input type="text" name="tituloBanner1" placeholder="Título do Banner: ">

							<label for="descricaoProd1">Descrição do Produto/Serviço: </label>
							<textarea name="descricaoProd1" placeholder="Descrição do Banner: "></textarea>

							<label for="fotoProd1">Foto do Produto/Serviço</label>
							<input type="file" class="typeFile" name="fotoProd1"></p>
						</div>
						<a href="#novoProduto" id="addProd"><i class="fa fa-plus"></i>Adicionar Produto</a></button>
</form>

It is working, but this way all new fields will be inserted with the same name="" and I believe that will give some kind of error when sending the form.

I think with some for in jQuery I can solve this, I tried this but it didn’t work. Can anyone help me with a solution? Thanks!

Answer 1

As suggested above, to receive this form easily, just put the 'name' attributes as array.

Following your logic of enumerating the blocks, follows a simple example.

NOTE: Do not duplicate an element ID.

$(document).ready(function() {
  $("a[id='addProd']").click(function() {
    var index = $('.block.product').length + 1;
    var domElement = $('<div class="block product"><p><label for="tituloProd' + index + '">Título do Produto: </label><input type="text" name="tituloBanner' + index + '" placeholder="Título do Banner: "><label for="descricaoProd' + index + '">Descrição do Produto: </label><textarea name="descricaoProd' + index + '" placeholder="Descrição do Banner: "></textarea><label for="fotoProd' + index + '">Foto do Produto</label><input type="file" class="typeFile" name="fotoProd' + index + '"></p></div>');
    $(this).before(domElement);
  });
});

form label {
  font-size: 1.4em;
  margin: 20px 0 10px;
  display: block;
}
form input {
  width: 97%;
  height: 35px;
  padding-left: 2%;
  background: #FFF;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: "Open Sans", sans-serif;
}
form .typeFile {
  width: 97%;
  height: 35px;
  padding-left: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: "Open Sans", sans-serif;
}
form textarea {
  width: 97%;
  height: 100px;
  padding: 2% 0 0 2%;
  background: #FFF;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-family: "Open Sans", sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<form>
  <div class="block product">
    <p>
      <label for="tituloProd1">Título do Produto/Serviço:</label>
      <input type="text" name="tituloBanner1" placeholder="Título do Banner: ">

      <label for="descricaoProd1">Descrição do Produto/Serviço:</label>
      <textarea name="descricaoProd1" placeholder="Descrição do Banner: "></textarea>

      <label for="fotoProd1">Foto do Produto/Serviço</label>
      <input type="file" class="typeFile" name="fotoProd1">
    </p>
  </div>
  <a href="#novoProduto" id="addProd"><i class="fa fa-plus"></i>Adicionar Produto</a>
  </button>
</form>

Answer 2

In this case you will have to transform your inputs into an array.
Just add [] after the name thus:

<input name="MyArray[]" />
<input name="MyArray[]" />
<input name="MyArray[]" />
<input name="MyArray[]" />

With this you will be able to store more than one value.
I hope I’ve helped.

See more here: http://php.net/manual/en/faq.html.php#Faq.html.arrays