Узнайте, какая кнопка формы инициировала отправку

ProgramBox

Узнайте, какая кнопка формы инициировала отправку

Post author:admin
Запись опубликована:29 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

В моей форме у меня есть две кнопки отправки.

 <input type="submit" name="save" value="Save as draft"/>
<input type="submit" name="send" value="Start sending" />

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

 $('form').submit(function(){
    if submit equals save
       task 1;
    elseif submit equals send
       task 2               
}

Как мне проверить, какая кнопка была нажата?

1. Я уверен, что вы можете улучшить название этого вопроса.

2. добавьте обработчики нажатий для обеих кнопок

3. @aleksv просто продолжайте и опубликуйте это, чтобы я мог 1

Ответ №1:

 $(":submit").click(function() {
    $("form").data("submit-button", this.name);
});

$("form").submit(function() {
    var button = $(this).data("submit-button");
    ...
});

Добавьте обработчик нажатия на кнопки отправки, который сохраняет название. Затем извлеките это имя в вашем обработчике отправки.

1. О, подождите, я думал, вы просто копируете название кнопки в сам элемент button, а не в форму. Но даже в этом случае: почему бы не поместить логику в обработчик кликов вместо обработчика отправки формы?

2. @MarcelKorpel Потому что тогда логика не запускается, когда вы отправляете форму другими методами, такими как нажатие ENTER.

Ответ №2:

На моем месте я бы сделал это немного по-другому. Я бы сделал что-то вроде —

 <button type='button' id='formSave'>Save as draft</button>
<button type='button' id='formSend'>Start Sending</button>

$('#formSave').click(function(){
    //submit form
    //task 1
});

$('#formSend').click(function(){
    //submit form
    //task 2
});

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

1. Я думаю, что вторая должна использовать '#formSend'

2. Это нарушает поддержку, отличную от JavaScript. Пожалуйста, напишите ненавязчивый JavaScript.

3. @Raynos поднимает хороший вопрос. Также помните, что формы могут быть отправлены без нажатия кнопок — например, нажатие return во время фокусировки элемента ввода; некоторые браузеры будут псевдонажимать ближайшую кнопку, другие отправят форму без псевдонажима кнопки.

4. @Raynos Это ненавязчивый JS. Я думаю, вы имеете в виду, что вы должны позволить странице ухудшаться. Но OP уже упоминал, что у него есть шаг JS в середине отправки данных на сервер.

5. @JohnP Ok «Ненавязчивый JS» = разделите html и js. «Прогрессивное улучшение» = JS только улучшает существующую функциональность. Понял.

Ответ №3:

 $('input').each(function(n) {
  $(this).click( function() {
    var name = $(this).attr('name');

    if (name === 'save') {
       // do stuff
    }else if (name === 'submit'){
       // do some other stuff
    }
   }
});

конечно, вы также можете использовать оператор switch.

Если задание, которое вы хотите выполнить, сложное и сильно отличается, вам следует рассмотреть возможность использования двух разных форм

Я надеюсь, что это отвечает на ваш вопрос

Редактировать:

 $('input:submit').click(function(n) {
    var name = $(this).attr('name');
    if (name === 'save') {
       // do stuff
    }else if (name === 'submit'){
       // do some other stuff
    }
   }
});

1. Где вы проверяете, была ли нажата кнопка?

2.Теперь вы добавляете обработчики событий к каждому input , даже если это ничего не даст. Кажется немного расточительным.

3. @Ibu оптимизируйте его до $ («ввод»).нажмите

4. Извините за придирки, но я бы поставил 1, если бы вы это сделали $('input:submit') 🙂

5. @JohnP да, сделал бы это, если бы тип ввода был submit, но в этом случае у него есть тип as button

Ответ №4:

Я предлагаю использовать подход HurnsMobile, но если вам абсолютно необходима одна функция для обработки обеих кнопок, вы можете использовать объект события jQuery для обнаружения кнопок,

 $('form').submit(function(event){
    if(event.target.name == 'save') {
        // do save task
    } else if (event.target.name == 'send') {
        // do send task
    }  
});