souki souki - 2 months ago 16
Javascript Question

Create a form dynamicaly

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

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