Create button dynamically in HTML form

Discussions about Forms Designer for SharePoint 2010.
Locked
Helge
Posts: 4
Joined: Tue Mar 01, 2016

02 Mar 2016

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

User avatar
rostislav
Moderator
Posts: 364
Joined: Mon Oct 19, 2015

02 Mar 2016

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
Posts: 4
Joined: Tue Mar 01, 2016

02 Mar 2016

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)

User avatar
rostislav
Moderator
Posts: 364
Joined: Mon Oct 19, 2015

03 Mar 2016

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.

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests