Question

I have the following form:

<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input name="uploadedfile" type="file" />
</form>

Once a user has clicked the uploadedfile input and selected a file, they then can click this button on a different area of the page:

<a id="button">My button</a>

How can clicking My button, how can it trigger the upload of the form? Important: cannot be within the form and can’t be an input element. This must also be an ajax style operation with no reloading of the page if possible.

Answer 1

You can give the form an ID (or use one of the many variations to select the form):

<form id="myForm" [...] >

and with jQuery submit the form:

$('#myForm').submit();

You’ll want the submit functionality to be within a click event of the button:

$('#button').click(function(){
    $('#myForm').submit();
});

Update

To submit your form using ajax you can do the following:

$('#button').click(function(){
      var form = $('#myForm');
        $.ajax({
          url: form.attr('action').val()  ,
          type: 'POST' ,
          data: form.serialize()
        });
    });

If you’re uploading files as it seems you might be, you might want to look at one of the following jQuery plugins:

• jQuery Ajax File Upload Plugin
• Multiple File Upload Plugin