Unable to Override form.submit()

Question

I'm trying to override the form submit to send an ajax request but it is not working. when i simply call submit() the page gets redirected.

I'm trying to implement something like this.

could it be a jquery version problem or i'm using it wrong.

this is my try :

$('#fileUploadField').on("change", function() {
    $("#upload_file").submit(function(e) {
         alert("override");
      e.preventDefault();
    });
});

.hidden2{
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    font-size: 50px;
    cursor: pointer;
    opacity: 0;
    -moz-opacity:0;
    filter: Alpha(Opacity=0);
}
img.fileDownload
{
    height: 26px;
    width: 26px;
    padding: 0;
    display: inline-block; 
    vertical-align: middle;
    margin: 0 4px 0 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}
div.hiddenFileInputContainter
{
    position: relative;
    display: inline-block;
    width: 27px;
    height: 27px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
}

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="upload_file" action="upload.php" method="post" enctype="multipart/form-data">
  <div class="hiddenFileInputContainter">
    <img class="fileDownload" src="http://b.dryicons.com/images/icon_sets/coquette_part_2_icons_set/png/128x128/attachment.png" width="10"   height="10">
    <input id="fileUploadField" type="file" name="uploaded_file" class="hidden2">
    </form>

score 0 · Answer 1 · answered Jan 18 '17 at 18:23

I don't know for sure if this will work, I see that you're already using e.preventDefault(); -- you could try using return false instead to see if that might work instead.

Your jQuery submit() function seems setup correctly. Does the alert fire off? (to confirm the submit function is actually working)? If the alert is not firing off, it could be an issue with the jQuery above it, ie, the $('#fileUploadField').on("change", function() {...} component.

Another option might be to try to use a more recent version of jQuery and see if this makes any difference (if indeed both functions are executing and the alert is firing off)...

I've tried to return both true and false , and used the latest jquery still not working , the onChange event is being called, and when using only submit() ,the submitting is fired correctly — Ahmed na, Jan 18 '17 at 18:30

Gideon Pyzer · Accepted Answer · 2017-01-18T18:48:51.570

0

I'm not exactly sure what you are after, but if you want to only override the form action based on the change handler of the file upload field, you can do the following:

$("#upload_file").submit(function(e) {
    if (this.id === 'upload_file') {
        e.preventDefault();
        // do ajax here;
        alert(this.id);
    } 
});

$('#fileUploadField').on("change", function(e) {
    $("#upload_file").submit();
});

edited Jan 18 '17 at 18:48

answered Jan 18 '17 at 18:32

Gideon Pyzer

22,610
7
62
68

worked ! , apparently I should override it before calling it (which is weird) ,and i'm trying to upload files without leaving the page is there a better way ? – Ahmed na Jan 18 '17 at 18:54
1

If you don't want to leave the page, ajax is required to make the requests rather than submitting the whole form to the backend (i.e. your `upload.php` action). In your Ajax request, serialize your form data and post it to your backend. The success handler of your ajax request can perform client side work with the data returned from the backend. See http://api.jquery.com/jquery.ajax/ – Gideon Pyzer Jan 18 '17 at 19:07
I see ,actually I think I don't a form only a input file and on change event are enough to call the ajax . – Ahmed na Jan 18 '17 at 19:23

Unable to Override form.submit()

2 Answers2