Как использовать несколько кнопок отправки в одной форме с Ajax

Я создаю простой веб-сайт, который использует mysql в качестве backend. У меня есть форма, которая имеет 2 кнопки, из которых один ищет данные из db и заполняет страницу с помощью Ajax, другая кнопка обновляет новые значения до db. Теперь моя проблема в том, что я не могу использовать обе кнопки как кнопку «Отправить».Как использовать несколько кнопок отправки в одной форме с Ajax

Ajax Метод & Html Форма:

<script type="text/javascript"> 
    $(document).ready(function(){ 
      $(document).on('submit', '#update-form', function(){ 
       var data = $(this).serialize(); 
       $.ajax({ 
        type : 'POST', 
        url : 'search.php', 
        data : data, 
        success : function(data){ 
         $(".display").html(data); 
        } 
       }); 
       return false; 
      }); 
     }); 
</script> 
<body> 
    <div id="update" class="tab-pane fade"> 
       <form id="update-form" role="form" class="container" method="post" action="search.php"> 
        <h3>Update details</h3> 
        <table class="display"> 
         <tr class="space"> 
          <td><label>File Number:</label></td> 
          <td><input type="text" class="form-control" name="filenum" required></td> 
         </tr> 
        </table> 
        <button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>  
        <button type="submit" class="btn btn-default text-center" name="submit_btn" formaction="update.php">Update</button> 
       </form> 
      </div> 
</body>

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

Протестированоformactionно оно не работает из-за использования метода Ajax.

источник

2016-09-26 Suroor Ahmmad

Для чего вам нужны обе кнопки отправки? – Jacob

Больше не нужно. Решение найдено. –

Вы можете сделать это разными способами.

Первое, что приходит мне на ум это: изменить тип кнопки кнопки, чтобы быть вместо покориться и добавить атрибут OnClick

<button type="button" onclick="submitForm('search.php')">Search</button> 
<button type="button" onclick="submitForm('update.php')">Update</button>

Затем в JavaScript:

function submitForm(url){ 
    var data = $("$update-form").serialize(); 
    $.ajax({ 
     type : 'POST', 
     url : url, 
     data : data, 
     success : function(data){ 
      $(".display").html(data); 
     } 
    }); 
}

источник

2016-09-26 12:43:16 Marko

Идеальное решение. Отлично работает. Спасибо! –

В jquery вы можете вызвать подачу. Проверьте это: https://api.jquery.com/submit/

Вы создаете DIV или другой и в JQuery добавить слушателя в этот DIV:

<div id="button">Here my button</div>

И в JQuery

$('#button').on('click', function(){ 
    $('#update-form').submit() 
}

источник

2016-09-26 12:22:12

Я использовал его в своем коде выше, но у меня есть несколько кнопок отправки. Мое требование: я хочу установить другую цель для обеих кнопок. (Я рекомендую вам еще раз прочитать мой вопрос) –

Добавить кнопку прослушивания на обеих кнопках, которые делают разные вещи, нет? –

$(document).ready(function(){ 
 
      $(document).on('submit', '#update-form', function(){ 
 
       
 
       var data = $(this).serialize(); 
 
       $.ajax({ 
 
        type : 'POST', 
 
        url : 'search.php', 
 
        data : data, 
 
        success : function(data){ 
 
         $(".display").html(data); 
 
        } 
 
       }); 
 
       return false; 
 
      }); 
 
     
 
    $(document).on('click', '#update-btn', function(){ 
 
       var data = $("input[name='filenum']").val(); //Handle how you want 
 
     
 
       $.ajax({ 
 
        type : 'POST', 
 
        url : 'update.php', 
 
        data : data, 
 
        success : function(data){ 
 
         $(".display").html(data); 
 
        } 
 
       }); 
 
       }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="update" class="tab-pane fade"> 
 
       <form id="update-form" role="form" class="container" method="post" action="search.php"> 
 
        <h3>Update details</h3> 
 
        <table class="display"> 
 
         <tr class="space"> 
 
          <td><label>File Number:</label></td> 
 
          <td><input type="text" class="form-control" name="filenum" required></td> 
 
         </tr> 
 
        </table> 
 
        <button type="submit" class="btn btn-default text-center" name="search_btn" >Search</button>  
 
        <button form='forn-is-not-exist' class="btn btn-default text-center" name="submit_btn" id="update-btn" >Update</button> 
 
       </form> 
 
      </div> 
 
</body>

Посмотри

источник

2016-09-26 12:40:23 TheTom

<form id="update-form"> 
    ... 
    ... 
    <button type="button" class="submitForm" formaction="search.php">Search</button> 
    <button type="button" class="submitForm" formaction="update.php">Update</button> 
</form>

И затем ваш JS:

$('.submitForm').click(function(){ 
    $.ajax({ 
     method: 'post', 
     url: $(this).attr('formaction), 
     data: $("#update-form").serialize(), 
     ... 
     ... 
     success: function(){ } 
    }); 

});

источник

2016-09-26 13:15:44

Как использовать несколько кнопок отправки в одной форме с Ajax

ответ

Смежные вопросы