CODEWITHSUNDEEP
javascript
Roger
Roger

Reputation: 3

HTML form not working when put in a Javascript variable

I'm doing this:

(function (){
	var ad = document.getElementById("layerad");

    var slide1 = "<form action='' method='get'><p>Toppings</p><p><input name='topping1' type='checkbox' value='c'> Cheese</p><p><input name='topping2' type='checkbox' value='o'> Onions</p><input type='submit' value='Submit'></form>";

	var container = document.getElementById("container");

	container.onclick = function(){
		this.innerHTML = slide1;
	}

	function closeAd(){
		ad.style.display = "none";
	}
	var closeButton = document.getElementById("close");
	closeButton.onclick = closeAd;

	var style = document.createElement("link");
	style.rel = "stylesheet";
	style.href = "style.css";

	parent.document.body.appendChild(layerad);
	parent.document.getElementsByTagName("head")[0].appendChild(style);
})();
<div id="layerad">
    <p id="close">Close[X]</p>
    <div id="container">
      <div id="slide1">
      	<img src="slide1.png">
      </div>	    	     
    </div>
</div>

I need to put the forms in vars because eventually this forms will be coming from a JSON source, but that's not the problem, problem here is that when this loads, I can't interact with the form at all...

Any ideas? The product is an interstitial ad that shows a form.

Thanks a lot!

Upvotes: 0

Views: 52

Answers (2)

Vikash
Vikash

Reputation: 1139

You should not put your form inside your #container . Place your form in another div and it will work. 

(function (){
	var ad = document.getElementById("layerad");

    var slide1 = "<form action='' method='get'><p>Toppings</p><p><input name='topping1' type='checkbox' value='c'> Cheese</p><p><input name='topping2' type='checkbox' value='o'> Onions</p><input type='submit' value='Submit'></form>";

	var container = document.getElementById("container");

	container.onclick = function(){
		document.getElementById('myForm').innerHTML = slide1;
	}

	function closeAd(){
		ad.style.display = "none";
	}
	var closeButton = document.getElementById("close");
	closeButton.onclick = closeAd;

	var style = document.createElement("link");
	style.rel = "stylesheet";
	style.href = "style.css";

	parent.document.body.appendChild(layerad);
	parent.document.getElementsByTagName("head")[0].appendChild(style);
})();
<div id="layerad">
    <p id="close">Close[X]</p>
    <div id="container">
      <div id="slide1">
      	<img src="slide1.png">
      </div>	    	     
    </div>
<div id="myForm">

</div>
</div>

Upvotes: 0

blex
blex

Reputation: 25634

Add this.onclick = null; inside container.onclick. This will prevent the form from being replaced every time you click on it.

(function (){
	var ad = document.getElementById("layerad");

    var slide1 = "<form action='' method='get'><p>Toppings</p><p><input name='topping1' type='checkbox' value='c'> Cheese</p><p><input name='topping2' type='checkbox' value='o'> Onions</p><input type='submit' value='Submit'></form>";

	var container = document.getElementById("container");

	container.onclick = function(){
            this.innerHTML = slide1;
            this.onclick = null;
	}

	function closeAd(){
		ad.style.display = "none";
	}
	var closeButton = document.getElementById("close");
	closeButton.onclick = closeAd;

	var style = document.createElement("link");
	style.rel = "stylesheet";
	style.href = "style.css";

	parent.document.body.appendChild(layerad);
	parent.document.getElementsByTagName("head")[0].appendChild(style);
})();
<div id="layerad">
    <p id="close">Close[X]</p>
    <div id="container">
      <div id="slide1">
      	<img src="slide1.png">
      </div>	    	     
    </div>
</div>

Upvotes: 1

Related Questions