JQUERY модальное поле подтвердить форму отправить - PullRequest
Новая
       3

JQUERY модальное поле подтвердить форму отправить

2 голосов
/ 15 декабря 2011

У меня есть форма, когда при нажатии кнопки отправки я хочу, чтобы появилось модальное окно с кнопками «ДА» и «НЕТ», я хочу, чтобы кнопки «Да» и «Нет» отправляли форму, но мне нужно знать, на какую кнопку они нажали.

Вот мой код 

<input onclick="$.msgbox('confirm text',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {

});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

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

Любая помощь или идеи будут великолепны

спасибо

Ответы [ 3 ]

2 голосов
/ 15 декабря 2011

Хотя я не знаком с плагином $.msgbox, но вы должны открывать модальное диалоговое окно при <form> отправке, а не при нажатии кнопки, так как форму также можно отправить путем ввода / возврата при определенном вводеполя (например, текстовые поля <input type="text|password">) 

var confirmed = false;
$('#myform').bind('submit', function() {
  if (confirmed) {
    return true;  // confirmation received, continue form submission process
  } else {
    $.msgbox(
      'my modal message',
      {
        buttons : [
          { type: 'button', value: 'YES' },
          { type: 'button', value: 'NO' }
        ]
      }, 
      function(buttonPressed) {
        confirmed = buttonPressed.value;  // Update the confirmed variable
        $('#myform').submit();  // re-submit the form
      }
    );  
    return false;  // cancel form submission
  }
});
1 голос
/ 15 декабря 2011

Добавить возвращаемое значение false: 

<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {

}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />
0 голосов
/ 15 декабря 2011

Не уверен насчет msgbox, но некоторые замечания о вашем коде:

  1. Не присоединяйте свою логику JS непосредственно к вашему коду, но используйте jQuery, чтобы прикрепить событие click кВаша разметка (см. ненавязчивый javascript ):

    Вместо 

    <input onclick="$.msgbox('confirm text',{

    Используйте 

    $('#btnApply').click(function(e) {

  2. Вы можете остановитьобработку кликов, задав значение false одно свойство параметра события: 

    $('#btnApply').click(function(e) {
     e.preventDefault(); // stop click handling and so form submitting

  3. Наконец, обработайте отправку формы или нет в функции обратного вызова msgbox: 

    $.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
    {
    type: "submit",
    value: "Yes"},
{
    type: "submit",
    value: "No"},
{
    type: "cancel",
    value: "Cancel"}
]
}, function(result) {
    if(result == "Yes") // display the form on submit
         $('form').submit();
});

jsFiddle доступно.

...