Могу ли я сделать <button> не присылать форму?

Question

У меня есть форма, с 2-мя кнопками

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

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

Я использую кнопку JQuery UI на них тоже, просто как этот

$('button').button(); 

Однако первая кнопка также отправляет форму. Я бы подумал, что если бы у него не было type="submit", это не так.

Очевидно, что я мог бы сделать это

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

Но есть способ, я могу остановить эту кнопку назад от отправки формы без вмешательства JavaScript?

Чтобы быть честным, я использовал кнопку только для того, чтобы я мог создать ее с помощью jQuery UI. Я попытался позвонить button() по ссылке, и он не работал должным образом (выглядел довольно уродливо!).

Answer 1

значение по умолчанию для type attribute of button elementsявляется "submit".

<button type=button>Submit</button> 

Answer 2

Просто используйте хороший старый HTML:

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

завернуть его в качестве предмета ссылки, если вам так хочется:

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

Или если вы решите, что вы хотите Javascript, чтобы предоставить некоторые другие функции :

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

Answer 3

The button element имеет тип по умолчанию submit.

Вы можете сделать это не делать ничего, установив тип button:

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

Answer 4

Честно говоря, мне нравятся другие ответы. Легко и не нужно входить в JS. Но я заметил, что вы спрашивали о jQuery. Итак, для полноты, в jQuery, если вы вернете false с обработчиком .click(), это будет отрицать действие виджета по умолчанию.

See here for an example (и больше лакомства, тоже). Here's the documentation, too.

в двух словах, с примерами кода, выполните следующие действия:

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

В качестве дополнительного преимущества, с этим, вы можете избавиться от тега привязки и просто использовать кнопку.

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

     ?>