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.

• Charlie: Why are you putting .ready() within a function? Also, wouldn't it make sense to put the if statement within the .submit statement?
• Dejan.S: You should use return false on the click. You can also use console.log('test'); to see if the click works and submit, comment out the ajax()

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

• Nancy Collier: I tried an updated script that I added above, but it doesn't work. I can't figure out why.
• Nancy Collier: No error. The form just isn't submitting. The file is not stored in the database, and the file id is not stored in the id="fileID" hidden field. But I know my php script works, so it can't be that. For some reason, the updated jquery script that I added simply is not submitting the form ($('#uploadFile').submit(function(){...).
• Dejan.S: Note that a fileupload does not work with ajax, you can read this tutorial that uses php net.tutsplus.com/tutorials/javascript-ajax/…, or just use the plugin malsup.com/jquery/form

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?