user3501879
user3501879

Reputation: 17

how can i enable the submit button in the form?

this is the javascript....i don't know how to enable the submit button....any help would be appreciated. also do i need to make any changes in the html code w.r.t the submit button? i'm totally stuck and my form appears useless.

<script type="text/javascript">
        $(function() {
                //the form wrapper (includes all forms)
            var $form_wrapper   = $('#form_wrapper'),
                //the current form is the one with class active
                $currentForm    = $form_wrapper.children('form.active'),
                //the change form links
                $linkform       = $form_wrapper.find('.linkform');

            //get width and height of each form and store them for later                        
            $form_wrapper.children('form').each(function(i){
                var $theForm    = $(this);
                //solve the inline display none problem when using fadeIn fadeOut
                if(!$theForm.hasClass('active'))
                    $theForm.hide();
                $theForm.data({
                    width   : $theForm.width(),
                    height  : $theForm.height()
                });
            });

            //set width and height of wrapper (same of current form)
            setWrapperWidth();

            /*
            clicking a link (change form event) in the form
            makes the current form hide.
            The wrapper animates its width and height to the 
            width and height of the new current form.
            After the animation, the new form is shown
            */
            $linkform.bind('click',function(e){
                var $link   = $(this);
                var target  = $link.attr('rel');
                $currentForm.fadeOut(400,function(){
                    //remove class active from current form
                    $currentForm.removeClass('active');
                    //new current form
                    $currentForm= $form_wrapper.children('form.'+target);
                    //animate the wrapper
                    $form_wrapper.stop()
                                 .animate({
                                    width   : $currentForm.data('width') + 'px',
                                    height  : $currentForm.data('height') + 'px'
                                 },500,function(){
                                    //new form gets class active
                                    $currentForm.addClass('active');
                                    //show the new form
                                    $currentForm.fadeIn(400);
                                 });
                });
                e.preventDefault();
            });

            function setWrapperWidth(){
                $form_wrapper.css({
                    width   : $currentForm.data('width') + 'px',
                    height  : $currentForm.data('height') + 'px'
                });
            }

            /*
            for the demo we disabled the submit buttons
            if you submit the form, you need to check the 
            which form was submited, and give the class active 
            to the form you want to show
            */
            $form_wrapper.find('input[type="submit"]')
                         .click(function(e){

                            e.preventDefault();
                         });    
        });
    </script>

Upvotes: 1

Views: 211

Answers (2)

JohanVdR
JohanVdR

Reputation: 2880

preventDefault() method prevents the submit's default action. This prevents the form from being submitted.

  $form_wrapper.find('input[type="submit"]').click(function(e){
    e.preventDefault();
  });

Upvotes: 1

Arjun Chaudhary
Arjun Chaudhary

Reputation: 2453

The event.preventDefault() method stops the default action of an element from happening.

For example:

  1. Prevent a submit button from submitting a form.
  2. Prevent a link from following the URL.

Tip: Use the event.isDefaultPrevented() method to check whether the preventDefault() method was called for the event.

Upvotes: 1

Related Questions