html forms crash IE 11

Question

I have the following code.

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.

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.

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.

This works in Chrome and Firefox. Used to work in IE 10. Since IE updated in IE 11.0.9600.16476 :

if I fill and submit the first form, works.

if I fill the first form and then hit "Clear All", IE crash

If I fill/submit the ifirst form and then submit the second form, IE crash

I'm using Windows 7

The only way for this to work is to comment those lines

document.getElementById("source").value="";
document.getElementById("contr").value="";

I did everything to my powers and knowledge. Re-edit, use JS for submit, editing the enctype, use the URL to pass the data. Nothing at all. Makes no sense to me anymore.

Please, any advise will do.

Thanks in advance. I apologise for the huge post

Here is the 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 < 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 < 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="";    
}

HTML:

first form:

<form  name="inserterPoint" action="#" method="post" enctype="multipart/form-data">
Name <br>
<input name="name" id="name" class="textformfront" type="text" required  >

Description<br>
<textarea name="descr" id="descr" class="textformfront" rows="24" cols="50" required ></textarea>

Chronology
<input name="chron" id="chron" class="textformfront" type="text" required  >


  Type : <br>
  <select name="typeselect" id="typeselect" >
    <option selected value=" ">Pick one</option>
    <?php
      for ($d=0; $d< sizeof($typos) ; $d++)
           {echo '"<option value="'.$tid[$d].'" typeselect='.$tid[$d].'>'.$typos[$d].'</option>';}
    ?>
  </select>

 Era:<br>
  <select name="eraselect" id="eraselect" >
    <option selected value=" ">Pick one</option>
    <?php 
        for ($g=0; $g< sizeof($era) ; $g++)
             {echo '"<option value="'.$eid[$g].'" eraselect='.$eid[$g].'>'.$era[$g].'</option>';}
       ?>
  </select>

Links<br>
 <input name="link" id = "link" type="text" class="textformfront" required >

  <div id="extraLink"></div>
  <input type="button" onClick="moreLink();" value="More links" class="formButtonMap">

  <div id="extraLink2"></div>

Sources<br>
  <textarea name="source" id= "source" class="textformfront"  rows="24" cols="50" required ></textarea>

Contributors
<textarea name="contr" id="contr" class="textformfront"   rows="24" cols="50" ></textarea>

<input type="button"  id="clearAll" value="Clear All" class="formButtonMap" onClick="clearall();>


<input type="button"  id="saveB" value="Save All" class="formButtonMap" onClick="save();" style="display:none">

second form:

  <form name="nextform" action="anotherpage.php" method="post" enctype="multipart/form-data">
    <input name="pinid" id="pinid" type="hidden">
    <input type="submit" value="Go to another page" class="formButtonMap">
  </form>

EDIT

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.

EDIT 2 Wondering why descr 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.

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...

When you say, "IE crash", do you mean that the whole browser process fails? — Pointy, Dec 26 '13 at 16:21
So what you're saying is that setting the value of a `textarea` to `""` causes IE11 to crash. Can you reproduce it with a small test case, or is it only in this big application? — Barmar, Dec 26 '13 at 16:39
@Pointy Excellent question. i just edit my anser. Hope it helps — slevin, Dec 26 '13 at 17:10
@Barmar Thanks for edit the question. I also added details. No, not really, makes no sense. Why for those two textareas, and not the others? At first I thought has to do with the JS I wrote about links. I made it comments and the problem is still there. It will take a while to reproduce in test. Because this is part of a 900 lines php file. — slevin, Dec 26 '13 at 17:12
@Barmar Im trying to create a fiddle, but how I reprodude the second form that goes to another page? — slevin, Dec 26 '13 at 17:27
Is going to a another page really necessary to reproduce the problem? — Barmar, Dec 26 '13 at 17:30
I can't see any reason why setting those two textareas is different from `descr`, which is the only other textarea in your form. — Barmar, Dec 26 '13 at 17:33
@Barmar Going to another page I think is important. Because if I just submit the first form, everything is fine. As for the `descr`...Yes, beats me too. Why `descr` isnt also the problem? I dont know. — slevin, Dec 26 '13 at 17:35
slevin check out this question: http://stackoverflow.com/questions/20654447/ie11-is-crashing-when-clearing-a-form-with-5-or-more-fields-using-jquery — JoshBerke, Dec 26 '13 at 18:48
@JoshBerke. Thanks. I just comment out the `clearLinks` parts and submitted the forms. Problem remains. So, not caused by that... — slevin, Dec 26 '13 at 19:05
@JoshBerke I am so sorry. You are right. If I comment out any of the lines clearing the fields, this will work. Commenting 2 or more , randomly, will do. Except commenting the dropdowns, for some reason. I gues because the dropdowns , have a value , a space. Any way, thanks. Only problem now is, I dont quite get what the workaround does, so I can adjust it to my code. Can you suggest other workarounds? Thanks — slevin, Dec 26 '13 at 23:10
A developer here was playing around with setting the value to a space. and then doing something to replace it. Not sure exactly it's not been checked in yet:-) — JoshBerke, Dec 27 '13 at 14:04
@JoshBerke Just a note, using plain old `input type:reset` button does NOT fix anythning. For the love of God, did they fixed anything in IE11, except it (kinda) supports html5? — slevin, Dec 27 '13 at 19:31

score 0 · Answer 1 · answered Jan 02 '14 at 06:43

0

How about instead of setting the "contr" and "source" .value property, try setting its .innerHTML property. I don't know if this will make a difference but...

answered Jan 02 '14 at 06:43

0e4ef622

460
4
14

Its a IE11 bug. Check the comments below my question and see the link Josh Berke suggests – slevin Jan 02 '14 at 14:42

score 0 · Answer 2 · answered Feb 04 '14 at 20:11

0

Does the following resolve the crashing behavior?

document.getElementById("source").value=" ";
document.getElementById("contr").value=" ";
document.getElementById("source").value="";
document.getElementById("contr").value="";

answered Feb 04 '14 at 20:11

user3272516

1

html forms crash IE 11

2 Answers2

Linked