Question

I’m trying to dynamically change the action of a form so that it spawns an iframe instead of posting to the next page. Here is my code:

var formItem = document.getElementsByTagName("form")[2].action = createIframe();
function createIframe(){
   ifrm = document.createElement("IFRAME"); 
   ifrm.setAttribute("src", "http://127.0.0.1/myIframe.html"); 
   ifrm.style.width = "50%"; 
   ifrm.style.height = "50%"; 
   document.body.appendChild(ifrm); 
} 

With the above code, the iframe is spawned immediately and then clicking the button to submit the form returns an undefined page. Where am I going wrong? Many thanks for any help!

Answer 1

I’d recommend setting the action of that form to "" and then invoking that function onsubmit:

window.onload = function() {
  var formItem = document.getElementsByTagName("form")[2];
  formItem.setAttribute('action', '');
  formItem.addEventListener('submit', createIframe, false);
}

function createIframe(){
  var ifrm = document.createElement("IFRAME"); 
  ifrm.setAttribute("src", "http://127.0.0.1/myIframe.html"); 
  ifrm.style.width = "50%"; 
  ifrm.style.height = "50%"; 
  document.body.appendChild(ifrm); 
}