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?

Try selecting the form instead: change `$('#btn')` to `$('#upload_excel')` — Bennett Miller, Sep 20 '17 at 15:08
No because you add an even listener that is called when the `submit` event occures. And the `submit` event is triggered for the `form` element and not the button. — t.niese, Sep 20 '17 at 15:09
You want to either watch '#upload_excel' for on submit, or the '#btn' for on click. Buttons don't have a submit event. — kyle, Sep 20 '17 at 15:10

score 2 · Accepted Answer · answered Sep 20 '17 at 15:09

2

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>

answered Sep 20 '17 at 15:09

Winter

2,407
1
19
28

thanks. it is working. I have added action to form (but empty) and I changed ID to form id. – DarSta Sep 20 '17 at 15:50

score 0 · Answer 2 · edited Sep 20 '17 at 16:58

0

First of all I alert a message showing that the submit button is pressed, using this instruction:
```
$('#btn').on('click',(function(e) {alert("Submitted");}));
```
After that I'm ensuring that the form is submitted using the jQuery function .submit():
```
$( "#upload_excel" ).submit();
```

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.

edited Sep 20 '17 at 16:58

Baum mit Augen

49,044
25
144
182

answered Sep 20 '17 at 15:11

Mehdi Bouzidi

1,937
3
15
31

What does this do? How does it answer the question? Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Sep 20 '17 at 16:20
While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Baum mit Augen Sep 20 '17 at 16:20
@Rob I edited my answer & I'm waiting for your opinion – Mehdi Bouzidi Sep 20 '17 at 16:53
@BaummitAugen I edited my answer & I'm waiting for your opinion – Mehdi Bouzidi Sep 20 '17 at 16:53
The button is of the type `type="submit"`, and because you do not prevent the default behaviour of the button in the click handler the form will be submitted even without the `$( "#upload_excel" ).submit();`. – t.niese Sep 21 '17 at 08:27
@t.niese yes it's true, just in my case i supposed that the button was a simple button, maybe I should specify it in my answer ! – Mehdi Bouzidi Sep 21 '17 at 08:30

score 0 · Answer 3 · edited Sep 20 '17 at 16:14

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>

thanks. it is working. I have added action to form (but empty) and I changed ID to form id. — DarSta, Sep 20 '17 at 15:49

score 0 · Answer 4 · answered Sep 20 '17 at 15:18

0

What about the "action" attribute for the "form" element?

answered Sep 20 '17 at 15:18

score 0 · Answer 5 · answered Sep 20 '17 at 15:18

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.

score 0 · Answer 6 · edited Sep 20 '17 at 16:16

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.

Simple form submit doesn't work

6 Answers6