falha de formulários html IE 11
Eu tenho o seguinte código.
O usuário preenche e envia o primeiro formulário. Quando ele pressiona "enviar", os dados são armazenados no banco de dados via websockets. Ao mesmo tempo, o servidor retorna um novo ID recém-criado. Esse ID é armazenado em um formulário oculto. O botão de envio do formulário oculto aparece após o retorno da identificação.
Se os usuários desejam acessar o envio do formulário oculto (não está mais oculto agora) e transferidos para outra página, onde o ID também é transferido por meio do formulário.
Na primeira forma, o usuário pode pressionar um botão e mais campos de texto aparecerão, para que ele possa adicionar dados. O número máximo desses campos de teste é 10. Eu mesmo escrevi o JS para isso. Os campos foram adicionados dinamicamente via JS.
Isso funciona no Chrome e Firefox. Costumava trabalhar no IE 10. Desde que o IE foi atualizado no IE 11.0.9600.16476:
se eu preencher e enviar o primeiro formulário, funciona.
se eu preencher o primeiro formulário e clicar em "Limpar tudo", o IE falhará
Se eu preencher / enviar o primeiro formulário e depois enviar o segundo formulário, o IE falhará
Estou usando o Windows 7
A única maneira de isso funcionar é comentar essas linhas
document.getElementById("source").value="";
document.getElementById("contr").value="";
Eu fiz tudo com meus poderes e conhecimentos. Reedite, use JS para enviar, editando oenctype
, use o URL para transmitir os dados. Nada mesmo. Não faz mais sentido para mim.
Por favor, qualquer conselho serve.
Desde já, obrigado. Peço desculpas pelo enorme post
Aqui está o código
//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:
primeira forma:
<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">
segunda forma:
<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>
EDITAR
Por "falha do IE", quero dizer que nada acontece por um tempo. Então, se eu clicar em qualquer software da página, recebo a mensagem "O site não responde" e somente Se eu clicar em "Recuperar", chegará à outra página. Mas o novo ID NÃO é passado na outra página.
EDIT 2 Querendo saber por quedescr
que também é um campo de texto, também não faz parte do problema. Quero dizer, não preciso comentar a linha que limpa seu valor. Então, mudei para o final do formulário. E acontece que eu tenho que comentar a linha que limpa seu valor para o site funcionar.
Em seguida, movi a parte dos links na parte superior do formulário. E tenho que comentar as linhas que limpam os valores de tudo, menos os links, para o site funcionar. Parece um "padrão". Tudo abaixo da parte dos links causa problemas. Mas se eu comentar os links e o JS sobre os links, o problema ainda estará lá. Ainda não faz sentido ...