Dynamic Fields are going away after form submission

Question

I have a form using HTML and JS. All works fine, but the new dynamic fields boxes, which are added by javascript are going away after form submission. Here is a real quick demonstration: https://www.loom.com/share/aaa4a7cf15c54d83b80b8efa9685a0ca

Here is my HTML:

<form method="post" action="">
          <label for="headers">Product (optional):</label><br>
          <div id="key-value-fields">
              <label for="key1">Name: </label>
              <input type="text" id="key1" name="key1" value="<?php if (isset($_POST['key1'])) { echo $_POST['key1']; } ?>">
              <label for="value1">Quantity: </label>
              <input type="text" id="value1" name="value1" value="<?php if (isset($_POST['value1'])) { echo $_POST['value1']; } ?>">
          </div>
          <button type="button" id="add-another" onclick="addKeyValueField()">Add another</button>
          <input type="submit" value="Send Order">
       </form>

Here is my JS:

<script>
          var fieldIndex = 2;
          function addKeyValueField() {
              var keyValueFields = document.getElementById('key-value-fields');
              var newFields = document.createElement('div');
              newFields.innerHTML = '<label for="key' + fieldIndex + '">Name: </label> <input type="text" id="key' + fieldIndex + '" name="key' + fieldIndex + '"> <label for="value' + fieldIndex + '">Quantity: </label> <input type="text" id="value' + fieldIndex + '" name="value' + fieldIndex + '"> <button type="button" onclick="deleteKeyValueField(this)">Delete</button>';
              keyValueFields.appendChild(newFields);
              fieldIndex++;
          }
          function deleteKeyValueField(button) {
              var keyValueField = button.parentElement;
              keyValueField.remove();
          }
       </script>

Answer 1

On submit, the page completely reloads.
But if you'd like to see what was posted on that page reload, it has to be processed by PHP. You can use a while loop to check the existance of a $_POST['key'.$n] , where $n is an incrementing number, to output the additional HTML inputs.

<form method="post" action="">
    <label for="headers">Product (optional):</label><br>
    <div id="key-value-fields">
        <label for="key1">Name: </label>
        <input type="text" id="key1" name="key1" value="<?php if (isset($_POST['key1'])) { echo $_POST['key1']; } ?>">
        <label for="value1">Quantity: </label>
        <input type="text" id="value1" name="value1" value="<?php if (isset($_POST['value1'])) { echo $_POST['value1']; } ?>">
        
        <?php
        $n = 2;
        while(isset($_POST['key'.$n])){
          ?>

          <div>
            <label for="<?php echo 'key'.$n; ?>">Name: </label>
            <input type="text" id="<?php echo 'key'.$n; ?>" name="<?php echo 'key'.$n; ?>" value="<?php echo $_POST['key'.$n]; ?>">
            <label for="<?php echo 'value'.$n; ?>">Quantity: </label>
            <input type="text" id="<?php echo 'value'.$n; ?>" name="<?php echo 'value'.$n; ?>" value="<?php echo $_POST['value'.$n]; ?>">
            <button type="button" onclick="deleteKeyValueField(this)">Delete</button>
          </div>
          
          <?php
          $n++;
        }
        ?>
    </div>
    <button type="button" id="add-another" onclick="addKeyValueField()">Add another</button>
    <input type="submit" value="Send Order">
 </form>

And in your JS script...

var fieldIndex = <?php echo $n; ?>;

So that is a quick answer... You should also read about Ajax .