jQuery Подтвердить перед отправкой

Question

<form action ="/submit-page/" method='post' class="editable"> 
    <fieldset> 
    <select name="status" id='status'> 
     <option value="Submitted">Submitted</option> 
     <option value="Canceled">Canceled</option> 
       <option value="Application">Application</option> 
    </select> 
      <input type="submit" name="submit" value="SAVE"> 

</form> 

У меня есть форму выше: Когда я нажимаю на раскрывающееся значение «Отменено» и нажимаю кнопку «Сохранить», я хочу предоставить окно предупреждения с предупреждающим сообщением с кнопкой «Да» и «Нет».

Если пользователь нажимает «Да», отнесите его на страницу отправки по желанию в параметре действия формы. , если пользователь нажимает «Нет», оставайтесь на одной странице формы без обновления страницы. Можно ли это сделать в jQuery?

Answer 1

Хм ... theres проблема с другими ответами здесь: они не работают против вашего HTML.

Там ошибка в JQuery (я предполагаю, что это ошибка), где, если элемент на форме имеет name из submit, затем вызвав submit событие формы не будет работать.

Вам нужно будет удалить атрибут name из вашей кнопки input type="submit" или просто указать ему другое имя, кроме «отправить».

HTML

<form action ="/submit-page/" method='post' class="editable"> 
    <fieldset> 
    <select name="status" id='status'> 
     <option value="Submitted">Submitted</option> 
     <option value="Canceled">Canceled</option> 
     <option value="Application">Application</option> 
    </select> 
    <input type="submit" value="SAVE" name="submit-button"/> 
    </fieldset> 
</form>​ 

JQuery

$('#status').on('change', function() { 

    var $this = $(this), 
     val = $this.val(); 

    if (val === 'Canceled' && confirm("are you sure?")) { 
     $this.closest('form').submit(); 
    } 
});​ 

PHP

$submitted = !empty($_POST['submit-button']); 

if($submitted) 
{ 
    // Submit button was pressed. 
} 
else 
{ 
    // Form was submitted via alternate trigger. 
} 

экзамен PLE

Рабочая: http://jsfiddle.net/xixonia/KW5jp/

не работает: http://jsfiddle.net/xixonia/KW5jp/1/

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

Вы не так обновили свой вопрос, и этот ответ уже не является допустимым решением для того, что вы находясь в поиске. Вместо этого посмотрите на Chris Platt's answer.

Редактировать Опять

Это модифицированная версия Chris Platt's answer. Он просто ждет, пока DOM не будет готов (элементы загружены), прежде чем он выполнит логику, содержащуюся в первом $(...).

$(function() { // this first jQuery object ensures that... 

    /// ... the code inside executes *after* the DOM is ready. 

    $('form.editable').submit(function(){ 
     if ($('#status').val()=='Canceled') { 
      if (!confirm('Warning message here. Continue?')) { 
       return false; 
      } 
     } 
    }); 

}); 

Answer 2

да, это может быть сделано:

$('#status').change(function(){ 
    var val = $(this).val(); 
    if(val == 'Submitted') { 
    $('.editable').submit(); 
    return false; 
    } else if (val == 'Canceled') 
    { 
     var answer = confirm('are you sure'); 
     return false; 
    } else { 
    ... 
    } 
}); 

В этом, в отличие от решения Крис Pratts сделает это, как только вы измените выбранное значение в раскрывающемся списке. Он сделает это, как только вы нажмете кнопку «Отправить».

Answer 3

$('form.editable').submit(function(){ 
    if ($('#status').val()=='Canceled') { 
     if (!confirm('Warning message here. Continue?')) { 
      return false; 
     } 
    } 
}); 

Answer 4

Самый прямой способ перехватить формы представления в JQuery, как это:

$("form.editable").submit(function(){ 
    if(confirm("Really submit the form?")) { 
     return true; 
    } else { 
     return false; //form will not be sumitted and page will not reload 
    } 
}); 

См http://jqapi.com/#p=submit более подробно.