Create button dynamically in HTML form

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

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

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

[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.