Have two forms not submitted using javascript

Question

I have two forms in this page and I want that second form will be automatically submit on image change of file type. I am using

onchange="alert('hell'); document.getElementById('img_upload').submit();"

The message is alerted successfully but form is not submitted. I don't think any thing is missed.

<html>
    <head>
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.Jcrop.min.js"></script>
        <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
    </head>
    <body>
    <form id='slider_img' name='slider_img' action='class_file_for_crop_image.php' enctype="multipart/form-data"> 
        <img src="pool.jpg" id="target" />
        <br><input type='text' value='rah_default' name='img_name' />

        <br><br><input type='submit' value='Subm' />
        <br><input type='button' onclick='' />
    </form>
    <form id='img_upload' name='img_uploadd' method="POST" action='upload_img.php' enctype="multipart/form-data"> 
        <input type='file' name='fileToUpload' onchange="alert('hell'); document.getElementById('img_upload').submit();" />
        <input type='submit' name='submit' />
    </form>
.

    </body>
    <script language="Javascript">


     var global_cords_var = {
  "x1" : 0,
  "y1" : 0,
  "x2" : 0,
  "y2" : 0,
  "w"  : 0,
  "h"  : 0,
};



     jQuery(function($) {
        $('#target').Jcrop({
            onSelect: showCoords,
            bgColor:     'black',
            bgOpacity:   .6,
            setSelect:   [ 100, 100, 300, 300 ],
            aspectRatio: 1/1


        });
    });


         function showCoords(c)
          {

              // variables can be accessed here as
           //   alert( "x->"+c.x+", y->"+ c.y+ ", x2-> "+c.x2+", y2-> "+ c.y2+", w-> "+ c.w +", h-> "+ c.h);
            global_cords_var['x1'] = c.x;
            global_cords_var['y1'] = c.y;
            global_cords_var['x2'] = c.x2;
            global_cords_var['y2'] = c.y2;
            global_cords_var['w'] = c.w;
            global_cords_var['h'] = c.h;
        //  prin_r();
          }
  /*  
    function prin_r(){
        alert( "rahul x->"+global_cords_var['x1']+", y->"+ global_cords_var['y1']+ ", x2-> "+global_cords_var['x2']+", y2-> "+ global_cords_var['y2']+", w-> "+ global_cords_var['w'] +", h-> "+ global_cords_var['h']);
    }
    */
    /////////////////////ajax upload////////////////////
        $(document).ready(function (e){
        $("#slider_img").on('submit',(function(e){

        e.preventDefault();
        $.ajax({
            url: "class_file_for_crop_image.php?x1="+global_cords_var['x1']+"&y1="+global_cords_var['y1']+"&x2="+global_cords_var['x2']+"&y2="+global_cords_var['y2']+"&h="+global_cords_var['h']+"&w="+global_cords_var['w'],
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){

            //$("#targetLayer").html(data);
            alert(data);

        /*
            var j_obj = JSON.parse(data);
            document.getElementById("data_html").innerHTML = '';
            alert(j_obj.query);
            document.getElementById("data_html").innerHTML = j_obj.html_data;
            document.getElementById("rahul").innerHTML = j_obj.query;
        */
        //  document.writeln(j_obj.query);

            },
            error: function(){alert('error');}          
            });
        }));
    });
    //////////////////////ajax upload////////////////////////
        /////////////////////ajax upload image first////////////////////

        $(document).ready(function (e){
        $("#img_upload").on('submit',(function(e){

        e.preventDefault();
        $.ajax({
            url: "upload_img.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
                alert('rahu succ');
            //$("#targetLayer").html(data);
            //alert(data);

        /*
            var j_obj = JSON.parse(data);
            document.getElementById("data_html").innerHTML = '';
            alert(j_obj.query);
            document.getElementById("data_html").innerHTML = j_obj.html_data;
            document.getElementById("rahul").innerHTML = j_obj.query;
        */
        //  document.writeln(j_obj.query);

            },
            error: function(){alert('error');}          
            });
        }));
    });
    //////////////////////ajax upload////////////////////////



    </script>
</html>

`form is not submitted` - Does your `$("#img_upload").on('submit'` function not fire? Do you see the AJAX request in network tools? Have you put a breakpoint in? — CodingIntrigue, May 03 '15 at 07:49
it's same copy of ` $("#slider_img").on('submit' ` and its working fine — rahul chaurasia, May 03 '15 at 07:56
I asked did it fire, did you put a breakpoint in & do you see any AJAX requests in the network tabs - not if it *should* work. — CodingIntrigue, May 03 '15 at 07:58
not fired on change image. But its fired when click on submit button and valus succesfully return via ajax on page — rahul chaurasia, May 03 '15 at 08:08

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Here is working code (plunker sample):

<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<form id='slider_img' name='slider_img' enctype="multipart/form-data"> 
    <br><input type='text' value='rah_default' name='img_name' />

    <br><br><input type='submit' value='Subm' />
    <br><input type='button' onclick='' />
</form>
<form id='img_upload' name='img_uploadd' enctype="multipart/form-data"> 
    <input type='file' name='fileToUpload' onchange="submitForm()" />
    <input type='submit' name='submitBtn' />
</form>

</body>
<script language="Javascript">

var submitForm = function() {
  alert('hell');
  $("#img_upload").submit();
}

/////////////////////ajax upload////////////////////
$(document).ready(function (){
  $("#slider_img").on('submit',(function(e){
    alert(data);
    e.preventDefault();
  }));

  $("#img_upload").on('submit',(function(e){
    alert('rahu succ');
    e.preventDefault();
  }));
});
//////////////////////ajax upload////////////////////////



</script>
</html>

For sake of simplicity, I've changed ajax calls to alerts.

Here is the steps to I've done make this code to work:

Form with id='img_upload' the second child input had name 'submit', which should be avoided, so I changed it to submitBtn. (See this so answer for more details)
I moved onchange handler code to separate function submitForm and triggered form submit via jquery : $("#img_upload").submit();, so now handler is invoked correctly.

Hope this help

well thanks i replaced my code with yours then its working. but when i try to change name of submit btn it was not worked. can you clear it why. well its not big matter. — rahul chaurasia, May 04 '15 at 03:21

Have two forms not submitted using javascript

1 Answers1