Button conflict when sending form with jquery

Question

I’m having a problem sending a jQuery form, Submit was only to be done by one button but I have two in the form, and Submit is done by both. 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>

Answer 1

You have to use type="button" if not the browser thinks it is a commit button.

Mute

<button>outro botão</button>       

for

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

On MDN you can read about the 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 may have client-side scripts associated with element events, in which they are triggered when the event occurs.

Answer 2

You must define the type of <button> for the value pattern for the maroria of the navigators is Submit, with the exception of IE7 and its previous versions where type standard is button.

type sets 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 the element’s events on
  which are triggered when the event occurs.

Button reference MDN

Reference button W3

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

<div id="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>