ダイナミックにフォームを作成

Question

私は問題に直面しています。私は（関数append()を使用して）フォームを生成するjavascript関数を持っています。私は基本的には送信ボタンでフォームを作成しようとしています。このボタンを押すと、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";が含まれています。ここ

javascriptのコードがあります。

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を追加する方法です。 1回の呼び出しで壊れたHTMLや不完全なHTMLを追加した場合、ブラウザは何かを修正しなければなりません。たとえば、1つのコールでオープニング<form>タグを追加し、最後のコールで終了タグを追加します。これにより、アンバランスなドキュメントツリーが作成されます。ブラウザは選択肢のカップルが作ることがあります。

1. は自動的に無効なHTMLを解析しようとしているため、エラーを投げ<form>タグ
2. を閉じます。

代わりに、あなたは1つのappend()への呼び出し、前JavaScriptでその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>タグ内のクライアント側のテンプレートを使用することです：

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