Pass innerHTML inputs to form and access via PHP

Asked

Viewed 254 times

0

I have an HTML form, normal input fields, Submit button... Through a JS function, I add additional input fields to a DIV (with innerHTML).

var div = document.getElementById('produtos-adicionados');
div.innerHTML = '<input type='text' class='form-control' name='item' id='item' required='' />';

When you give Submit in the form, I cannot access this new input of name item, obviously.

How could you send the form and get the input value in php? In addition, when submitting the form, you can also obtain the values of the other inputs, which are in the form but are not in innerHTML.

  • 1

    All additional inputs use the name=item, repeatedly?

  • 1

    this command div.innerHTML = '...' works with all these simple quotes?

  • The Names of the Gero inputs dynamically and with a counter I increment. Example: first input will have the following name: item0. The following will be called item1, and so on. Same thing for others, where I have: quantity0, quantity1, etc...

  • div.innerHTML works with single quotes because the command uses double quotes. Ex: div.innerHTML = "<input type='text' />"

  • The element of id="produtos-adicionados" is inside the <form></form>?

  • Yes, it’s inside the form.

Show 1 more comment

1 answer

-1

Watch out:

  1. quotation marks around the html
  2. required attribute does not need to assign value

Updating:

Using jQuery to show that the added input is part of the form.

var div = document.getElementById('produtos-adicionados');
div.innerHTML = "Apelido: <input type='text' class='form-control' name='item' id='item' required />"

$('#myform').submit(function(e) {
  e.preventDefault()
  alert(JSON.stringify(($('#myform').serializeArray())))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form id="myform" action="/action_page.php">
  Nome: <input type="text" name="nome" required>
  <div id="produtos-adicionados"> substituir conteúdo</div>

  <input type="submit">
</form>

Browser other questions tagged

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