HTML form not working when put in a Javascript variable

Question

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!

"I can't interact with the form". Yes, that is because every time you click on the form, the HTML is replaced, as you asked it to do. (container.onclick = ...). — blex
– blex, Commented Jun 22, 2015 at 14:21

blex · Accepted Answer · 2015-06-22 14:25:12Z

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>

Vikash · Accepted Answer · 2015-06-22 14:27:23Z

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>

Collectives™ on Stack Overflow

HTML form not working when put in a Javascript variable

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