adding a forms to a html page with javascript

Question

I want to add a form with javascript and want to use this code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="afbeelding1" class="afbeelding">
    <form>
        <input type="checkbox" onclick="addOrRemoveSpecifications()">
    </form>
    <img src="afbeelding1.jpg">
</div>
</body>
<script>
function addOrRemoveSpecifications(){
    var div = document.getElementById("afbeelding1").firstchild;
    div.innerHTML=div.innerHTML + 
    '       
    <form>
        <select>
            <option value="320x200">320x200
            <option value="1024x768">1024x768
            <option value="1920x1200">1920x1200
        </select>
        <select>
            <option value="Canvas">Canvas
            <option value="Hout">Hout
            <option value="Digitaal">Digitaal
        </select>
    </form>
    ';
}
</script>
</html>

can anybody help me with this?

thank you in advance, you guys are awesome :)

osallou · Accepted Answer · 2015-08-18 20:13:02Z

1

simply use jquery or equivalent

myform = '<form ...';
$('afbeelding1').append(myform);

answered Aug 18, 2015 at 20:13

osallou

1546 bronze badges

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

Comments

Bhuwan · Accepted Answer · 2015-08-18 20:29:02Z

1

There are two ways depending what you want.

First Method

1.Add the form in your HTML itself where you want it.

2.Set the css :display of that form as none.

3.Use the JavaScript function to change the display from none to block.

function addOrRemoveSpecifications() { documentgetElementById("form").style.display="block"; }

Second Method: Use the following to create your form :-

1.createElement

2.appendChild .

For Example:http://jsfiddle.net/rvs4oq6p/

answered Aug 18, 2015 at 20:29

Bhuwan

1772 silver badges12 bronze badges

Collectives™ on Stack Overflow

adding a forms to a html page with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related