Page 1 of 1

Create button dynamically in HTML form

Posted: 02 Mar 2016
by Helge
Hi

I have a HTML form where I like to add buttons dynamicaly, it works fine in a ordinary HTML page but not inn formsdesigner, any suggestions?

std html code something like this:

var btn=document.createElement("BUTTON");
var t=document.createTextNode("Click me");
btn.appendChild(t);

document.body.appendChild(btn);

Re: Create button dynamically in HTML form

Posted: 02 Mar 2016
by rostislav
Try this:

Code: Select all

var btn=document.createElement("BUTTON");
var t=document.createTextNode("Click me");
btn.appendChild(t);

document.getElementById('fd_form').appendChild(btn);

Re: Create button dynamically in HTML form

Posted: 02 Mar 2016
by Helge
Tanks, it worked - but it was placed in then end of the page while I am working in a Accordion - how do I place it in the end of the accordion/where I want (ie after a text etc)

Re: Create button dynamically in HTML form

Posted: 03 Mar 2016
by rostislav
To answer your question, you can do something like this:

Code: Select all

var btn=document.createElement("BUTTON");
var t=document.createTextNode("Click me");
btn.appendChild(t);
document.getElementsByClassName('someelement')[0].parentNode.appendChild(btn);
Where 'someelement' is a class name you assign to the element (say, via the Forms Designer's CSS class box that you can see when you click an element in Forms Designer).

But this is a bad way of going about something like this. Most of time you'd be better off adding elements to the form and hiding or showing them as appropriate rather than creating HTML structure manually.

Check our blog post about it: http://spform.com/office-365/cond ... ynamically, the "Hide/show field or set of fields conditionally" section. It is about fields but it'd work the same way on buttons.

By the way, if you're doing a lot of DOM manipulation, you may want to check out the jQuery plugin http://api.jquery.com/

It is already available in Forms Designer.

For example, to do the above with jQuery you'd simply write (inside Forms Designer's Javascript editor)

Code: Select all

$('.someelement').after("<button>Click me</button>");
However, still, that's probably not the way to do this.