0

I'm having a strange problem with a form. Sometimes I have to click the submit button twice to make it submit my form. It also seems to work if I click outside the form before I click submit. The form is built inside a module with FORM API and is submitted with an ajax request. I have some js attached to the form so I can make some client side validation before the ajax call is run. This is what my js code looks like:

(function ($) {

Drupal.behaviors.mymodule = {
attach: function (context ,settings) {

    // Cache the form object
    var $form = $("#mymodule-form", context);
    var $submitButton = $('input[type="submit"]', $form);

    // Use once so we dont attach submit multiple times
    // Use off to remove any existing submit handler
    $form
        .once('mymodule')
        .off('submit')
        .on('submit', function(e){
            e.preventDefault();
            var $form = $(this);

            $(function () {
                $('#mymodule-form').submit(function () {
                    if($(this).valid()) {
                        $submitButton.trigger('submitmyform');
                    }
                });
            });

        });

        $(document).ajaxComplete(function(e, xhr, settings) {
            $('#mymodule-form').resetForm();
            $('#edit-mymodule-submit').replaceWith( "<div id='mymodule-confirmation'>TACK FÖR DIN ANMÄLAN</div");

        });

         // Run validation on $form object.
        jQuery.validator.setDefaults({
            debug: false,
            success: "valid",
        });


        $('#mymodule-form').validate({
            rules: {
                mymodule_name: {
                    required: true,
                },
                mymodule_length: {
                    required: true,
                },
                mymodule_suite: {
                    required: true,
                },
                mymodule_email: {
                    required: true,
                    email: true,
                },
                mymodule_phone: {
                    required: true,
                },
            },
            messages: {
                mymodule_name: {
                    required: "lorem ipsum",
                },
                mymodule_length: {
                    required: "lorem ipsum",
                },
                mymodule_suite: {
                    required: "lorem ipsum",
                },
                mymodule_email: {
                    required: "lorem ipsum",
                    email: "lorem ipsum"
                },
                mymodule_phone: {
                    required: "lorem ipsum",
                },
            },
        });

}



};


})(jQuery);

This is what my code looks like for the submit button:

    $form['mymodule_submit'] = array(
       '#type' => 'submit',
       '#value' => t("SEND!"),
       '#ajax' => array(
           'callback' => 'mymodule_form_callback',
           'wrapper' => 'mymodule-form',
           'event' => 'submitmymodule',
        ),
     );

Can anyone see what's wrong with this code?

2
  • And what's in your JavaScript console?
    – Mołot
    Apr 10 '14 at 8:56
  • Your welcome Johan!
    – Alex Gill
    Apr 10 '14 at 9:41
2

See comments below...

      .on('submit', function(e){ // Not correct way of using submit.
                e.preventDefault();
                var $form = $(this); // You have already defined this global variable?

                $(function () { // you dont need to check if the document is ready, thats what behaviours are for.
                    $('#mymodule-form').submit(function () { // Why are you submitting again here?
                        if($(this).valid()) {
                            $submitButton.trigger('submitmyform'); // What are you trying to trigger?
// If the form is already submit, why are you doing anything with the submit button?
                        }
                    });
                });

            });

Try this...

var $form = $("#mymodule-form", context);

$form.submit(function(e){
  e.preventDefault();
    if($(this).valid()) {
       // Do something else...
    }
});

UPDATE

You are probably binding to the form before it exists. Bind the event to the document, and pass the form selector...

$(document).on('submit', '#mymodule-form', function(e){
    // Do something...
});
3
  • Thanks for your input. I added my submit button code to my original post to make it clearer. I'm submitting with ajax but I want to run some validation before the ajax call is made. Everything works as intended except that the click on the submit button isn't always fired, for some reason. I'm bad at javascript so yes, I'm sure there are errors in the code other than the one I'm having trouble with here. I'll fix the things you mentioned. However, the big question here is why the submit isn't always registered. Do you see why?
    – Johan Dahl
    Apr 10 '14 at 9:06
  • The form isn't submitted until the form is validated and the submitButton.trigger is run. I interupt the usual behavior as you can see in the code. I'll try your suggestion, thanks.
    – Johan Dahl
    Apr 10 '14 at 9:10
  • Also, see update regarding AJAX.
    – Alex Gill
    Apr 10 '14 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.