¿Puedo hacer un <button> no enviar un formulario?

Question

Tengo un formulario, con 2 botones

<a href="index.html"><button>Cancel changes</button></a> 

<button type="submit">Submit</button> 

utilizo el botón de jQuery UI en ellos también, simplemente como esto

$('button').button(); 

Sin embargo, el primer botón también envía el formulario. Hubiera pensado que si no tuviera el type="submit", no lo haría.

Obviamente, podría hacer esto

$('button[type!=submit]').click(function(event) { event.stopPropagation(); }); 

Pero hay una manera puedo dejar que el botón de vuelta de enviar el formulario sin intervención JavaScript?

Para ser sincero, utilicé solo un botón para poder diseñarlo con jQuery UI. Intenté llamar al button() en el enlace y no funcionó como se esperaba (¡parecía bastante feo!).

Answer 1

el valor por defecto para el type attribute of button elementses "enviar".

<button type=button>Submit</button> 

Answer 2

sólo tiene que utilizar el bueno de HTML:

<input type="button" value="Submit" /> 

envolverlo como sujeto de un enlace, si así lo desea:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a> 

O si usted decide que quiere javascript para proporcionar alguna otra funcionalidad :

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/> 

Answer 3

The button element tiene un tipo predeterminado de submit.

Puede hacer que haga nada mediante el establecimiento de un tipo de button:

<button type="button">Cancel changes</button> 

Answer 4

Honestamente, me gusta las otras respuestas. Fácil y sin necesidad de ingresar a JS. Pero noté que estabas preguntando sobre jQuery. Por lo tanto, para completar, en jQuery si devuelve false con el controlador .click(), se negará la acción predeterminada del widget.

See here for an example (y más obsequios, también). Here's the documentation, too.

en pocas palabras, con su código de ejemplo, hacer esto:

<script type="text/javascript"> 
    $('button[type!=submit]').click(function(){ 
     // code to cancel changes 
     return false; 
    }); 
</script> 

<a href="index.html"><button>Cancel changes</button></a> 
<button type="submit">Submit</button> 

Como beneficio adicional, con esto, usted puede deshacerse de la etiqueta de anclaje y sólo tiene que utilizar el botón.

Answer 5

<form onsubmit="return false;"> 
    ... 
</form> 

Answer 6

<form class="form-horizontal" method="post"> 
     <div class="control-group"> 

      <input type="text" name="subject_code" id="inputEmail" placeholder="Subject Code"> 
     </div> 
     <div class="control-group"> 
      <input type="text" class="span8" name="title" id="inputPassword" placeholder="Subject Title" required> 
     </div> 
     <div class="control-group"> 
      <input type="text" class="span1" name="unit" id="inputPassword" required> 
     </div> 
      <div class="control-group"> 
      <label class="control-label" for="inputPassword">Semester</label> 
      <div class="controls"> 
       <select name="semester"> 
        <option></option> 
        <option>1st</option> 
        <option>2nd</option> 
       </select> 
      </div> 
     </div> 

     <div class="control-group"> 
      <label class="control-label" for="inputPassword">Deskripsi</label> 
      <div class="controls"> 
        <textarea name="description" id="ckeditor_full"></textarea> 
<script>CKEDITOR.replace('ckeditor_full');</script> 
      </div> 
     </div> 



     <div class="control-group"> 
     <div class="controls"> 

     <button name="save" type="submit" class="btn btn-info"><i class="icon-save"></i> Simpan</button> 
     </div> 
     </div> 
     </form> 

     <?php 
     if (isset($_POST['save'])){ 
     $subject_code = $_POST['subject_code']; 
     $title = $_POST['title']; 
     $unit = $_POST['unit']; 
     $description = $_POST['description']; 
     $semester = $_POST['semester']; 


     $query = mysql_query("select * from subject where subject_code = '$subject_code' ")or die(mysql_error()); 
     $count = mysql_num_rows($query); 

     if ($count > 0){ ?> 
     <script> 
     alert('Data Sudah Ada'); 
     </script> 
     <?php 
     }else{ 
     mysql_query("insert into subject (subject_code,subject_title,description,unit,semester) values('$subject_code','$title','$description','$unit','$semester')")or die(mysql_error()); 


     mysql_query("insert into activity_log (date,username,action) values(NOW(),'$user_username','Add Subject $subject_code')")or die(mysql_error()); 


     ?> 
     <script> 
     window.location = "subjects.php"; 
     </script> 
     <?php 
     } 
     } 

     ?>