How can I use jQuery to trigger a form submit?

Question

Consider this form:

HTML:

<form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile" target="hiddenIframe">
    <input type="file" name="files" id="files">
    <input id="fileUploadButton" type="submit" name="upload" value="Upload File">
    <iframe name="hiddenIframe" id="hiddenIFrame"></iframe>
</form>
<div id="myButton" onclick="submitFile()">Submit</div>
<input type="hidden" id="fileID" value="">

The following jQuery script will allow me to upload the file:

<script> 
    $(document).ready(function() { 
        $('#fileUploadButton').click(function(){
            $('#uploadFile').submit();
        });
    }); 
</script>

After the script is run the id (from the database) of the newly uploaded file is inserted into the hidden input field with id="fileID" All of this works fine. However, what I want to do is trigger the above form submission by clicking on <div id="myButton">

function submitFile() {
    $(document).ready(function() {
        if ($('input[name=files]').val() != "")
        {
            $('#uploadFile').submit(function(){
                $.ajax({
                    type: "POST",
                    url: 'my_file.php',
                    success: function(data){
                        $('#fileID').val(data);
                    }
                });
            });
        }
    });
}

I'm unable to get the above script to work. The file upload form is NOT submitted. Any suggestions on how to get this to work?

UPDATE: I removed onclick="submitFile()" from the button and tried this, but it doesn't work. Why?

<script>
    $(document).ready(function() { 
        $(document).on('click','#myButton',function(){
            $('#uploadFile').submit(function(){
                    $.ajax({
                        type: "POST",
                        url: 'my_file2.php',
                        success: function(data){
                            $('#fileID').val(data);
                        }
                    });
                });
            });
        });
</script>

UPDATE 2: If I click on the file submit button (id="fileUploadButton"), then the form is submitted in the iframe, as it should be. But, if I try to use my updated script (from UPDATE:... above) to submit the form by clicking on the button (id="myButton"), then it doesn't work.

Answer 1

EDIT

If you look in the browsers console, can you see the logs?

$(document).on('click', '#myButton', function() {
   console.log('click');
   $('#uploadFile').submit(function(e){
       e.preventDefault();
       console.log('submit');
   });

   return false
});

---

Try this using on() instead, also depends if you want to do a postback of the page then you dont need the on() and ajax

$('#uploadFile').on('click', function(){
                $.ajax({
                    type: "POST",
                    url: 'my_file.php',
                    success: function(data){
                        $('#fileID').val(data);
                    }
                });

        return false;
 });

Answer 2

You don't need any event handler in the first place; an <input type="submit"> is already going to submit the form. As for the other button, just have it do what you originally had for the first button:

$(document).ready(function() {
    $('#myButton').click(function() {
        $('#uploadFile').submit();
    });

    $('#uploadFile').submit(function() {
        $.ajax({
            type: "POST",
            url: 'my_file.php',
            success: function(data) {
                $('#fileID').val(data);
            }
        });
    });
});

Then you attach the submit handler at the same time as you attach the click handler. No handlers are attached dynamically here.

To stress the point: #fileUploadButton doesn’t need JavaScript to do what it does naturally.

P.S. Don’t you want your Ajax request to actually contain something?