javascript - html 表单崩溃 IE 11

Question

我有以下代码。

用户填写并提交第一个表单。当他点击“提交”时，数据通过 websockets 存储在数据库中。同时，服务器返回一个刚刚创建的新id。此 ID 以隐藏形式存储。返回id后出现隐藏表单的提交按钮。

如果用户想要提交隐藏表单(现在不再隐藏)并转移到另一个页面，id 也通过表单转移。

在第一个表单中，用户可以点击一个按钮，然后会出现更多的文本字段，因此他可以添加数据。这些测试字段的最大数量是 10。我为此自己编写了 JS。通过JS动态添加的字段。

这适用于 Chrome 和 Firefox。用于在 IE 10 中工作。由于 IE 在 IE 11.0.9600.16476 中更新:

如果我填写并提交第一份表格，就可以了。

如果我填写第一个表格然后点击“全部清除”，IE 崩溃

如果我填写/提交第一个表单然后提交第二个表单，IE 崩溃

我正在使用 Windows 7

唯一可行的方法是注释这些行

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

我尽了我的能力和知识。重新编辑，使用JS提交，编辑enctype，使用url传递数据。什么都没有。对我来说没有意义了。

拜托，任何建议都可以。

提前致谢。我为这个巨大的帖子道歉

这是代码

//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:

第一种形式:

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

第二种形式:

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

编辑

“IE 崩溃”是指一段时间内没有任何反应。然后，如果我单击页面上的任何软件，我会收到消息“网站没有响应”，只有当我单击“恢复”时，我才会转到另一个页面。但是新的 id 没有在另一个页面中传递。

编辑 2想知道为什么同样是文本字段的 descr 也不是问题的一部分。我的意思是，我不必注释掉清除其值的行。所以，我把它移到了表格的末尾。事实证明，我必须评论清除其对网站工作的值(value)的行。

然后我将链接部分移到表单顶部。而且我必须评论清除除链接之外的所有内容的值的行，以使网站正常工作。看起来像一个“模式”。链接部分下方的所有内容都会导致问题。但是，如果我注释掉链接和关于链接的 JS，问题仍然存在。仍然没有意义...

Answer 1

如何不设置“control”和“source”.value 属性，尝试设置它的.innerHTML 属性。我不知道这是否会有所作为，但是...