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-29 19:07:21Z

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, 2015 at 19:07

answered Dec 29, 2015 at 19:01

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

5 Comments

Champin Néault Florian Over a year ago

Ok, i understand but are you sure for the last element ? it would be document.getElementById("partTwo").innerHTML += "</form>"; no ?

Zakaria Acharki Over a year ago

No champ, the form is autoclosed.

Champin Néault Florian Over a year ago

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 ?

Zakaria Acharki Over a year ago

Yes that true the type='submit' in button tell him that it should submit the parent form.

Oleksandr Papchenko Over a year ago

Be advised button with type sybmit will cause page reloading. if you dont want page reloadint - like in SPA, you need use button listeners.

Community · Accepted Answer · 2017-05-23 11:45:02Z

1

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

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Dec 29, 2015 at 19:03

Oleksandr Papchenko

2,23125 silver badges32 bronze badges

2 Comments

Zakaria Acharki Over a year ago

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.

Oleksandr Papchenko Over a year ago

@Zakaria Acharki i agree with you. I have provided cause and you have provided solution. Perfect job! :)

Community · Accepted Answer · 2017-05-23 12:07:49Z

0

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);

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Dec 29, 2015 at 19:09

cynicaljoy

2,0871 gold badge18 silver badges25 bronze badges

Collectives™ on Stack Overflow

Form button add dynamically in JS

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related