PHP code doesn't see input added through js

Question

I have form that collect datas when SAVE button is pressed from three inputs. First two is already loaded on the site, but last appears when DVD-disk is selected in <select>. So PHP code see values from first two inputs, but not from the last one. I added name and id to all of them. Inputs are in the main container that is in form.

Expected output: echo ($DVDdisk) show data

Real output: Undefined index: DVDsize

let selector = document.getElementById("selector");

let main = document.getElementById("input-main-add");

let div = document.createElement('div');

let h2 = document.createElement('H2');

let input = document.createElement('input');

selector.addEventListener("change", (e) => {
  if (selector.value == "DVD") {
    div.classList.add('input-add-holder');
    main.appendChild(div);
    h2.textContent = 'Enter size:';
    h2.style.display = 'inline-block';
    div.appendChild(h2);
    input.setAttribute("name", "DVDsize");
    input.setAttribute("id", "DVDsize");
    div.appendChild(input);
  }
});

<form method="POST" action="add.php">
  <button class="accept-btn" type="submit">SAVE</button>
  <!-- + -->
  <button class="decline-btn">CANCEL</button>
  <!-- + -->
  </div>
  </div>
  <div class="input-main-add" id="input-main-add">
    <!-- + -->
    <div class="input-add-holder">
      <H2 style="display:inline-block">SKU: </H2>
      <input class="something" name="SKU" id="SKU"></input>
    </div>
    <div class="input-add-holder">
      <H2 style="display:inline-block">Name: </H2>
      <input class="something" name="name" id="name"></input>
    </div>
    <div class="input-add-holder">
      <H2 style="display:inline-block">Type Switcher: </H2>
      <select name="selector" id="selector">
        <option value="DVD" id="DVD" name="DVD">DVD-Disk</option>
        <option value="book" id="book" name="book">Book</option>
        <option value="furniture" id="furniture" name="furniture">Furniture</option>
      </select>
    </div>
  </div>
</form>

PHP code:

<?php
    $SKU = $_POST["SKU"];
    $name = $_POST["name"];
    $DVDsize = $_POST["DVDsize"];
    echo ($SKU);
    echo ($name);
    echo ($DVDsize);
?>

It looks like it should work. If you check the Payload in the Network tab, do you see it sending DVDsize? — Barmar
– Barmar, Commented Apr 5, 2022 at 17:39
Why don't you just put the DVDSize input in the original HTML? Then just hide or show it depending on the selection. — Barmar
– Barmar, Commented Apr 5, 2022 at 17:48
The input DVDsize did not send to the server because it's need Type Switcher to be change to DVD. You have selected DVD-Disk by default so the change event did not happens. You have to manually trigger change event on select box. See select.dispatchEvent(new Event('change')); from answer in the link. — vee
– vee, Commented Apr 5, 2022 at 17:48
so u have input a val in DVDSize after re-select Type = DVD ? but PHP side still echo undefine index ? — WolfCode
– WolfCode, Commented Apr 5, 2022 at 18:11

vee · Accepted Answer · 2022-04-05 18:00:37Z

1

Your JS listen for change event on Type Switcher select box that the selected value must be DVD-Disk but your default value of this select box is DVD-Disk which is already selected.

So, this event will never happens when you just load the page, fill form (without change select box) and submit.
If this event never happens, it means input name DVDSize will not rendered and not send to server. That's why your PHP doesn't see this input.

You have to manually trigger change event for select box once DOM ready.

let selector = document.getElementById("selector");

let main = document.getElementById("input-main-add");

let div = document.createElement('div');

let h2 = document.createElement('H2');

let input = document.createElement('input');

selector.addEventListener("change", (e) => {
  if (selector.value == "DVD") {
div.classList.add('input-add-holder');
main.appendChild(div);
h2.textContent = 'Enter size:';
h2.style.display = 'inline-block';
div.appendChild(h2);
input.setAttribute("name", "DVDsize");
input.setAttribute("id", "DVDsize");
div.appendChild(input);
  }
});


// manually trigger change event.
let selectTypeSwitcher = document.getElementById('selector');
if (selectTypeSwitcher) {
    selectTypeSwitcher.dispatchEvent(new Event('change'));
}

<form method="POST" action="add.php">
  <button class="accept-btn" type="submit">SAVE</button>
  <!-- + -->
  <button class="decline-btn">CANCEL</button>
  <!-- + -->
  </div>
  </div>
  <div class="input-main-add" id="input-main-add">
    <!-- + -->
    <div class="input-add-holder">
      <H2 style="display:inline-block">SKU: </H2>
      <input class="something" name="SKU" id="SKU"></input>
    </div>
    <div class="input-add-holder">
      <H2 style="display:inline-block">Name: </H2>
      <input class="something" name="name" id="name"></input>
    </div>
    <div class="input-add-holder">
      <H2 style="display:inline-block">Type Switcher: </H2>
      <select name="selector" id="selector">
        <option value="DVD" id="DVD" name="DVD">DVD-Disk</option>
        <option value="book" id="book" name="book">Book</option>
        <option value="furniture" id="furniture" name="furniture">Furniture</option>
      </select>
    </div>
  </div>
</form>

Run the code above while open network inspector and you will see DVDSize input send to the server.

answered Apr 5, 2022 at 18:00

vee

4,8056 gold badges49 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tea Over a year ago

It works here, but not in my side. I don't know why. When I edit something in css and after that refreshing my page, nothing happens.Works only with Ctrl + Shift + R hotkey. I'm using XAMPP.

vee Over a year ago

@OneCupOfTea Make sure that manual trigger is working when Dom content is loaded. Try to do some console.log('message') before dispatchEvent() to see that script was called or not.

vee Over a year ago

@OneCupOfTea CTRL+Shift+R is force refresh the page, that means your JS, CSS file did not load the new one but cached one. You have to add something to that in the URL. For example: from currently you maybe using myscript.js now add some querystring like this myscript.js?update=20220407. Do the same with CSS.

Collectives™ on Stack Overflow

PHP code doesn't see input added through js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related