Ajax를 사용하는 단일 폼에서 여러 Submit 버튼을 사용하는 방법

mysql을 백엔드로 사용하는 간단한 웹 사이트를 만들고 있습니다. 나는 db에서 데이터를 검색하고 Ajax를 사용하여 페이지를 채우는 2 개의 버튼을 가진 폼을 가지고있다. 또 다른 버튼은 새로운 값을 db로 업데이트한다. 이제 내 문제는 두 버튼을 '제출'버튼으로 사용할 수 없다는 것입니다.Ajax를 사용하는 단일 폼에서 여러 Submit 버튼을 사용하는 방법

아약스 방법 & 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>

지금 내가 제출과 같은 두 버튼을 사용할 수 있도록 내가 위의 코드를 수정하는 방법을 알고 싶어요.

시도해보십시오.formactionAjax 메소드 사용으로 인해 작동하지 않습니다.

출처

2016-09-26 Suroor Ahmmad

버튼을 제출하는 이유는 무엇입니까? – Jacob

더 이상 필요하지 않습니다. 해결책을 찾았습니다. –

여러 가지 방법으로이 작업을 수행 할 수 있습니다.

내 마음에 와서 그 첫 번째는 다음과 같습니다

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/

당신은 사업부를 만들거나 다른 및 JQuery와에이 사업부에 리스너를 추가

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

: 버튼 수 대신 자바 스크립트에 나서 온 클릭 속성

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

를 입력하고 추가 버튼 유형을 변경

그리고 JS :

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

});

출처

2016-09-26 13:15:44

Ajax를 사용하는 단일 폼에서 여러 Submit 버튼을 사용하는 방법

답변

관련 문제