Create a form dynamically

Question

I'm facing an issue. I have a javascript function which generates a form (using function append()). I'm basically trying to create a form with a submit button, and when this button is pressed, a php function is called, charged to do some stuff. But, It's not working, when I press the submit button, nothing happens.

Though, I know this code actually works, because I ran it on an empty project, and WITHOUT using function append().

Some my question is : Does generating dynamically a form using append() prevents my php file to be called? If it does, is there a way to make it work? If not, any idea why it's not working and how to do it using another way?

Here is the javascript code :

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: The php file only contains a echo "lol"; , for testing.

Answer 1

The issue here is that the elements appended after form element are treated as siblings of form, rather than children elements. Here is a work around:

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

The real problem is how the append() method actually appends HTML to the document tree on the page. If you append broken or incomplete HTML in a single call, the browser has to do something to fix it. For instance, you append the opening <form> tag in one call, then the closing tag in the last call. This creates an unbalanced document tree. The browser has a couple of choices to make:

1. Automatically close the <form> tag
2. Throw an error because it is trying to parse invalid HTML.

Instead, you want to make 1 call to append(), and prior to that concatenate strings in JavaScript:

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(""));
}

Now the browser can parse properly formed HTML.

An alternative is to use a client side template inside a <script> tag:

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