동적 인 모양 만들기

Question

문제가 있습니다. 함수 (append())를 사용하여 양식을 생성하는 자바 스크립트 함수가 있습니다. 기본적으로 제출 버튼을 사용하여 양식을 만들려고합니다.이 버튼을 누르면 PHP 기능이 호출되어 일부 작업을 수행하도록 청구됩니다. 하지만 작동하지 않습니다. 제출 버튼을 누르면 아무 일도 일어나지 않습니다.

비록이 프로젝트가 빈 프로젝트에서 실행 되었기 때문에이 코드가 실제로 작동한다는 것을 알았지 만, 함수 append()을 사용하지 않았습니다.

제 질문은 : append()을 사용하여 동적으로 양식을 생성하면 내 PHP 파일을 호출 할 수 없습니까? 그렇다면 작동하도록하는 방법이 있습니까? 그렇지 않은 경우 왜 작동하지 않는지, 다른 방법으로 사용하는 방법에 대해 알고 있습니까?

function create_user() { 
    var id = document.getElementById("right-well"); 
    $(id).empty().append("<h1 class='title'>Users</h1>"); 
    $(id).append("<div class='line-title'></div>"); 
    $(id).append("<div class='add-user'>Add User</div>"); 
    $(id).append("<form action='../upload.php' method='post' enctype='multipart/form-data'>"); 
    $(id).append("<h4 class='user-name-text'> Name :</h4>"); 
    $(id).append("<h4 class='user-mail-text'> E-mail :</h4>"); 
    $(id).append("<h4 class='user-status-text'> Status :</h4>"); 
    $(id).append("<h4 class='user-picture-text'> Picture :</h4>"); 
    $(id).append("<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>") 
    $(id).append("<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>") 
    $(id).append("<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>") 
    $(id).append("<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>") 
    $(id).append("<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>") 
    $(id).append("</form>") 
} 

PS : PHP 파일은 테스트 용으로 만하는 echo "lol";을 포함

여기에 자바 스크립트 코드입니다.

Answer 1

form 요소 뒤에 추가 된 요소는 하위 요소가 아닌 form의 형제로 처리됩니다. 여기에 주변의 작업은 다음과 같습니다

function create_user() { 
    var id = document.getElementById("right-well"); 
    $(id).empty().append("<h1 class='title'>Users</h1>"); 
    $(id).append("<div class='line-title'></div>"); 
    $(id).append("<div class='add-user'>Add User</div>"); 
    $(id).append("<form action='../upload.php' method='post' enctype='multipart/form-data'></form>"); 

    var form = $(id).find("form"); 

    $(form).append("<h4 class='user-name-text'> Name :</h4>"); 
    $(form).append("<h4 class='user-mail-text'> E-mail :</h4>"); 
    $(form).append("<h4 class='user-status-text'> Status :</h4>"); 
    $(form).append("<h4 class='user-picture-text'> Picture :</h4>"); 
    $(form).append("<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>") 
    $(form).append("<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>") 
    $(form).append("<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>") 
    $(form).append("<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>") 
    $(form).append("<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>") 
} 

Answer 2

append() 방법은 실제로 페이지의 문서 트리에 HTML을 추가하는 방법을 진짜 문제입니다. 한 번의 호출로 끊어진 HTML이나 불완전한 HTML을 추가하면 브라우저는이를 해결하기 위해 무엇인가를해야합니다. 예를 들어, 한 번의 호출에 <form> 태그를 추가 한 다음 마지막 호출의 마지막 태그를 추가합니다. 이렇게하면 불균형 문서 트리가 만들어집니다. 브라우저 선택의 몇 할이 있습니다

1. 은 자동으로 무효 HTML을 구문 분석하려고하기 때문에 오류를 던져 <form> 태그
2. 을 닫습니다.

대신 append() 1 개 통화를하려면, 이전 자바 스크립트에서 그 CONCATENATE 문자열에 :

function create_user() { 
    var $id = $("#right-well"), 
     markup = [ 
     "<h1 class='title'>Users</h1>", 
     "<div class='line-title'></div>", 
     "<div class='add-user'>Add User</div>", 
     "<form action='../upload.php' method='post' enctype='multipart/form-data'>", 
      "<h4 class='user-name-text'> Name :</h4>", 
      "<h4 class='user-mail-text'> E-mail :</h4>", 
      "<h4 class='user-status-text'> Status :</h4>", 
      "<h4 class='user-picture-text'> Picture :</h4>", 
      "<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>", 
      "<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>", 
      "<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>", 
      "<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>", 
      "<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>", 
     "</form>" 
     ]; 

    $id.empty() 
    .append(markup.join("")); 
} 

이제 브라우저가 제대로 형성 구문 분석 할 수있는 HTML.

대안은 <script> 태그 내에 클라이언트 측 템플릿을 사용하는 것입니다 : 그것은 형태가 만들어 _how_ 중요하지 않습니다

<script type="text/javascript"> 
    function create_user() { 
     var $id = $("#right-well"), 
      markup = document.getElementById("add-user-template").innerHTML; 

     $id.empty() 
     .append(markup); 
    } 
</script> 

<script type="text/html" id="add-user-template"> 
    <h1 class='title'>Users</h1> 
    <div class='line-title'></div> 
    <div class='add-user'>Add User</div> 
    <form action='../upload.php' method='post' enctype='multipart/form-data'> 
    <h4 class='user-name-text'> Name :</h4> 
    <h4 class='user-mail-text'> E-mail :</h4> 
    <h4 class='user-status-text'> Status :</h4> 
    <h4 class='user-picture-text'> Picture :</h4> 
    <input class='user-name-input' id='new_user_name' placeholder='Name...'></input> 
    <input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input> 
    <input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input> 
    <input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input> 
    <button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button> 
    </form> 
</script>