javascript - Was soll ich tun, wenn ich das Formularübermittlungsverhalten fortsetzen möchte, nachdem jQuery das Standardübermittlungsverhalten des Formulars blockiert hat?
漂亮男人
漂亮男人 2017-05-16 16:46:27
0
3
864

Was soll ich tun, wenn jQuery das standardmäßige Übermittlungsverhalten des Formulars blockiert, wenn ich das Übermittlungsverhalten fortsetzen möchte?

Die Einzelheiten lauten wie folgt:
Eine Schaltfläche zum Löschen. Verwenden Sie sweetalert2, um vor dem Absenden eine Eingabeaufforderung einzugeben. Wenn Sie im Eingabeaufforderungsfeld auf die Schaltfläche „Bestätigen“ klicken, senden Sie das Formular weiter.
HTML-Code:

<form action="/articles/{{ $article->id }}" method="POST">
    {{ method_field('DELETE') }}
    {{ csrf_field() }}
    <input class="btn btn-danger btn-sm need-alert" type="submit" value="删除">
</form>

js-Code:

    <script>
        $('.need-alert').on('click', function (event) {
            //阻止默认提交事件
            event.preventDefault();
            
            //sweetalert2的提示框代码:
            swal({
                title: '确定要删除吗?',
                text: '删除后不能恢复!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '确认删除'
            }).then(function () {
                
                
            }).catch(swal.noop);
        })
    </script>

Nachdem PreventDefault() das Standardübermittlungsereignis verhindert hat, kann das Sweetalert2-Eingabeaufforderungsfeld normal angezeigt werden.

Frage:
Nachdem ich im Sweetalert2-Eingabefeld auf „Löschen bestätigen“ geklickt habe, was soll ich schreiben, wenn ich mit dem Absenden des Formulars fortfahren möchte?

漂亮男人
漂亮男人

Antworte allen(3)
巴扎黑

给按钮绑定点击事件,在事件的回调函数中实现弹窗,并判断用户选择的弹窗值,为真则获取表单元素触发提交事件
$("form").submit()
不为真则做其他相应处理

伊谢尔伦

讲道理,input的type写成submit让你需要额外写阻止默认事件,type改成button,就不用阻止默认事件了。你的确认框应该是有回调函数的,或许就是then里面,直接写提交应该可以的

洪涛
if(!confirmed) {
    e.preventDefault();
    return;
}
$('form').submit();
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage