jquery ajax form submit is not working

Question

this is my html form

<form id="contactForm1" method="POST" action="downloadfile">
   <input id="tesst" name="tesst" type="hidden" value="<?php echo $val['file_name'];?>"/>
   <div id="download" class="btn btn-danger">Download</div>
</form>

And here is the Jquery function

var frm = $('#contactForm1');
              frm.submit(function(ev) {
                 $.ajax({
                   type: frm.attr('method'),
                   url: frm.attr('action'),
                   data: frm.serialize(),
                   success: function(data) {
                      alert('ok');
                   }
                  });
                 ev.preventDefault();
              });

I don't know much about Jquery.

Please anybody can help me with this?

Thanks.

it misses the `input submit` button / you have to use the click event instead of submit - `frm.submit` to `$('#download').click` — Spokey, Mar 05 '14 at 15:38
@Spokey - thank you. i add a submit button and it works. but i also try the other way. but it didn't post that form. this is the jquery code $('#download').click (function(ev) { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function(data) { alert('ok'); } }); ev.preventDefault(); }); — Yasitha, Mar 05 '14 at 15:43
@AwladLiton - if you can tell me the best way to add action="" it will be helpful to me. Thank you. (don't mind about my wrong English) — Yasitha, Mar 05 '14 at 15:45
I didn't quite test it when I wrote it but it seems to work fine > http://jsfiddle.net/Spokey/bNa7d/ (not sure if you still added the `var frm`) — Spokey, Mar 05 '14 at 15:48
action should be file name with extension like something.php or something.html — Awlad Liton, Mar 05 '14 at 15:49
action doesn't require an extension if `.htaccess` is configured for it — Spokey, Mar 05 '14 at 15:50
@AwladLiton - actually I'am using codeigniter so thats why i think to redirect it using route. what is the best thing to do in this situation ? — Yasitha, Mar 05 '14 at 15:51
@Spokey - yes that jsfiddle example is working well. i'll try again if you can put your comment as a answer i can approve it. Thank You Very much for giving your time for me. — Yasitha, Mar 05 '14 at 15:54
@Spokey - I find that what happend with that to use click function thing i had to use this $(document).ready(function() { am I right? now it is also working thanks — Yasitha, Mar 05 '14 at 16:00
If your code is in the `head` then yes. If you put it before you end `body` you won't need that — Spokey, Mar 05 '14 at 16:01
@Spokey - Thank you.. that was the case. my code is in the head section learned much more things because of your kindness. Thanks again. — Yasitha, Mar 05 '14 at 16:03

score 1 · Answer 1 · answered Mar 05 '14 at 15:49

1

Two things

You need to add input submit element to your form
Change action="downloadfile" to action="downloadfile.php" if your downloadfile.php is the same directory with your current HTML file.

answered Mar 05 '14 at 15:49

Felix

37,892
8
43
55

score 1 · Accepted Answer · answered Mar 05 '14 at 15:59

There are 2 ways to solve your problem

You change your div (download button) to a input submit button and leave your script as it is
You change the function to run when the div is clicked and not when the submit event is fired (the reason is that submit is only fired by a submit button)

Example: http://jsfiddle.net/Spokey/bNa7d/

var frm = $('#contactForm1');
$('#download').click(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert('ok' + data);
        }
    });
});

jquery ajax form submit is not working

2 Answers2