Use jquery without refresh on the page

Question

I have this jQuery and when I click on the button it updates with the result and gives a refresh on the pag,in vdd changes the test/index.html link to test/index.html? ,I wonder if you have how to do without changing out of pay

<script>
$(function ($) {
    $('#enviar').click(function () {

        var linhas = $('#linhas').val();
        var plantas = $('#plantas').val();
        var combo = $('#haoum').val();

        var resultado = Number(linhas) + Number(plantas);
        $("#tam").attr("value", resultado);
        if (combo == "ha") {

        } else {

        }
    });
});
</script>

HTML

<li><div class="tldate">Maio</div> </li>
<li>
      <div class="tl-circ"></div>
  <div class="timeline-panel">
    <div class="tl-heading">
      <div class="tabbable" id="tabs-669585">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-343761" data-toggle="tab">Padrão</a>
                </li>
                <li>
                    <a href="#panel-530451" data-toggle="tab">Customizar</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="panel-343761">
                    <p>
                        <form class="form-horizontal" role="form" >
        <div class="form-group">
          <div class="col-sm-7">
            <label for="inputEmail3" class="control-label" contenteditable="true">Espaçamento entre linhas(metros):</label>
          </div>
          <div class="col-sm-10">
            <input type="text" class="input-mini" placeholder="1" id="linhas" value="1" disabled>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-7">
            <label for="inputPassword3" class="control-label">Espaçamento entre plantas(metros):</label>
          </div>
          <div class="col-sm-10">
            <input type="text" class="input-mini" id="plantas" placeholder="1" value="1" disabled>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6">
            <label id="tamanho" class="control-label">Tamanho da área a ser plantada:</label>
          </div>

          <div class="col-sm-10">
            <p><input type="text" class="input-mini" id="tam">         <select id="haoum" class="selectpicker">
                                                                            <option>ha</option>
                                                                            <option>m²</option>                                                                         
                                                                            </select></p>
             <div id="divPrincipal">

            </div>


            </div>

        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">

              <label>
                <button id="enviar" class="btn btn-default" >Estimar</button>
              </label>

          </div>
        </div>
      </form>
                    </p>
                </div>
                <div class="tab-pane" id="panel-530451">
                    <p>
                        <form class="form-horizontal" role="form" style="">
        <div class="form-group">
          <div class="col-sm-7">
            <label for="inputEmail3" class="control-label" contenteditable="true">Espaçamento entre linhas(metros):</label>
          </div>
          <div class="col-sm-10">
            <input type="text" class="input-mini" placeholder="1" id="linhas">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-7">
            <label for="inputPassword3" class="control-label">Espaçamento entre plantas(metros):</label>
          </div>
          <div class="col-sm-10">
            <input type="text" class="input-mini" id="plantas" placeholder="1">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-6">
            <label for="inputPassword3" class="control-label">Tamanho da área a ser plantada:</label>
          </div>
          <div class="col-sm-10">
            <p><input type="text" class="input-mini" id="tamanho">         <select class="selectpicker">
                                                                            <option>ha</option>
                                                                            <option>m²</option>                                                                         
                                                                            </select></p>


            </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
              <label>
                <button class="btn btn-default">Estimar</button>
              </label>
            </div>
        </div>
      </form>
                    </p>
                </div>
            </div>
        </div>

Answer 1

To prevent the button from following the expected path you need to use .preventDefault(). Change your code to:

$('#enviar').click(function (e) {
    e.preventDefault();

and the rest equal.

But I have a question. I think there is a logic error there. This button is a link or a button with type="submit"? If it is, it shouldn’t be because that is what causes the problem and I don’t see that you want to use the functionality for which this button is made. If my suspicion is correct change the HTML to <button type="button">etc</button> and then you don’t have to change anything at jQuery.

If there is a form which is being submitted then has to change to use AJAX, complementing the .preventDefault() I’ve suggested above. But I don’t see that in your code or explanation of the problem.

If I put HTML I can improve the answer and be more specific.