Loop through dynamically created forms using PHP [duplicate]

Question

I'm trying to insert data from multiple forms with PHP. The problem is, when I insert it using the subimit button on the first form, it only inserts the data from the first form, when I use the button on the second form onwards it does not register any and presents the error "Undefined array key "cod-1 "". I've tried several ways with the help of GPT chat and it's not working.

<form action="patCadastro.php" id="form-1" class="formCadastro" method="POST">
  <input type="hidden" name="formCount" value="1">
  <div class="rowForm">
   <div class="colForm">
    <label for="cod">CÓDIGO</label><br>
     <input id="cod-1" type="text" name="cod-1" required>
   </div>
   <div class="colForm">
    <label for="item">ITEM</label><br>
    <input type="text" name="item-1" id="item-1" required>
   </div>
   <div class="colForm">
    <label for="marca">MARCA</label><br>
    <input type="text" name="marca-1" id="marca-1">
   </div>
   <div class="colForm">
    <label for="modelo">MODELO</label><br>
    <input type="text" name="modelo-1" id="modelo-1">
   </div>
   <div class="colForm">
    <label for="condicao">CONDIÇÃO</label><br>
     <select id="condicao-1" name="condicao-1">
      <option value="" title="" selected="selected"></option>
      <option value="ÓTIMO" title="ÓTIMO">ÓTIMO</option>
      <option value="BOM" title="BOM">BOM</option>
      <option value="REGULAR" title="REGULAR">REGULAR</option>
      <option value="RUIM" title="RUIM">RUIM</option>
      <option value="INSERVÍVEL" title="INSERVÍVEL">INSERVÍVEL</option>
     </select>
    </div>
  </div>
  <div class="btnForm">
   <span class="spanBtn"><i class="fas fa-paper-plane"></i><input class="button cadastro" name="submitForm" type="submit" value="CADASTRAR"></span>
   <span class="spanBtn"><i class="fas fa-plus"></i><input class="button moreItem" type="button" value="+ITEM" onclick="moreForm()"></span>
  </div>
 </form>
 <div id="newForm"></div>

