Получить идентификатор кнопки отправки перед проверкой с помощью jQuery Validate - PullRequest
1 голос
/ 25 июня 2011

У меня есть форма, которая имеет два различных использования (создание нового сообщения или обновление существующего сообщения), который отображается во всплывающем окне fancybox.

Я хочу использовать две кнопки для отправкиформа;«Сохранить» и «Сохранить и закрыть».Кнопка «Сохранить» просто отправит форму и получит сообщение «успех» с сервера с отметкой времени (чтобы я мог отобразить сообщение «Последний сохраненный»).

Будет «Сохранить и закрыть»получить сообщение об успехе с сервера и закрыть fancybox.

Моя проблема в том, что я не могу понять, как сообщить обработчику отправки, какая кнопка отправки была нажата, чтобы он знал, стоит ли закрывать окно в случае успехаили просто отобразить временную метку ...

Я думаю, смогу ли я захватить идентификатор кнопки отправки при попадании в валидатор, чтобы передать ее обработчику успеха ...

Вот мой валидатор

$('#contact').validate({
    rules: {
        title: {
            required: true
        },
        comments: {
            required: true,
            maxlength: 200
        }
    },
    messages: {
        comments: {
            maxlength: "Too much text. 200 chars. max."
        }
    }, 
    submitHandler: function() {
        $('#loading_contact').show();
        var formData = $("#contact").serializeArray();

        $.ajax({
            type: "POST",
            url: "admin.cfc?method=createPosting&returnformat=json",
            data: formData,
            dataType: "json",
            cache: false,
            success: function(data) {
            $('#formwrapper').empty();
            $('#formwrapper').html(data.message);
            }   
        });
    }
});

И моя форма ...

<cfform name="contact" id="contact">
            <cfif arrayLen(errors)>
                <p>Please correct the following error(s):
                    <ul><cfloop index="e" array="#errors#">
                            <li>
                                <cfoutput>#e#</cfoutput>
                            </li>
                        </cfloop>
                    </ul>
                </p>
            </cfif>
            <cfinput type="hidden" id="job_id" name="job_id">
            <p><label for="title" id="ltitle">Position Title</label></p>
            <cfinput style="color:black" type="text" id="title" class="oneliner required" name="title">
            <p><label for="comments" id="lcomments">Description</label></p>
            <cftextarea style="color:black;height:600px;" id="comments" name="comments" class="required"></cftextarea>
            <p style="padding:15px 0 0 0;"><cfinput style="background:none;border:none;text-decoration:underline;color:black;" type="submit" id="submit" value="Save" name="submit"><img id="loading_contact" src="../images/loading.gif" /> <cfinput style="background:none;border:none;text-decoration:underline;color:black;" type="submit" id="saveclose" value="Save and Close" name="saveclose"><img style="display:none;" id="save_close" src="../images/loading.gif" /></p>
        </cfform>

Ответы [ 3 ]

1 голос
/ 25 июня 2011

Переменные Javascript содержат область действия функции, поэтому, чтобы передать нажатую кнопку вашему обработчику успеха, попробуйте следующее:

 $(':button').click(function(){
       var type = $(this).attr('id');
       $('#contact').validate({  
          submitHandler: function() {
             $.ajax({success: function(data) {if(type===''){}} });
          };
       });
    });

Я пропустил код, который вы уже знаете - это всего лишь ваш обработчик и обработчик успехадля методов validate и ajax с переданной переменной

0 голосов
/ 25 июня 2011

Я не уверен, как теперь вызывается ваш обработчик sumbit, но удаляю его и использую:

$('#submit').bind('click', function (e) {
   e.preventDefault(); 
   submitHandler(false);
});
$('#saveclose').bind('click', function(e) {
   e.preventDefault();
   submitHandler(true);
});

, чтобы sumbit форма должна работать. Я имею в виду, что вы передадите логическое значение sumbitHandler, которое будет истинным, если его нужно закрыть.

0 голосов
/ 25 июня 2011

Другим вариантом было бы сделать так, чтобы обе ваши кнопки делали пост ajax.Сначала вы можете проверить, является ли форма действительной, перейдя в form.valid (), см. docs .Вызов ajax post success для опции «close» также закрыл бы окно.

Обновление: Вы также можете настроить кнопки отправки для установки поля где-то на странице и обработчик успеха прочитал это поле, чтобы определить,стоит закрыть ящик или нет.Становится немного хакером, но это сработает.

...