AjaxForm not working in Safari and Chrome

Question

This javascript works in FF but not safari or Chrome:

$('#image').change(function() {
    $('#imageform').ajaxForm({
       target: '#preview',
       success: function() { 
          alert('works!');
       }
    }).submit();
});

Here is the HTML form:

<form id="imageform" method="post" enctype="multipart/form-data" action="/admin/ajaxImage/">

Please help me get it to work in Safari and Chrome!

EDIT:

I found my problem. I have a form inside a form, which prevents it from working. Thank you all for all of your suggestions.

Answer 1

you should use the ajaxSubmit function, the code to send a POST a request:

$("#imageform").ajaxSubmit({
    url: 'ServerSidePage.php',
    type: 'post',
    success: function() 
    { 
      alert("works!");
    }
});

EDIT: might check this out also:

$('#imageform').ajaxForm({
  success: function(response, statusText) {
    $('#preview').html(response);
  }
});

i don't know what "#preview" is, might change it to "append" or whatever you need.

Answer 2

Calling .ajaxForm() sets up event listeners to handle submissions.
You should never call it more than once.

To use invoke the plugin by hand, call ajaxSubmit() instead.

For more information, see the documentation.