Form button add dynamically in JS

Question

I tried to add dynamically a form in JavaScript, but when I click on the submit button nothing happens. I know that is because the button has no listener, but I don't know what I have to add in the listener for a normal sending button behavior.

Here some of my code

document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("partTwo").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>T&eacute;l&eacute;charger le rapport</button>";
document.getElementById("partTwo").innerHTML += "</form>";

I want from the listener to juste send the form to my client.process.php

I know that it s a beginner question but any help would be appreciated. Thanks

Zakaria Acharki · Accepted Answer · 2015-12-29T19:07:21.947

2

Working fiddle.

You should add the inputs inside form and not inside div partTwo, so your code should be like :

document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("download_report").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>T&eacute;l&eacute;charger le rapport</button>";

Hope this helps.

edited Dec 29 '15 at 19:07

answered Dec 29 '15 at 19:01

Zakaria Acharki

66,747
15
75
101

Ok, i understand but are you sure for the last element ? it would be document.getElementById("partTwo").innerHTML += ""; no ? – Champin Néault Florian Dec 29 '15 at 19:05
No champ, the form is autoclosed. – Zakaria Acharki Dec 29 '15 at 19:06
So if I underwent well, i don't need to add listener on button ? The button behavior is correct even if it is created dynamically ? – Champin Néault Florian Dec 29 '15 at 19:11
Yes that true the `type='submit'` in button tell him that it should submit the parent form. – Zakaria Acharki Dec 29 '15 at 19:12
1

Be advised button with type sybmit will cause page reloading. if you dont want page reloadint - like in SPA, you need use button listeners. – Oleksandr Papchenko Dec 29 '15 at 19:16

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

The problem is that <form> tag is autoclosed. innerHTML returns well formed html. See this question

edited May 23 '17 at 11:45

Community

1
1

answered Dec 29 '15 at 19:03

Oleksandr Papchenko

2,071
21
30

That a point, but actually the problem is appending the whole tags in the same level when the inputs should be inside the form, check my answer please. – Zakaria Acharki Dec 29 '15 at 19:09
1

@Zakaria Acharki i agree with you. I have provided cause and you have provided solution. Perfect job! :) – Oleksandr Papchenko Dec 29 '15 at 19:14

score 0 · Answer 3 · edited May 23 '17 at 12:07

You should consider using createElement rather than innerHTML, see 2946656

Here is a basic example of how to create a form and append it to the page:

var form = document.createElement("form");
form.setAttribute('action', 'contact.php');
form.setAttribute('method', 'POST');

var inputField = document.createElement("input");
inputField.setAttribute('value', 'example');
form.appendChild(inputField);

document.body.appendChild(form);

Form button add dynamically in JS

3 Answers3