Разрешение только один из трех кнопок, чтобы представить веб-форму

Question

Если у меня есть что-то вроде:

<form method="post" id="customForm" action=""> 
    //stuff 

    <div id="copiar"> 
     <button class="button" href="#" id="btnAdd0"> 
      <span class="icon icon3">&nbsp;</span> 
     </button> 
     <button class="button" href="#" id="btnDel0"> 
      <span class="icon icon58">&nbsp;</span> 
     </button> 
     <button class="submeter"> 
      <span class="label">Send</span> 
     </button> 
    </div> 
    </form> 

и:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#customForm").submit(function() { 
      var formdata = $("#customForm").serializeArray(); 
      $.ajax({ 
       url: "validation.php", 
       type: "post", 
       dataType: "json", 
       data: formdata, 
       success: function(data, data1) { 
        //stuff 
      }); 
      return false; 
     }); 
    }); 
</script> 

На данный момент три кнопки отправки формы. Моя идея только позволит представить действие этой кнопки:

<button class="submeter"> 
    <span class="label">Send</span> 
</button> 

Я уже пытался $("#customForm > #copiar > button.submeter").submit(function() { но страница перезагружается. Так что не работает.

Любая идея?

Answer 1

Вы должны сначала остановить другие кнопки, а затем подать свою заявку. Кроме того, при использовании идентификатора для выбора действительно нет никакой необходимости объединять его с другим ID, как #customForm> #copiar "

Попробуйте это:

$(document).ready(function() { 
    $("#customForm").submit(function(e) { 
     e.preventDefault(); 
     var formdata = $("#customForm").serializeArray(); 
     $.ajax({ 
      url: "validation.php", 
      type: "post", 
      dataType: "json", 
      data: formdata, 
      success: function(data, data1) { 
       //stuff 
      } 
     }); 
    }); 
    $("#customForm button").click(function(e) { 
     var me = $(this); 
     e.preventDefault(); 

     if(me.hasClass("submeter")) $("#customForm").submit(); 
    }); 
}); 

И, как уже отмечалось, вам не нужно/хотите href = "#"

Answer 2

Чтобы предотвратить поведение по умолчанию формы, вы должны использовать preventDefault() следующим образом:

$(document).ready(function() { 
    $("#customForm").submit(function(e) { 
     e.preventDefault(); 
     var formdata = $("#customForm").serializeArray(); 
     $.ajax({ 
      url: "validation.php", 
      type: "post", 
      dataType: "json", 
      data: formdata, 
      success: function(data, data1) { 
       //stuff 
     }); 
    }); 
    $("#customForm button.submeter").click(function() { 
     $("#customForm").submit(); 
    }); 
}); 

Answer 3

Что именно цель первой две кнопки элемента с href атрибут? Я подозреваю, что вы используете кнопку вместо обычной ссылки только для форматирования/визуальной причины.

В любом случае, просто добавьте атрибут type = "submit" к последней кнопке и удалите обработчик отправки, который вы определили для этой кнопки, он должен работать нормально.

Редактировать. вам также нужно вызвать метод preventDefault(), чтобы остановить перезагрузку страницы, как указано phil klein