CODEWITHSUNDEEP
javascriptjqueryhtmlfunction
Stijn De Schutter
Stijn De Schutter

Reputation: 257

write a HTML form to webpage using javascript function

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.

Upvotes: 0

Views: 1581

Answers (2)

Jeffrey Blake
Jeffrey Blake

Reputation: 9699

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

Upvotes: 1

Walid
Walid

Reputation: 1282

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.

Upvotes: 3

Related Questions