.submit() without reloading page

Question

I am trying do some file upload using jquery. The upload box have to be in the dialog box. Now I just want to know after I click on the dialog's upload button. How can I submit yet the page do not load. I tried using this $('#uploadForm').submit().preventDefault(); It has not action at all.

html

<script>
                $( "#dialog-upload" ).dialog({
                autoOpen: false,
                height: 200,
                width: 350,
                modal: true,
                buttons: {
                "Upload": function() {                  
                    var bValid = true;
                    bValid = bValid && checkCSV()
                    if(bValid){
                        **$('#uploadForm').submit().preventDefault();**

                        }
                $( "#dialog-upload" ).dialog( "close" );
                        },
            Cancel: function() {                
                allFields.val( "" ).removeClass( "ui-state-error" );
                $( this ).dialog( "close" );
            }
                },
            close: function() {
                allFields.val( "" ).removeClass( "ui-state-error" );
                $( this ).dialog( "close" );    

                }
                });
</script>

  <div id="dialog-upload" title="Upload csv file">
    <form>
    <fieldset>
        <form action='ajax.php' id = 'uploadForm' method='post' enctype='multipart/form-data'>
        <input type="text" name="file" id="fileUpload" size = 30 class="text ui-corner-all" />
        </form>
    </fieldset> 

    </form>
</div>

php

if (isset($_FILES['file'])) {
echo "success";
}

Is loading the form through jquery required? or could you simply make the form, then use `onsubmit="javascript: mySubmitMethod(); return false;"` on the `
` element. The `return false;` removes the submission from the form so the page doesn't refresh. Also setting the `action=""` should help. — SnareChops, Jan 14 '13 at 02:59
load form through jquery from is required. As mention this form have to be presented in a dialog form — user1761160, Jan 14 '13 at 03:30

score 2 · Answer 1 · answered Jan 14 '13 at 02:42

Use the EVENT delegation for your form submit

$('#uploadForm').submit(function( e ){
  e.preventDefault(); // browser 'submit' event behavior prevented
});

Than do:

"Upload": function() {                  
    var bValid = true;
    bValid = bValid && checkCSV()
    if(bValid){
       $('#uploadForm').submit();
    }
    // ......

score 0 · Accepted Answer · answered Jan 14 '13 at 02:43

0

You can bind something to the submit event prior to submitting.

$(function() {
    $('#uploadForm').submit(function(evt) {
        evt.preventDefault();
    });
});

Then just call .submit() without the preventDefault() in your original location.

answered Jan 14 '13 at 02:43

beezir

460
3
10

This method did not pass any value to the php script. – user1761160 Jan 14 '13 at 04:01
Anyone can help me on this? – user1761160 Jan 14 '13 at 07:09
My apologies, I completely missed that you were uploading files. If you want to upload a file via ajax, it gets a little more complicated than simply submitting a form. Form submissions can be done easily with a straight jQuery.post (or jQuery.ajax) call. For a file upload, you may want to look into using a plugin. This stack overflow question has a lot of good resources attached to it: http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery – beezir Jan 14 '13 at 16:15

.submit() without reloading page

2 Answers2