Dynamic Fields are going away after form submission-CodePudding

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>

CodePudding user response：

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.