Simple form submit doesn't work

Question

Hi have very simple html with form, but submitting doesn't work. I checked multiple solutions I found on stackoverflow, but still doesn't work.

<form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data">
    <fieldset>                  
        <div class="control-group">
           <div class="control-label">
               <label>Excel File:</label>
           </div>
            <div class="controls">
                <input type="file" name="file" id="file" class="input-large">
            </div>
        </div>

        <div class="control-group">
            <div class="controls">
                <input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading...">Upload</input>
            </div>
        </div>
    </fieldset>

And JavaScript in the same file:

<script type="text/javascript" language="javascript" >
    $(document).ready(function (e) {
         $('#btn').on('submit',(function(e) {
             alert('test');
        }));    
     });
</script>

When I click on btn shouldn't the form be submitted and alert window occurs?

Answer 1

Try putting the on submit function on the form instead of on the button.

<script type="text/javascript" language="javascript" >
    $(document).ready(function (e) {
         $('#upload_excel').on('submit',(function(e) {
             alert('test');
        }));    
     });
</script>

Answer 2

1. First of all I alert a message showing that the submit button is pressed, using this instruction:

    $('#btn').on('click',(function(e) {alert("Submitted");})); 

2. After that I'm ensuring that the form is submitted using the jQuery function .submit() :

    $( "#upload_excel" ).submit(); 

3. Finally, here is the entire script:

    <script type="text/javascript" language="javascript" > $(document).ready(function (e) { $('#btn').on('click',(function(e) { alert("Submitted"); $( "#upload_excel" ).submit(); })); }); </script> 

My answer is based on the jQuery documentation , & a Stackoverflow answer .

Answer 3

You have bad Jquery selector for .on('submit')

You can also use e.preventDefault() to prevent the form from actually being submitted.

Moreover, the <input> tag has no </input> closing tag, use value="Upload" instead for a submit or a button

 $(document).ready(function (e) { $('#upload_excel').on('submit',(function(e) { e.preventDefault(); alert('test'); })); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-horizontal well" method="post" id="upload_excel" name="upload_excel" enctype="multipart/form-data"> <fieldset> <div class="control-group"> <div class="control-label"> <label>Excel File:</label> </div> <div class="controls"> <input type="file" name="file" id="file" class="input-large"> </div> </div> <div class="control-group"> <div class="controls"> <input type="submit" id="btn" name="Import" class="btn btn-primary button-loading" data-loading-text="Loading..." value="Upload"/> </div> </div> </fieldset> 

Answer 4

那么“表单”元素的“动作”属性又如何呢？

Answer 5

Basiclally you have to submit form so you should have the id of form in the onsubmit block and not input submit button.

<script type="text/javascript" language="javascript" >
    $(document).ready(function (e) {
        $('#upload_excel').on('submit',(function(e) {
            alert('test');
        }));    
    });
</script>

And Yes You Need to have the action attribute to make a post or get request to the server

Hope This Helps.

Answer 6

You haven't defined the "action" parameter in tag. So, when you press Submit, you fire a POST call without having specified the URL to be called. A simple example is:

<form enctype="multipart/form-data" action="__URL__" method="POST">
  <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
  Send this file: <input name="userfile" type="file" />
  <input type="submit" value="Send File" />
</form>

Where URL is a page PHP or whatever else you have exposed for receiving this call. Another example is here .