Use jquery without refresh on page

Navigation
2

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

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

    
asked by anonymous 22.11.2014 / 23:02

1 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. In my view there is a logic error there. Is this button a link or button with type="submit" ? if it was not supposed to be that's what causes you the problem and I do not 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 do not have to change anything in jQuery.

If there is a form that is being submitted then you have to change to use AJAX, complementing the .preventDefault() that I have already suggested above. But I do not see this in your code or explanation of the problem.

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

    
22.11.2014 / 23:09
Problem with positioning of include.php IIS - Directory Access Denied