여러 페이지를 동일한 페이지로 제출

Question

페이지에 3 개의 양식이 있습니다. 각 파일에는 파일을 포함한 여러 입력이 있습니다. 마지막 폼을 제출할 때 세 폼의 입력이 모두 액션 위치의 POST 데이터로 보내지기를 바랍니다. 필요한 경우 jQuery를 사용할 수 있습니다.

Answer 1

유일한 옵션은 jQuery AJAX 요청 (또는 XMLHTTP의 요청이지만 권장하지 않음)입니다.

디자인을 다시 생각해보십시오. 즉, 한 페이지에 3 개의 양식이 필요한 이유는 무엇입니까? ... 저 역시 이미 'formy'입니다.

당신은 아마 할 수있는 뭔가가있다 ... 하나 개의 형태 안에 jQuery를 UI 대화 상자 컨테이너 사업부를 넣어 (이것은 내가 추측, 작동합니다)와 단지 내에서 필드가

Answer 2

당신이 그들을 제출 할 수는 숨겨진 Iframe에 호스트 페이지의 제어를 유지합니다.

세 가지 양식을 모두 제출하는 하나의 JS 함수를 작성할 수 있습니다.

Answer 3

serialize()을 사용하고 해당 문자열을 작업 URL에 추가 할 수 있습니다.

Answer 4

다음은 여러 양식을 하나로 결합하는 방법입니다. 이제 경고 : 파일 형식 입력이있는 양식이 두 개 이상있는 경우 문제를 해결할 수 없습니다. 브라우저는 XMLHttpRequest (예 : Ajax)를 사용하여 파일 입력이있는 다중 파트 양식 POST를 게시 할 수 없습니다. Javascript로 파일 입력 요소의 값을 설정할 수 없으므로 파일 입력이있는 새 양식을 작성할 수도 없습니다. 따라서 이것이 작동 할 수있는 유일한 방법은 여러 개의 (3 개) 형식이 있고 그 중 오직 하나만 파일 입력이있는 경우입니다. 이 경우 다른 두 양식의 모든 (파일이 아닌) 입력을 다른 양식으로 가져온 다음 제출하십시오.

function whenFormsCollide() { 
    // pass in one or more form elements 
    var forms = $.makeArray(arguments); 
    var hasFiles = 0, targetForm = null; 
    $.each(forms, function(i, f) { 
    if ($(f).find('input:file').length > 0) { 
     ++hasFiles; 
     targetForm = f; 
    } 
    }); 
    if (hasFiles > 1) throw "More than one form has 'file' inputs"; 
    targetForm = targetForm || forms[0]; 
    $.each(forms, function(i, f) { 
    if (f === targetForm) continue; 
    $(f).find('input, select, textarea') 
     .appendTo($(targetForm)); 
    }); 
    $(targetForm).submit(); 
} 

나는 것을 테스트하지 않은,하지만 난 그것을 여러 번 같은 물건을 해봤 나는 <form> 요소를 구축하는 것은 심지어 IE6에서는 잘 작동 것을 알고있다. (IE에는 때로는 양식 필드에 이상한 문제가 있지만이 부분은 괜찮을 것이라고 생각합니다. 최악의 경우 "appendTo"호출로 필드를 "옮길"수있는 대신에 이름과 이름을 복사해야합니다. 값을 입력하고 새로운 양식 필드를 만드십시오.)

Answer 5

정보를 다른 형태로 구분하고 나중에 JS와 정보를 결합 할 수 있습니까? 그리고 Java Script가 비활성화되면 수식이 작동하지 않습니까? 모두 하나의 형식으로 작성하십시오. 양식의 특수 데이터 필드 만 평가하려면 제출 단추가 눌려진 서버 측을 선택하십시오.

정상적인 통신 문제를 해결하기 위해 JS가 필요하면 문제가 생길 수 있습니다. JS는 사용자 정의하고 더 나은 UI를 제공하는 데 도움을 줄 수 있지만이 문제는 쓸모가 없습니다.

Answer 6

아래 코드를 사용하여 내 웹 사이트에서 두 가지 양식 데이터를 제출했습니다.

생각

당신이 여러 형태의 데이터이 serialize를 사용하여 해당 데이터를 결합하고 $.ajax 기능의 data 매개 변수에 그 균등하게 얻을 수 있다는 것입니다.

.

// submits two forms simultaneously 
function submit_forms(form1_id, form2_id) 
{ 
    var frm1_name = $("#" + form1_id).attr('name'); 
    var frm2_name = $("#" + form2_id).attr('name'); 

    if (frm1_name == frm2_name) 
    { 
     alert('The two forms can not have the same name !!'); 
    } 
    else 
    { 
     var frm1_data = $("#" + form1_id).serialize(); 
     var frm2_data = $("#" + form2_id).serialize(); 

     if (frm1_data && frm2_data) 
     { 
      $("#div_busy").html('<strong>Processing...</strong><br /><img id="busy" src="./images/progress_bar.gif" border="0" style="display:none;" />'); 
      $("#busy").fadeIn('slow'); 

      $.ajax(
      { 
        type: "POST", 
        url: "process_sticker_request.php", 
        data: frm1_data + "&" + frm2_data, 
        cache: false, 

        error: function() 
        { 
         $("#busy").hide('slow'); 
         $("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'}); 
         $("#div_busy").html('Request Error!!'); 
        }, 
        success: function(response) 
        { 
         $("#div_busy").hide('slow'); 
         $("#hdnFormsData").html(response); 

          // open popup now with retrieved data 
          window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1'); 
          document.getElementById("prt").action = 'win_sticker.php'; 
          document.getElementById("prt").target = 'popup2'; 
          document.getElementById("prt").submit(); 

          // reset the action of the form 
          document.getElementById("prt").action = 'list_preview.php'; 

        } 
      });     
     } 
     else 
     { 
      alert('Could not submit the forms !!'); 
     } 
    } 
}