Add form fields with jQuery to be sent in php

Question

Add form fields with jQuery to be sent in php

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I'm using the following code to add a new group of fields to a form that will be emailed to 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><divclass="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 works, but this way all new fields will be inserted with the same name="" and I think it will give some kind of error when submitting the form.

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

php html jquery

asked by anonymous 28.07.2016 / 15:32

2 answers

1

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

<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 have helped.

See more here: link

28.07.2016 / 15:52

Is it possible to permanently change the style of a CSS class using Javascript? Is there any problem in inserting a controller from another in angularjs?

score 3 · Accepted Answer

As suggested above, to get this form easily, you simply put the 'name' attributes as an array.

Following its logic of enumerating blocks, a simple example follows.

NOTE: Do not duplicate the ID of an element.

$(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><divclass="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>