Jquery form with file upload - onclick instead of dom ready

Question

 $("#form").submit(function() {
     $(this).ajaxSubmit({
         beforeSubmit: function(before) {
             $('.result').html('loading');
         },
         success: function(d) {
             //result process
         }
     }); 
     return false;
 });

When i click the submit button, This function works very good. But I would like to submit the form when a button is pressed. The above function is written in side

 $(document).ready(function() {

But i want to write it inside a normal javascript function.

I am using the form plugin. form.min.js

form.min.js is ambiguous - it could be ANYTHING. And why can't you put that code inside a "normal" function? — ahren
– ahren, Commented Oct 19, 2012 at 7:41

Darin Dimitrov · Accepted Answer · 2012-10-19 07:41:06Z

1

Well, then subscribe to the click handler of your DOM element:

$(document).ready(function() {
    $('#myButton').click(function() {
        $("#form").ajaxSubmit(
            beforeSubmit: function(before) {
                $('.result').html('loading');
            },
            success: function(d) {
                //result process
            }
        );    
        return false;
    });
});

answered Oct 19, 2012 at 7:41

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

Comments

Pragnesh Chauhan · Accepted Answer · 2012-10-19 07:41:25Z

0

try this

<form action='' method='post' onsubmit='return uploadimg();'>

<script>
function uploadimg(){
    $(this).ajaxSubmit({
     beforeSubmit: function(before) {
         $('.result').html('loading');
     },
     success: function(d) {
         //result process
     }
 });
 return false;
} 

</script>

answered Oct 19, 2012 at 7:41

Pragnesh Chauhan

8,49410 gold badges46 silver badges58 bronze badges

Comments

gherkins · Accepted Answer · 2012-10-19 07:41:48Z

0

<button id="formSubmit">

binding the formsubmit to a buttons click event should work like this:

$('#formSubmit').on('click', function(){
    $('#form').ajaxSubmit({
         beforeSubmit: function(before) {
             $('.result').html('loading');
         },
         success: function(d) {
             //result process
         }
     }); 
     return false;
});

answered Oct 19, 2012 at 7:41

gherkins

15.1k7 gold badges47 silver badges74 bronze badges

Comments

VeXii · Accepted Answer · 2012-10-19 07:51:04Z

you almost got it all, the point in binding inside document.ready is thats the point where the dom is ready to be read and we know its safe to setup event handlers to the dom elements, the normal pratice is that inside youre docuement.ready handler you assign bindings to youre elements, asuming you have a button whith the ID of "submitImageForm" the code be lokking somthing like this

$(function(){
  $("#submitImageForm").click(function(e){ // tell the browser we wanner handle the onClick event of this element
    e.preventDefault() // this is to tell the browser that we are going to handle things and it shod not do its default (e.g sending the form up to the server and reloading)

    $("#form").submit(function() {
      $(this).ajaxSubmit({
         beforeSubmit: function(before) {
             $('.result').html('loading');
         },
         success: function(d) {
         //result process
         }
     })

    })
  })
})

Collectives™ on Stack Overflow

Jquery form with file upload - onclick instead of dom ready

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related