> I am working on an ajax app that uses jquery's form plugin and it works just
> fine until I add a file upload input into my form:
> <input type="hidden" name="MAX_FILE_SIZE" value="2097152" />
> <input name="viscritfile" type="file" maxlength="300" />
>
> If I take these input fields out, my form works fine and submits and saves
> no problem. But once I added these parts to my form html, the jquery form
> plugin hiccups. I don't get any sort of error. Instead, my form just
> disappears without any data getting submitted. It's like jquery started the
> submit process but didn't finish.
>
> I read something about the form plugin using an iframe for uploads but I'm
> not sure I understand if I am supposed to do anything special to get the
> submit to work. I'm sure I'm missing something here.
>
> HTML:
> <div id="postcomment-75057"><div class="commentform">
> <form id="commentform-75057" name="commentform-75057"
> enctype="multipart/form-data" method="post"
> action="/comments/ajax_comments.php">
> <textarea rows="6" cols="55" name="post"/>
>
> <!-- My file input -->
> <input type="hidden" value="2097152" name="MAX_FILE_SIZE"/>
> <input type="file" maxlength="300" name="viscritfile"/>
>
> <input type="hidden" value="75057" name="r_parent"/>
> <input type="hidden" value="post" name="action"/>
> <input type="hidden" value="art" name="medium"/>
> <input type="hidden" value="21148" name="mediumid"/>
> <input type="submit"
> onclick="javascript:submit_comment_form('postcomment-75057','commentform-75057')"
> value="Submit"/>
> </form>
> </div>
> </div>
>
> -------------------------
> jquery
>
> function submit_comment_form(divid,form){
> target = '#'+divid;
> xmlFile = "http://www.paperdemon.com/comments/ajax_comments.php";;
> form ='#'+form;
> jquery_ajax_form_submit(xmlFile, target, form);
>
> }
>
> function jquery_ajax_form_submit(xmlFile, target, form){
> loadingTarget = "loading";
> var options = {
> target: target,
> beforeSubmit: function(formData, jqForm){
> $(target).html('<div
> class="loading">Loading...</div>');
> return true;
> },
> success: function(responseXML, statusText){
> var message = $('message',
> responseXML).text();
> $(target).html(message);
> },
> dataType: 'xml',
> url: xmlFile,
> type: 'post',
> resetForm: true
>
> };
> $(form).ajaxSubmit(options);
>
> }
The form is not submitted or the success handler is not getting
invoked? Does this happen in all browsers? Can you create a small
sample page the demonstrates the problem?
