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
– Spokey, Commented Mar 5, 2014 at 15:38
I didn't quite test it when I wrote it but it seems to work fine > jsfiddle.net/Spokey/bNa7d (not sure if you still added the var frm) — Spokey
– Spokey, Commented Mar 5, 2014 at 15:48
action doesn't require an extension if .htaccess is configured for it — Spokey
– Spokey, Commented Mar 5, 2014 at 15:50
If your code is in the head then yes. If you put it before you end body you won't need that — Spokey
– Spokey, Commented Mar 5, 2014 at 16:01

Spokey · Accepted Answer · 2014-03-05 15:59:09Z

1

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);
        }
    });
});

answered Mar 5, 2014 at 15:59

Spokey

11k2 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix · Accepted Answer · 2014-03-05 15:49:18Z

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 5, 2014 at 15:49

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Collectives™ on Stack Overflow

jquery ajax form submit is not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related