Create button dynamically in HTML form

rss

Posted by Helge - Mar 2 ’16 at 01:25

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
    rostislav
    Moderator
    Member for: 4 years 7 months 6 days
    #1 by rostislav Mar 2 ’16 at 06:13

    Try this:

    var btn=document.createElement("BUTTON");
    var t=document.createTextNode("Click me");
    btn.appendChild(t);
    
    document.getElementById('fd_form').appendChild(btn);
  • Helge
    Member
    Member for: 3 years 9 months 10 days
    #2 by Helge Mar 2 ’16 at 01:43

    [#1]: 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
    rostislav
    Moderator
    Member for: 4 years 7 months 6 days
    #3 by rostislav Mar 3 ’16 at 05:44

    [#2]:

    To answer your question, you can do something like this:

    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://formsdesigner.blogspot.com/2014/07/how-to-conditionally-hide-disable-make.html, 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)

    $('.someelement').after("<button>Click me</button>");

    However, still, that's probably not the way to do this.

Displaying 1 to 3 of 3 messages