<script>
let formCount = 1;
function moreForm() {
    formCount++;
    const newForm = document.getElementById('newForm');
    const morePats = document.createElement('FORM');
    morePats.method='POST';
    morePats.action="patCadastro.php";
    morePats.classList.add('formCadastro');
    morePats.id = `form-${formCount}`;

    morePats.innerHTML = 
    
    <input type="hidden" name="formCount" value="${formCount}">
    <div class="rowForm">
        <div class="colForm">
            <label for="cod">CÓDIGO</label><br>
            <input id="cod-${formCount}" type="text" name="cod-${formCount}" required>
        </div>
        <div class="colForm">
            <label for="item">ITEM</label><br>
            <input type="text" name="item-${formCount}" id="item-${formCount}" required>
        </div>
        <div class="colForm">
            <label for="marca">MARCA</label><br>
            <input type="text" name="marca-${formCount}" id="marca-${formCount}">
        </div>
        <div class="colForm">
            <label for="modelo">MODELO</label><br>
            <input type="text" name="modelo-${formCount}" id="modelo-${formCount}">
        </div>
        <div class="colForm">
            <label for="condicao">CONDIÇÃO</label><br>
            <select id="condicao-${formCount}" name="condicao-${formCount}">
                <option value="" title="" selected="selected"></option>
                <option value="ÓTIMO" title="ÓTIMO">ÓTIMO</option>
                <option value="BOM" title="BOM">BOM</option>
                <option value="REGULAR" title="REGULAR">REGULAR</option>
                <option value="RUIM" title="RUIM">RUIM</option>
                <option value="INSERVÍVEL" title="INSERVÍVEL">INSERVÍVEL</option>
            </select>
        </div>
    </div> ;
    newForm.appendChild(morePats);
</script>

<?php
if (isset($_POST['submitForm'])) {

        for ($i = 1; $i <= $_POST['formCount']; $i++) {

            $cod = $_POST['cod-' . $i];
            $item = $_POST['item-' . $i];
            $marca = $_POST['marca-' . $i];
            $modelo = $_POST['modelo-' . $i];
            $condicao = $_POST['condicao-' . $i];
            $timeStamp = time();

            $stmt = $mysqli->prepare("INSERT INTO patrimonio (id, item, marca, modelo, condicao, lastCheck) VALUES (?, ?, ?, ?, ?, ?)");
            $stmt->bind_param("ssssss", $cod, $item, $marca, $modelo, $condicao, $timeStamp);
            $stmt->execute();
            $stmt->close();
        }
        header("Location: patCadastro.php");
        exit();
    }

    $mysqli->close();
?>

did you debug? echo <pre>; print_r($_POST); echo </pre>; before the for loop. Also do you have typo in the question or the running code as well, shouldn't the data in morePats.innerHTML be enclosed in backticks? — Adi
– Adi, Commented Nov 21, 2023 at 19:01
the typo is only in the question, i new in this and had some problems in make this question. — LukasTopo
– LukasTopo, Commented Nov 21, 2023 at 19:08
The result of debug Array ( [formCount] => 2 [cod-2] => 04 [item-2] => ITEM 4 [marca-2] => MARCA 4 [modelo-2] => MODELO 4 [condicao-2] => BOM [local-2] => LOCAL 4 [ue-2] => UE 4 [valor-2] => 123,12 [aquisicao-2] => 2023-01-01 [cor-2] => COR 4 [submitForm] => CADASTRAR ) Warning: Undefined array key "cod-1", "item-1", "marca-1", "modelo-1", "condicao-1" on line 25 to 29 Fatal error: Uncaught mysqli_sql_exception: Column 'id' cannot be null in .../patCadastro.php:72 ... The code identify the form-2 but not the 1. — LukasTopo
– LukasTopo, Commented Nov 21, 2023 at 19:23
So if you have already submitted the first form and then submitting the second form, would the variable cod-1 exist if your loop starts from 1? Multiple ways to handle it, either add a hidden value as to which form it is and write php code as per that, otherwise make your loop check if the variable exists or not otherwise move to next. — Adi
– Adi, Commented Nov 21, 2023 at 19:30
Instead of using names like cod-1 and cod-2, use array-style names: name="cod[]". Then $_POST['cod'] will be an array of all the cod inputs. — Barmar
– Barmar, Commented Nov 21, 2023 at 20:02

Ali SSN · Accepted Answer · 2023-11-21 20:12:49Z

you can add the attribute form to new inputs; this attribute attaches your input to the form.

For example, change your JavaScript like this:

<script>
let formCount = 1;
function moreForm() {
    formCount++;
    const newForm = document.getElementById('newForm');
    const morePats = document.createElement('FORM');
    morePats.method = 'POST';
    morePats.action = "patCadastro.php";
    morePats.classList.add('formCadastro');
    morePats.id = `form-${formCount}`;

    morePats.innerHTML = `
        <input type="hidden" name="formCount" value="${formCount}">
        <div class="rowForm">
            <div class="colForm">
                <label for="cod">CÓDIGO</label><br>
                <input id="cod-${formCount}" type="text" form="${morePats.id}" name="cod-${formCount}" required>
            </div>
            <div class="colForm">
                <label for="item">ITEM</label><br>
                <input type="text" name="item-${formCount}" form="${morePats.id}" id="item-${formCount}" required>
            </div>
            <div class="colForm">
                <label for="marca">MARCA</label><br>
                <input type="text" name="marca-${formCount}" form="${morePats.id}" id="marca-${formCount}">
            </div>
            <div class="colForm">
                <label for="modelo">MODELO</label><br>
                <input type="text" name="modelo-${formCount}" form="${morePats.id}" id="modelo-${formCount}">
            </div>
            <div class="colForm">
                <label for="condicao">CONDIÇÃO</label><br>
                <select id="condicao-${formCount}" name="condicao-${formCount}" form="${morePats.id}">
                    <option value="" title="" selected="selected"></option>
                    <option value="ÓTIMO" title="ÓTIMO">ÓTIMO</option>
                    <option value="BOM" title="BOM">BOM</option>
                    <option value="REGULAR" title="REGULAR">REGULAR</option>
                    <option value="RUIM" title="RUIM">RUIM</option>
                    <option value="INSERVÍVEL" title="INSERVÍVEL">INSERVÍVEL</option>
                </select>
            </div>
        </div>`;
    newForm.appendChild(morePats);
}
</script>

Collectives™ on Stack Overflow

Loop through dynamically created forms using PHP [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related