title: html forms crash IE 11
body: <p>I have the following code. </p>
  
  <p>User fills and submits the first form. When he hits "submit" the data is stored in the db via websockets. At the same time , server returns a new id just created. This id is stored in a hidden form. The submit button of the hidden form appears after the id is returned.</p>
  
  <p>If users wants hits the submit of the hidden form (no longer hidden now) and transfers to another page, where the id is also transefer via the form.</p>
  
  <p>In the first form the user can hit a button and more text fields will appear, so he can add data. The max number of those test fields is 10. I wrote the JS myself for that. The fields added dynamically via JS.</p>
  
  <p>This works in Chrome and Firefox. Used to work in IE 10. Since IE updated in IE 11.0.9600.16476 : </p>
  
  <p>if I fill and submit the first form, works. </p>
  
  <p>if I fill the first form and then hit "Clear All", IE crash</p>
  
  <p>If I fill/submit the ifirst form and then submit the second form, IE crash</p>
  
  <p>I'm using Windows 7</p>
  
  <p>The only way for this to work is to comment those lines </p>
  
  <pre><code>document.getElementById("source").value="";
  document.getElementById("contr").value="";
  </code></pre>
  
  <p>I did everything to my powers and knowledge. Re-edit, use JS for submit, editing the <code>enctype</code>, use the URL to pass the data. Nothing at all. Makes no sense to me anymore. </p>
  
  <p>Please, any advise will do.</p>
  
  <p>Thanks in advance. I apologise for the huge post</p>
  
  <p>Here is the code</p>
  
  <pre><code>//globals for links
  var gco=1;
  var arforl=[];
  
  //save form data and show hidden button of the 2nd form
  function save(){
    //edit the data of a field
    var sourceSpace=document.getElementById("source").value; var sourceNoSpace=sourceSpace.replace(/\s/g, '');
  
    //get all the extra links, put a | betwwen them
    var fst ="|";
    for (var a=0;a &lt; arforl.length; a++){     
       if (document.getElementById(arforl[a]).value!="")
       {fst+=document.getElementById(arforl[a]).value+"|";}
     }
  
    var ffst = fst.slice(1,fst.length-1);
  
    var so = new WebSocket("ws://localhost:8000");
  
    //get all the values from first form and other values, send via websockets
    so.onopen = function(){
     so.send(JSON.stringify({command: 'insertAll',
     name: document.getElementById('name').value,
     geo: hul,
     geoT:'point',
     descr: document.getElementById('descr').value,
     chron: document.getElementById('chron').value,  
     type: document.getElementById('typeselect').value,  
     era: document.getElementById('eraselect').value,  
     lin: document.getElementById('link').value+"|"+ffst,  
     sourc: sourceNoSpace,  
     contr: document.getElementById('contr').value,
     conler:idc
  
    }));}
  
    so.onmessage = function (evt) { 
     //get the new id from websockets 
     var received_msg = evt.data;
  
     //clear the form, show some messages 
     document.getElementById("next").style.display="block";
     document.getElementById("saveB").style.display="block";
  
     document.getElementById("name").value="";
     document.getElementById("descr").value="";
     document.getElementById("chron").value="";
     document.getElementById("typeselect").value=" ";
     document.getElementById("eraselect").value=" ";
     document.getElementById("link").value="";
  
       // i have to comment the next lines for this to work
     document.getElementById("source").value="";
     document.getElementById("contr").value="";
  
     //clear the extra links
     clearLinks();
  
     //pass the new id in the hidden form
     document.getElementById("pinid").value=received_msg;
     so.close();
     }
  
  }//closes save()
  
  
  //adds more text fields for links
  function moreLink(){
    if (gco!=10){
    var newLinkb=[];
  
    document.getElementById("extraLink").appendChild(document.createElement("br"));
    newLinkb[gco]= document.createElement('input');
    newLinkb[gco].setAttribute('type','text');
    newLinkb[gco].setAttribute('id',gco);
    newLinkb[gco].setAttribute('onfocus','cleari()');
    document.getElementById("extraLink").appendChild(newLinkb[gco]);
    arforl.push(gco);             
    gco++;
    }
  
   else
   {document.getElementById("extraLink2").innerHTML="max is 10";}
  
  }
  
  //clears the extra links
  function clearLinks(){
   for (var d=0;d &lt; arforl.length; d++){
   document.getElementById(arforl[d]).value="";
      }
  }
  
  function clearall(){
            document.getElementById("name").value="";
            document.getElementById("descr").value="";
            document.getElementById("chron").value="";
            document.getElementById("typeselect").value=" ";
            document.getElementById("eraselect").value=" ";
            document.getElementById("link").value="";
       // i have to comment the next lines for this to work
            document.getElementById("source").value="";
            document.getElementById("contr").value="";    
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <p>first form:</p>
  
  <pre><code>&lt;form  name="inserterPoint" action="#" method="post" enctype="multipart/form-data"&gt;
  Name &lt;br&gt;
  &lt;input name="name" id="name" class="textformfront" type="text" required  &gt;
  
  Description&lt;br&gt;
  &lt;textarea name="descr" id="descr" class="textformfront" rows="24" cols="50" required &gt;&lt;/textarea&gt;
  
  Chronology
  &lt;input name="chron" id="chron" class="textformfront" type="text" required  &gt;
  
  
    Type : &lt;br&gt;
    &lt;select name="typeselect" id="typeselect" &gt;
      &lt;option selected value=" "&gt;Pick one&lt;/option&gt;
      &lt;?php
        for ($d=0; $d&lt; sizeof($typos) ; $d++)
             {echo '"&lt;option value="'.$tid[$d].'" typeselect='.$tid[$d].'&gt;'.$typos[$d].'&lt;/option&gt;';}
      ?&gt;
    &lt;/select&gt;
  
   Era:&lt;br&gt;
    &lt;select name="eraselect" id="eraselect" &gt;
      &lt;option selected value=" "&gt;Pick one&lt;/option&gt;
      &lt;?php 
          for ($g=0; $g&lt; sizeof($era) ; $g++)
               {echo '"&lt;option value="'.$eid[$g].'" eraselect='.$eid[$g].'&gt;'.$era[$g].'&lt;/option&gt;';}
         ?&gt;
    &lt;/select&gt;
  
  Links&lt;br&gt;
   &lt;input name="link" id = "link" type="text" class="textformfront" required &gt;
  
    &lt;div id="extraLink"&gt;&lt;/div&gt;
    &lt;input type="button" onClick="moreLink();" value="More links" class="formButtonMap"&gt;
  
    &lt;div id="extraLink2"&gt;&lt;/div&gt;
  
  Sources&lt;br&gt;
    &lt;textarea name="source" id= "source" class="textformfront"  rows="24" cols="50" required &gt;&lt;/textarea&gt;
  
  Contributors
  &lt;textarea name="contr" id="contr" class="textformfront"   rows="24" cols="50" &gt;&lt;/textarea&gt;
  
  &lt;input type="button"  id="clearAll" value="Clear All" class="formButtonMap" onClick="clearall();&gt;
  
  
  &lt;input type="button"  id="saveB" value="Save All" class="formButtonMap" onClick="save();" style="display:none"&gt;
  </code></pre>
  
  <p>second form:</p>
  
  <pre><code>  &lt;form name="nextform" action="anotherpage.php" method="post" enctype="multipart/form-data"&gt;
      &lt;input name="pinid" id="pinid" type="hidden"&gt;
      &lt;input type="submit" value="Go to another page" class="formButtonMap"&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>By "IE crash" I mean that nothing happens for a while. Then if I click anyware on the page, I get the message "Website does not respond" and only If I click "Recover" gets me to the other page. But the new id is NOT passed in the other page. </p>
  
  <p><strong>EDIT 2</strong>
  Wondering why <code>descr</code> which is also a textfield isnt also part of the problem. I mean, I dont have to comment out the line that clears its value. So, I moved it to the end of the form. And turns out, I have to comment the line that clears its value for the website to work. </p>
  
  <p>Then I moved the links part on top of the form. And I have to comment the lines that clear the values of everything but the links, for the website to work. Looks like a "pattern". Everything below the links part causes problem. But if I comment out the links and the JS about the links, the problem is still there. Still makes no sense...</p>