What to do for the function javascript n give Reload on the page

Question

I have a javascript function that runs on the onclick of the new button and creates two HTML objects. The problem is that at the end of the function, the page is re-loading and deleting what was created. What to do so that this does not happen and the created fields continue on the page? Follows the code:

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.");
    }
}

Asp.net code:

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

Answer 1

I believe that button is being interpreted as a button type="submit" and therefore makes Ubmit’s form when you click it.

Two ideas to fix that I found:

UseSubmitBehaviour="false"

Joins Usesubmitbehaviour="false"for the button to be seen as a button type="button". Would be:

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

return false;

Knuckle return false; (maybe you can also find e.preventDefault() event pass to function) to prevent button from submitting to form. Would be:

function novo(){
    // o teu código
    // e no final:
    return false;
}