write a HTML form to webpage using javascript function

Question

I'm writing a javascript library and I need to make a javascript function which you can call to create a form (scheduler) on your webpage.

this is the html code of the form:

    <form>
    <table border="1" cellpadding="5">
    <tr><td id="schedulename" colspan="10">Time Schedule</td></tr>
    <tr>
        <td width="50">hours</td>
        <td></td>
        <td width="50">minutes</td>
        <td>Mon</td>
        <td>Tue</td>
        <td>Wed</td>
        <td>Thu</td>
        <td>Fri</td>
        <td>Sat</td>
        <td>Sun</td>
    </tr>
    <tr>
        <td width="50"><input type="text" id="hours" maxlength="2" size="1"></td> 
        <td width="2"> : </td> 
        <td width="50"><input type="text" id="minutes" maxlength="2" size="1"></td>
        <td> <input type="checkbox" id="mon"></td>
        <td> <input type="checkbox" id="tue"></td>
        <td> <input type="checkbox" id="wed"></td>
        <td> <input type="checkbox" id="thu"></td>
        <td> <input type="checkbox" id="fri"></td>
        <td> <input type="checkbox" id="sat"></td>
        <td> <input type="checkbox" id="sun"></td>
    </tr>


    <tr>
        <td colspan="10"> <input type="button" id="setbutton" value="Set schedule"></td>
    </table>
    </form>

my idea of the result is that a user only needs to create a div in his webpage, then in the javascript, call my function with the right parameters which in turn shows my predefined form. But I also need to add some functionality to the 'setbutton' it needs to write the data to an adres in my PLC (programmable logic controller)

what I want the function call to look like: showScheduler(id, adres); id is the id of the division and adres is the adres in my programmable logic controller I need to write to.

What is the best way to write the form to my webpage from within a javascript function?

I hope u guys can understand but i'll gladly give you more explanation if needed.

Note: when you create multiple forms dont use id, but class instead (inside the forms) ;-) — Joel Harkes
– Joel Harkes, Commented Apr 17, 2013 at 13:56
@joelharkes so if i use my function to create multiple forms on the same page this will not work? I need to change all the id's of the inputs to a class identifier? I don't really understand, can u explain more please? :) — Stijn De Schutter
– Stijn De Schutter, Commented Apr 17, 2013 at 14:09
ids are used to identify a single dom element eg, a single input field or a single div. so when you create multiple froms you get multiple ids of eg. schedulename. when u use more javascript (or jquery) to get for example al the schedulenames this wil start getting buggy (because javascript most likely will only get the first one) — Joel Harkes
– Joel Harkes, Commented Apr 17, 2013 at 14:11
@joelharkes so for every element in my form, i need to use 'class' instead of 'id' right? but then how do I access the value of the input boxes and the checkboxes? I need to access those values from my javascript code so i can determine which hour and min has been entered and which day has been selected, hope u understand this :p — Stijn De Schutter
– Stijn De Schutter, Commented Apr 17, 2013 at 14:20
in javascript: getElementsByClassName('classname') although i would suggest using jquery, its way easier: $('.classname') (note, jquery uses the css notation, and thus easier readable) — Joel Harkes
– Joel Harkes, Commented Apr 17, 2013 at 14:26

Walid · Accepted Answer · 2013-04-17 13:40:05Z

3

You can do something like:

<div id="placeholder">
</div>

<script type="text/javascript">
    function createForm(divId) {
        var formHtml = "<form><table border='1' cellpadding='5'>...</table></form>";
        document.getElementById(divId).innerHTML = formHtml;
    }
</script>

And call for example createForm("placeholder") when you want.

answered Apr 17, 2013 at 13:40

Walid

1,28211 silver badges10 bronze badges

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

3 Comments

Stijn De Schutter Over a year ago

thx man, but 1 more question, can I bind functionality to the button after it has been written to the HTML page? example:

function createForm(divId) {      var formHtml = "<form><table border='1' cellpadding='5'>...</table></form>";       document.getElementById(divId).innerHTML = formHtml;       $(#setbutton).click( function() { 	sendValues();       });      }

Walid Over a year ago

Yes, for example, you can do this, after changing the innerHTML of divId: document.getElementById("setbutton").onclick = function(event){alert('test');};

Stijn De Schutter Over a year ago

ok I know what I need to know, thanks very much for your help!

Jeffrey Blake · Accepted Answer · 2013-04-17 13:51:14Z

It sounds like you are specifically wanting the user to ONLY have their html and a <script> tag that loads in your js file. You will need to require a specific id or custom css class to use as a selector. Then the html part for the user would simply look like:

<html>
...
<body>
...
<div id="customID"></div>
...
</body>
</html>

Then in your javascript file, you need to create your function to write in the content, and tie that function to an execution on window.load(). Something like:

$( //note, this causes execution when the dom is loaded, using jQuery's .ready()
   function(){ showScheduler("customID"); }
);

function showScheduler(id)
{
    var contents = '<form><table border="1" cellpadding="5">...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
    $("#"+id).html(contents);
}

I'm not sure exactly what you're looking for regarding the adress part, but you could easily extend the showScheduler() function to include a second parameter for the adress value, and then stick that into the middle of the rest of the contents value. Something like:

function showScheduler(id, adress)
{
    var contents = '<form><table border="1" cellpadding="5">...' + adress + '...</table></form>'; //the ... needs to have the rest of your html with no single quotes anywhere inside
    $("#"+id).html(contents);
}

And further, if you prefer to have the user call the function from their page, you can skip the part about tying this to this to the dom's execution (i.e. remove the $( function(){ showScheduler("customID"); } ); part completely

Collectives™ on Stack Overflow

write a HTML form to webpage using javascript function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related