Form submitting automatically without click

Question

Hi I am using below code to create form dynamically in a div by clicking create form button

$('#'+id).append('<div id="FileUpload"><fieldset><legend>Upload File To Iseries Server</legend><form id="FileUploadForm" action="" method="post" enctype="multipart/form-data"><label for="fileName">Select File: </label><input id="fileName" type="file" name="files" size="30" multiple /><br/><input type="submit" name="UploadFile" value="Upload" id="FileUploadButton"/></form></fieldset></div>');

I want to get value of input box so i added code :

$("input[name=UploadFile]").live("click",function(){
            $("input[name=files]").change(function() {
                alert($(this).val());   
            });

        });

Now the problem is everytime when i am clicking create form button its directly calling my click function mentioned above and then displaying form . Now when i click upload button it doesn't show me alert message .It is now going in click event in debug . Please help me out ! Help is appreciated!

Answer 1

Both "input[name=files]" and "input[name=UploadFile]" are dynamically created. You should create delegated event handlers for both of them.

Another problem with your code is you add event handler for "input[name=files]" each time "input[name=UploadFile]" is clicked, this could cause problem of multiple event handler being added.

This line: $("input[name=files]").change(function() { just adds event handler, that's why you don't see the alert

Also try $.on instead of live as live is deprecated:

$(document).on("change","input[name=files]",function(){
    alert($(this).val());  
});

$(document).on("click","input[name=UploadFile]",function(){
            $("input[name=files]").trigger("change"); //trigger event instead of add event handler like in your code.
});