Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
E ai pessoal, to com um pequeno problema: tenho um script que ao clicar em um botão ele adiciona um alguns inputs pelo XMLHttpRequest, mas ao adicionar os novos campos ele zera o valor dos anteriores. Tem algum jeito de parar com isso?
Obs.: Se tiver alguma coisa errada com o post me avisem pois esse é meu primeiro aqui no fórum, valeu.
script
function mais_prod(){
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('lista_prod').innerHTML += this.responseText;
}
};
xmlhttp.open("GET","os_prod.php",true);
xmlhttp.send();
}
php
<table border="0" id="lista_prod">
<th> Qtd </th> <td> <input id="qtd" type="text" name="qtd[]" size="5" onblur="total()" /> </td>
<th> Produto </th>
<td>
<select name="produto">
<option value=""> Selecione um produto </option>';
do{
echo'<option value="'.$busca1['cod_produto'].'"> '.$busca1['produto'].' </option>';
}while($busca1=mysqli_fetch_assoc($sql1));
echo'
</select>
</td>
<th> Valor Unt </th> <td> <input id="valor_u" type="text" value="100.00" size="15" readonly /> </td>
<th> Valor Total </th> <td> <input id="valor_t" type="text" size="15" readonly /> </td>
<tr />
</table>Veja se você mata a charada:
Isolei pra ti...
https://fiddle.jshell.net/86hft92v/
----
<!SPOILER -> ((((( Alguem me ensina a colocar essa tag nesse editor novo do forum??! #toPutão ))))
Basicamente acontece assim.
No momento em que o Js efetua essa instrução:
document.getElementById('lista_prod').innerHTML += toInsert;
o value que estava nos campos pela 'Memoria ram' do browser são perdidos.
Pois você recria 100% o nodeHTML naquele momento (apaga, concatena e joga)
Então basicamente você poderia fazer algo +/- assim:
function mais_prod(){
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//document.getElementById('lista_prod').innerHTML += this.responseText;
var divByAjax = document.createElement('div');
divByAjax.innerHTML = this.responseText;
document.getElementById('lista_prod').appendChild(divByAjax);
}
};
xmlhttp.open("GET","os_prod.php",true);
xmlhttp.send();
}
Demo live do exemplo sem perder a referencia na memoria do input-> value
[https://fiddle.jshell.net/86hft92v/1/](https://fiddle.jshell.net/86hft92v/1/)
Obs: Na proxima usa o botão 'Código' para código ;)
Obs²:
Reparei que você está utilizando tentativas de crowssbrowser.
Cara para a sua sanidade, se o suporte ao IE6+ é necessário... vai de jQuery sem medo e seja feliz ;)
[https://blog.jquery.com/2012/08/09/jquery-1-8-released/](https://blog.jquery.com/2012/08/09/jquery-1-8-released/)
(Ps apesar q ... quem usa IE6 hoje em dia?!) 0.0000001%?
Tenho um tutorial explicando como usar ajax do jQuery:
[https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax](https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax)Ficou faltando a explicação principal haha
innerHTML : popula todo o conteudo do html...
<div>{TUDO QUE VAI AQUI É O HTML}</div>
Já a função appendChild()
Insere no ultimo node do html
<div>
<p></p>
<p></p>
<p></p>
<p></p>
{aqui seria o ultimo node}
</div>
Ou seja no meu exemplo com o uso do appendChild() por nenhum momento alteramos os inputs já criados, apenas 'empurramos' os novos campos logo abaixo deles.
Se isto estiver confuso (filho/dom/node/child)
Leia esse artigo q clareia bastante a respeito do JS no browser:
[https://tableless.com.br/tenha-o-dom/](https://tableless.com.br/tenha-o-dom/)
Para mais informações:
[https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild](https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild)
[https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML)Valeu colega, deu tudo certo
/applications/core/interface/imageproxy/imageproxy.php?img=http://izquotes.com/quotes-pictures/quote-talk-is-cheap-show-me-the-code-linus-torvalds-273528.jpg&key=ca90b9e0b1c201f03d59eb46408e9b5f4ff3b4d1dcfc93832a8f35e12735f149" />
Cade o código?