Conflict between buttons when sending form with jquery

2

I'm having a problem submitting a jQuery form, the submit was to be done only by a button but I have two in the form, and the submit is done by the two. how to solve this problem ??

<script type="text/javascript">

$(document).ready(function() {

$('#resultados').hide(); 

$("#formulario").submit(function() { 

$('#resultados').show(); 
$('#resultados').html("resultados");
return false;
});
});

</script>


<div id="resultados"></div>

  <form  method="POST" id="formulario"  action="">

   <input type="submit"  value="enviar" id="botao_enviar" name="enviar">
   <button>outro botão</button>       
    </form>
    
asked by anonymous 08.11.2017 / 13:13

2 answers

1

You should set type of <button> because the default value for the maria of browsers is submit , with the exception of only IE7 and its previous versions where% default is button .

  

type defines the type of button, its possible values are:

     
  • submit : The button sends the form data to the server. This is the default if the attribute is not specified, or if the attribute   is dynamically changed to an empty or invalid value.
  •   
  • reset : The button restores all controls to their initial values.
  •   
  • button : The button has no default behavior. It may have client-side scripts associated with element events in
      which are triggered when the event occurs.
  •   

Reference button MDN

Refresh button W3

Here's an example working with your code:

$(document).ready(function() {

  $('#resultados').hide(); 

  $("#formulario").submit(function() { 

  $('#resultados').show(); 
  
  $('#resultados').html("resultados");
    return false;
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="resultados"></div>
<form  method="POST" id="formulario"  action="">

  <input type="submit"  value="enviar" id="botao_enviar"    name="enviar" />
  
  <button type="button">Outro botão</button>       
  
</form>
    
08.11.2017 / 13:27
6

You have to use type="button" if the browser does not think it's a submit button.

Mute

<button>outro botão</button>       

for

<button type="button>outro botão</button>      

In MDN you can read about type :

The possible values are:

  • submit : The button sends the form data to the server. This is the default if the attribute is not specified , or if the attribute is dynamically changed to an empty or invalid value.

  • reset : The button restores all controls to their initial values.

  • button : The button has no default behavior. It can have client-side scripts associated with the element events, in which they are triggered when the event occurs.

08.11.2017 / 13:16