提交更改后的Ajaxform

Question

I have an Ajax form that I need to submit as soon as the user selects an image. The problem is that the form is not submitting. Please any guidance will be appreciated

--The form ---

<form id="bgimageform" method="post" enctype="multipart/form-data" action="process.php">
    <div class="uploadFile timelineUploadBG">
        <input type="hidden" name = "bkg" value = "1"/>
        <input type="file" name="photoimg" id="bgphotoimg" class="custom-file-input">

    </div>

</form>

--- The JS Codes ---

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="js/jquery.wallform.js"></script>
<script>
$(document).ready(function() {

  /* Uploading Profile BackGround Image */
  $('body').on('change','#bgphotoimg', function() {

    $("#bgimageform").ajaxForm({target:'#timelineBackground'}).submit();

  });
});
</script>

Answer 1

You are right, that first attempt was way off.

Anyways, I've run some tests, and it seems if you do this, it works.

$('body').on('change','#bgphotoimg', function() {
    alert("It should have submitted.");
});

Here is a fiddle demonstrating it. http://jsfiddle.net/gt9e160f/

So I would have to point toward your method of submit, because the on change is definitely being called.

I've never used jquery.form.js before, but from their docs I've pulled this:

$(function(){

    //bind the form's submit to ajaxForm
    $("body").on('submit', '#bgimageform', function(e){
        $(this).ajaxForm({target:'#timelineBackground'});
        e.preventDefault();
        return false;
    });

    /* Uploading Profile BackGround Image */
    $('body').on('change','#bgphotoimg', function() {
        //submit the form
        $("#bgimageform").submit();
    });
});