Question

我有一个简单的基于HTML的表单，如下所示，它会在点击时不断刷新页面。

<form id="register" action="#" method="POST">
    <div class="input-group">
        <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
        <input type="hidden" name="form" value="register">
        <input type="hidden" name="type" value="websiteregistration">
        <span class="input-group-append">
            <button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button>
        </span>
    </div>
</form>

我正在尝试阻止它在按下提交按钮时重定向。

(function($) {
    function formSubmit(e){
        e.preventDefault(); //This will prevent the default click action
        e.stopPropagation();

        var frm = $('#'+ $(this).data('name') +'');

        $.ajax({
            type: frm.attr('method'),
            url: '(url)',
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            }
        });

        return false;
    }
});

我添加了return false以阻止它重定向，以及PreventDefault，但是在发送数据时页面仍然刷新（数据正在以btw的形式发送）。

我也尝试用$（）。submit来做，但结果相同。（我出于安全原因隐藏了网址，但提交本身有效）。

使用了name-data属性，因为我在页面上有几个相同的表单，像这样我可以重复使用

Answer 1

使用event而不是this

formSubmit(event)

删除不必要的代码：

＆＃13;

function formSubmit(e){
    e.preventDefault(); //This will prevent the default click action

    var frm = $('#'+ $(this).data('name') +'');

    $.ajax({
        type: frm.attr('method'),
        url: '(url)',
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="register" action="#" method="POST">
	<div class="input-group">
		<input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
		<input type="hidden" name="form" value="register">
		<input type="hidden" name="type" value="websiteregistration">
		<span class="input-group-append">
			<button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>
		</span>
	</div>
</form>

＆＃13;

Answer 2

尝试删除类型=＆＃34;提交＆＃34;属性并将其更改为type =＆＃39; button＆＃39;并且还改变了这个＆＃39;这个＆＃39;到＆＃39;事件＆＃39;：

<button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(event)">Go!</button>

Answer 3

给出type =“button”而不是submit，同时删除e.preventDefault（）;和e.stopPropagation（）;无需添加这两行。

function formSubmit(e){

    var frm = $('#'+ $(this).data('name') +'');

    $.ajax({
        type: frm.attr('method'),
        url: '(url)',
        data: frm.serialize(),
        success: function (data) {
            console.log('Submission was successful.');
            console.log(data);
        },
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        }
    });

    return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="register" action="#" method="POST">
                                        <div class="input-group">
                                            <input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text">
                                            <input type="hidden" name="form" value="register">
                                            <input type="hidden" name="type" value="websiteregistration">
                                            <span class="input-group-append">
                                                <button type="button" class="btn btn-light" data-name="register" onclick="formSubmit(this)">Go!</button>
                                            </span>
                                        </div>
                                    </form>
									
								
									
									</body>
									</html>

不要重定向提交表单

3 个答案: