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

Я хотел бы сделать модальное окно подтверждения, используя jQuery и толстый ящик в каждой форме с классом «подтвердить».

Вот HTML-разметка:

<!-- The form below -->
<form id="myform" class="confirm" name="actionform" action="target.php">
<table>
  <tr>
    <td><input type="text" value="" placeholder="id" name="id" id="id"/></td>
    <td><input type="text" value="" placeholder="title" name="title" id="title"/></td>
    <td><input type="submit" value="Form elküldése"/></td>
  </tr>
</table>
</form>

<!-- The modal box and it's content below, called with tb_show() function -->
<div id="myModalConfirm" style="display:none">
    <div>
        <p>Are you sure?</p>
        <button id="yes">Yes, I'm sure</button><button id="cancel">No, cancel it</button>
    </div>
</div>

Итак, проблема:

Модальное диалоговое окно отображается и работает нормально, а кнопка отмены работает, но нажатие кнопки # yes не отправит форму, и я думаю, что это из-за функции preventDefault().

Вот jQuery (я работаю с библиотекой jquery.1.8.3, поэтому позаботьтесь о совместимости)

$(document).ready(function(){
    $('form.confirm').submit(function(e){
        var form = $(this);
        e.preventDefault();
        tb_show("Megerősítés","#TB_inline?height=100&amp;width=200&amp;inlineId=myModalConfirm&amp;modal=true",null);
        $('button#yes').click(function(){
            $(form).submit;


            });
        $('button#cancel').click(function(){
            tb_remove();
            return false;
            });
    })

});

======| Решение |============================================== =============== Это для меня, но ознакомьтесь с другими товарами ниже в комментариях :)

$('form.confirm').submit(function(e, submit){
        if (!submit) e.preventDefault();
        tb_show("Megerősítés","#TB_inline?height=100&amp;width=200&amp;inlineId=myModalConfirm&amp;modal=true",null);
    })

    $('#yes').click(function(){
        $('form.confirm').trigger('submit', [true]);
    });


    $('#cancel').click(function(){
        tb_remove();
    });

forms jquery confirmation submit preventdefault
person Dániel Sebestyén    schedule 20.02.2013    source источник
comment
ты пробовал return true; ?   -  person udidu    schedule 20.02.2013
comment
ага, еще куча вариаций возврата   -  person Dániel Sebestyén    schedule 20.02.2013

Ответы (2)


arrow_upward
2
arrow_downward

submit - это метод, а не свойство, вам не хватает (). Вы можете использовать метод trigger:

$(document).ready(function(){
    $('form.confirm').submit(function(e, submit){
        if (!submit) e.preventDefault();
        tb_show("Megerősítés","#TB_inline?height=100&amp;width=200&amp;inlineId=myModalConfirm&amp;modal=true",null);
    })

    $('#yes').click(function(){
        $('form.confirm').trigger('submit', [true]);
    });


    $('#cancel').click(function(){
        b_remove();
    });
});
person undefined    schedule 20.02.2013
comment
Благодаря этому посту я уже решил свою проблему :) Можете ли вы объяснить логику этого? - person reignsly; 17.01.2015

arrow_upward
2
arrow_downward

Я думаю, что самый простой способ - сохранить, нажал ли пользователь «Да» в переменной, и если он это сделал, пусть форма обрабатывается как обычно.

$(document).ready(function(){
    var userClickedYes = false;

    $('form.confirm').submit(function(e){    
        if(!userClickedYes){
            e.preventDefault();
            tb_show("Megerősítés","#TB_inline?height=100&amp;width=200&amp;inlineId=myModalConfirm&amp;modal=true",null);
        }            
    });

    $('button#yes').click(function(){
        userClickedYes = true;
        $('form.confirm').submit();
    });
    $('button#cancel').click(function(){
        tb_remove();
    });

});
person AndrewR    schedule 20.02.2013
comment
Большое спасибо и вам, но я не хочу объявлять переменные из 'action fn', потому что среда такая модульная :S Но этот фрагмент уже стал моим сокровищем :) - person Dániel Sebestyén; 20.02.2013