jQuery로 양식을 하나씩 제출 하시겠습니까?

Question

여러 제출을 차례로 실행하도록 자동화 된 대기열 시스템을 설정하려면 어떻게해야합니까? 한 번에 제출하지 않거나 백엔드 PHP 스크립트가 손상 될 수 있습니다.

각 양식을 독립적으로 제출할 수 있다고 가정하면 간단한 예가 있습니다. 마스터 제출은 모든 양식을 연속적으로 실행합니다.

<input type="submit" id="submit_all" value="Submit All" /> 

<form id="form-1" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-2" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-3" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

UPDATE :

내가 일하고 있어요 스크립트는 백업 FTP 파일과 여러 웹 사이트의 MySQL의 덤프 도구 - 웹 관리자를위한 본질적으로 자동화 된 백업 도구를.

각 양식에는 각 사이트의 FTP 및 MySQL에 연결할 값이 들어 있으며 PHP 함수는 파일을 로컬로 복사하여 저장하고 MySQL 덤프를 만듭니다.

파일을 복사하는 데 사이트 당 20 분 이상 걸릴 수 있으므로 각 백업을 차례로 자동화하기 위해 '마스터 버튼'을 만드는 것이 좋습니다.

Answer 1

이 jQuery 예제를 사용해 볼 수 있습니다. 나는 그것을 즉석에서 코딩 했으므로 테스트를 거치지 않았다. 그러나 당신은 내가하려는 것을 얻는다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
var state = false; 

$(document).ready(function() { 
    $('#submit_all').click(function() { 
     go(); 

     // get all forms on the page 
     $forms = $('form'); 
     sent = 0; 

     // post the form (non-async) 
     $forms.each(function() { 
      if(state) { 
      $.ajax({ 
       type: "post", 
       async: false, 
       url: $(this).attr("action"), 
       data: $(this).serialize(), 
       success: function(data) { 
        if(++sent == $forms.length) { 
         alert("All forms submitted!"); 
        } 
       } 
      }); 
      } else { return false; } 
     }); 
     stop(); 
    }); 

    $('#cancel').hide().click(stop); 

    function go() { 
     if(!state) { 
      state = true; 
      $('#submit_all').hide(); 
      $('#cancel').show(); 
      $('input[type=button], input[type=submit]').attr("disabled", "disabled"); 
    }} 

    function stop() { 
     if(state) { 
      state = false; 
      $('#submit_all').show(); 
      $('#cancel').hide(); 
      $('input[type=button], input[type=submit]').removeAttr("disabled"); 
    }} 
}); 
</script> 

<input type="button" id="submit_all" value="Submit All" /> 
<input type="button" id="cancel" value="Cancel" /> 

<form id="form-1" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-2" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

<form id="form-3" method="post" action="function.php"> 
<input type="text" name="foo" value="Foo" /> 
<input type="submit" value="Submit" /> 
</form> 

Answer 2

이렇게하려면 단순히 일련의 제출이 될 간단한 자바 스크립트를 설정해야합니다.

function submitAll() { 
    document.forms["form-1"].submit(); 
    document.forms["form-2"].submit(); 
    document.forms["form-3"].submit(); 
} 

분명히 양식을 제출하면 자바 스크립트 실행이 중단되므로 프로세스를 조제해야 할 수도 있습니다.

본인 대신 논리 오류가있는 것으로 보이는 다른 답변에 동의하며 문제를 해결하기 위해 양식을 통합하는 대신 양식을 통합해야합니다.

Answer 3

하나의 양식이 두 개의 다른 양식에 의존하는 경우 실제로는 같은 양식의 일부인 것처럼 들리며 백엔드는 해당 메가 양식의 다른 부분을 알아 내야합니다. 하나의 양식)이 필요합니다. 비슷한 메모에서, 어쨌든 자바 스크립트 만 의존하지 않는 것이 가장 좋습니다. 이렇게하면 자동으로 더욱 강력한 솔루션을 얻을 수 있습니다.

업데이트 데이터를 공유하는 양식이 여러 개인 경우 (form3이 필요로하는 form1 및 form2의 데이터를 변경할 수있는 것처럼), 특히 유효성 검사의 관점에서 보면 공유 된 것을 숨겨진 요소에 넣는 것이 더 안정적입니다. 양식을 별도로 두십시오. 사용자가 제출하고 사용한 데이터를 입력 한 다음보기에서 숨기는 것은 입력 실수를 쉽게 범할 수 있기 때문에 최적이 아닙니다 (쉽게 검토 할 수 없으며 모든 내용이 제출 될 것임을 이해하지 못할 수 있습니다). < 입력 유형 = "숨김"/ 공유 정보를 사용하면 우연히 변경하지 못하기 때문에이를 완화합니다. (세션에 또는 원하는대로 저장하십시오. 요점은, 의존하고있는 정보를 변경하지 못하게하고 실수를 쉽게 감지 할 수 없기 때문입니다.)

양식 요소가 값을 반환합니다. (true/false)를 입력해야합니다. here

Answer 4

$("#submit_all").click(function(){ 
    $("#form-1").submit(); 
    $("#form-2").submit(); 
    $("#form-3").submit(); 
}) 

에서

당신이 (다시/전면) 응용 프로그램을 재 설계하기에 어쩌면 더 나은?

<form method="post" action="./function.php"> 
    <input type="text" name="foo[]" value="Foo" /> 
    <input type="text" name="foo[]" value="Foo" /> 
    <input type="text" name="foo[]" value="Foo" /> 
    <input type="submit" id="submit_all" value="Submit All" /> 
</form>