Function that generates Multiple Inputs sends only #1. How to resolve?

Asked

Viewed 55 times

1

The function creates inputs for data inclusion
By clicking add, the fields are generated correctly

The problem is that it always sends the number 1:
a) If you just open and click Send;
b) and even typing texts.
what sends:
campo1 = 1
campo2 = 1
field 3 = 1 ...

How to send the entered data in the open fields?

thanks in advance

var qtdeCampos = 0;
function addCampos() {
var objPai = document.getElementById("campoPai");
var objFilho = document.createElement("div");
objFilho.setAttribute("id","filho"+qtdeCampos);
objPai.appendChild(objFilho);
document.getElementById("filho"+qtdeCampos).innerHTML = "<input type='text' id='campo"+qtdeCampos+"' name='campo"+qtdeCampos+"' value=''>";
qtdeCampos++;
}
<!doctype html><html lang="pt-br">
<head><meta charset="UTF-8">
</head><body>
<form name="gru" method="post" action="grava.php">
<div id="campoPai"></div>
<input type="button" value="adicionar" onclick="addCampos()">
<hr><input type="submit" value="Enviar">
</form>
</body></html>

javascript

  • Why do you use me id does not use class? Still avoids having to create one id for each field. It doesn’t make much sense to create several ids sequential if with a class you solve much more easily.

  • Can you put an example? thank you

  • Yes, I can put an example. But, as you are getting the fields in PHP?

  • only receives the 1 of qq field. (if send in blank or typed). The function Is not sending the typed text.

  • in grava.php receives: if(isset($_POST) AND Empty($_POST['campo0'])||Empty($_POST['campo1']): echo'campo 0 = '.isset($_POST['campo0']); echo'campo 1 = '.isset($_POST['campo1']); endif;

1 answer

2


As I said in the comments, there is no need to create several ids for each element. You can use a class for everyone, because this makes it even easier later, if you want, identify the elements by the index.

Another thing, it becomes more complicated to receive dynamically created fields with different names. It is much easier to send them as an array, and in PHP to do a foreach to take the values of each index.

What you need to do is create the fields with the same name in the form of an array, adding the brackets to the name:

nome="campo[]"

Your code would look like this:

function addCampos() {
   var objPai = document.getElementById("campoPai");
   var objFilho = document.createElement("div");
   objFilho.setAttribute("class","filho");
   objPai.appendChild(objFilho);
   document.querySelector("#campoPai .filho:last-child").innerHTML = "<input type='text' class='campo' name='campo[]' value=''>";
}
<form name="gru" method="post" action="teste.php">
   <div id="campoPai"></div>
   <input type="button" value="adicionar" onclick="addCampos()">
   <hr>
   <input type="submit" value="Enviar">
</form>

The selector "#campoPai .filho:last-child" will select the last div with class .filho maid.

In PHP you get the array campo with:

$campos = $_POST['campo'];

Then you can iterate the array by taking the values of each field.

Edit

Add a field limiter for a maximum of 10:

function addCampos() {
   
   // conta o número de campos
   var qtdeCampos = document.querySelectorAll("#campoPai .filho").length;

   if(qtdeCampos < 10){   
      var objPai = document.getElementById("campoPai");
      var objFilho = document.createElement("div");
      objFilho.setAttribute("class","filho");
      objPai.appendChild(objFilho);
      document.querySelector("#campoPai .filho:last-child").innerHTML = "<input type='text' class='campo' name='campo[]' value=''>";
   }
}

  • Thanks. I’m testing. how to include a limiter (up to 10 fields, for example)

  • Ah yes. I’ll change it then. Just a moment.

  • See the EDIT response. I hope it helps. :)

  • Got it. Congratulations on your help

  • 1

    Nice guy! Good luck!

  • Doubt: when writes.php consists and has some error, I save the url in Session[url+N]. N is a number equal to qtdeCampos. But I couldn’t enter it in your function in the value field. It only accepts Session[url5], e.g. Do you think you should open a new question? Thank you

  • The variable qtdeCampos is Javascript. There’s no way you can use it in PHP. What you can do is create a Hidden field and send this value for it and take it in PHP.

  • In php is ok. It’s in java = Document.querySelector("#fieldPai .filho:last-Child"). innerHTML = "<input type='text' class='field' name='field[]' value='<?= $_SESSION['url"+(qtdeCampos)+"']? >'>"; See where numbered Session enters. So the user does not lose the typing if an error occurs in the following processing.

  • But this is wrong, There is no way to put a JS variable inside a PHP code.

  • Isn’t there a way? Create a js VAR that mounts Session[ulr+qtdeCampo] OR some js resource that mounts a Session? Because when I put Session[url5] it works OK. But it repeats in all lines of function js.

  • Let’s go continue this discussion in chat.

  • Sam, you can watch the chat?

Show 7 more comments

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.