1

Tenho uma função javascript que é executada no onclick do botão novo e cria dois objetos HTML. O problema é que ao final da função, a página está fazendo reload e apagando o que foi criado. O que fazer para que não aconteça isso e os campos criados continuem na página? Segue o código:

var i = 1;
function novo() {

    var form, quant;

    if (parseInt(i) < 51) {
        form = "<table width='96%' border='0'><tr><td width='8%' class='tblNormal' align='Right'>Protocolo:</td>"
        form = form + "<td width='12%' class='tblNormal'><input type='hidden' name='tit" + i + "'> <input type='text' onkeypress='FiltraTecla(event);' name='ptcl" + i + "' value='' size='10' maxlength='10' onblur='javascript:pesquisa(this.name, " + i + ")'>"
        form = form + "<td width='8%' class='tblNormal' align='Right'>Nome:</td>"
        form = form + "<td width='38%' class='tblTexto'><span id='nome" + i + "'></span></td>"
        form = form + "<td width='14%' class='tblNormal' align='Right'>CNPJ/CPF:</td>"
        form = form + "<td width='21%' class='tblTexto'><span id='cpf" + i + "'></span></td>"
        form = form + "</tr></table>"

        //quantidade = i
        document.getElementById('qtd').value = i;
        document.frm.qtd.value = i;

        i = i + 1;
        formularios.innerHTML = formularios.innerHTML + form + "<br>";
    }
    else {
        alert("Numero máximo de devoluções por página.");
    }
}

Código asp.net:

<form name="frm" runat="server">
    <div id="page-wrapper">
        <div class="content-wrapper">
            <div class="container-fluid">
                <br />
                <br />
                <br />
                <div align="center">
                    <table border="0">
                        <tr>
                            <td align="center" colspan="5"><font color="red"><b></b></font></td>
                        </tr>
                        <tr>
                            <td class="titulo" colspan="6" align="center">
                                <h2>Cadastra Documento</h2>
                            </td>
                        </tr>
                        <tr>
                            <td class="tblNormal" width="50%" colspan="1" align="Right">Data:</td>
                            <td class="tblNormal" width="50%" colspan="1">
                                <asp:TextBox ID="txData" runat="server" maxlength="8"  onblur="formataData(this, event);"></asp:TextBox>
                              </td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">CPF/CNPJ do Sacado/Devedor:</td>
                            <td class="tblNormal" valign="middle">
                                <asp:TextBox ID="CPF" runat="server"  maxlength="14"  onblur="valida();"></asp:TextBox>
                                <asp:TextBox ID="Nome" runat="server" Visible="false"></asp:TextBox>
                                <asp:TextBox ID="txtQtd" runat="server" Visible="false"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                    <span id="formularios"></span>
                    <asp:HiddenField ID="qtd" runat="server" />
                    <asp:Button ID="btnNovo" runat="server" Text="Novo" OnClientClick="novo(ctl00$ContentPlaceHolder1$qtd.value);" CssClass="btn btn-default"   />
                    <asp:Button ID="btnEnviar" runat="server" Text="Enviar" OnClientClick="enviar();" CssClass="btn btn-default"   />
                </div>
            </div>
        </div>
    </div>
</form>

1 Resposta 1

1

Creio que esse button está a ser interpretado como um button type="submit" e portanto faz submit da form quando o clicas.

Duas ideias para corrigir que encontrei:

UseSubmitBehaviour="false"

Junta UseSubmitBehaviour="false" para o button ser visto como um button type="button". Ficaria:

<asp:Button UseSubmitBehaviour="false" ID="btnNovo" runat="server" Text="Novo" OnClientClick="novo(ctl00$ContentPlaceHolder1$qtd.value);" CssClass="btn btn-default"   />

return false;

Junta return false; (talvez dê também com e.preventDefault() passanto o evento à função) para impedir o botão de submeter a form. Ficaria:

function novo(){
    // o teu código
    // e no final:
    return false;
}
4
  • Fiz as alterações sugeridas, e continua fazendo reload na página! 5/07/2015 às 15:06
  • Quando eu faço debug no IE ele monta o HTML assim: <input type="button" name="ctl00$ContentPlaceHolder1$btnNovo" value="Novo" onclick="novo();__doPostBack(&#39;ctl00$ContentPlaceHolder1$btnNovo&#39;,&#39;&#39;)" id="ContentPlaceHolder1_btnNovo" class="btn btn-default" /> 5/07/2015 às 15:19
  • @GermanoSampaio testa OnClientClick="return novo(ctl00$ContentPlaceHolder1$qtd.value);" e na função coloca return false; na ultima linha.
    – Sergio
    5/07/2015 às 15:24
  • 1
    O return false já estava. DEntão só fiz colocar a o return na chamada da função e deu certo. Obrigado! 5/07/2015 às 17:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .