防止表单刷新页面Javascript

Preventing form from refreshing page Javascript

本文关键字：Javascript 刷新 表单      更新时间：2023-09-26

我在javascript相当糟糕，我试图做一个AJAX调用，但我从一个表单字段得到我的值，它只是刷新页面，甚至不能观察AJAX调用是否成功。

这是我的HTML: 
<form class="form-horizontal" id="subscribe-form" name="subscribe-form" onSubmit="return subscribe();">
    <fieldset>
        <p>
                         Subscribe
        </p>
        <div class="input-prepend input-append">
           <input name="subscribwEmail" class="span2" id="InputEmail" type="email" placeholder="Email">
           <input type="submit" class="btn btn-inverse" />
        </div>
    </fieldset>
</form>

JS: 

function subscribe() {
    var emailForm = $('#subscribwEmail').val();
    $('#subscribe-form').hide(); // hide email form
$('#subscribeDiv').prepend('<img id="process" src="http://www.mydomain.com/assets/img/process.gif" />')
$.ajax({
    type: "POST", 
    url: "../../actions/ajax-subscribe.php",
    data: {
        email: emailForm
    },
    dataType: "json",
    success: function (data) {
        if (data[0] == 1) { // test if response was 1 or 2
            $('#process').hide(); // hide img
            $('#subscribeDiv').append('<p>Thank you for subscribing!</p>');
        } else {
            $('#process').hide(); // hide img
            $('#subscribeDiv').append('<p>There was an error subscribing the email.</p>');
        }
    }
})

};

ajax-subscribe.php 

<?php
include ('phpfunctions.php');
$email = $_POST['email'];
$ip = $_SERVER['REMOTE_ADDR'];
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME) or die('ERROR WITH SQL CONNECTION CONTACT ADMIN');
$email = cleanString($con, $email);
$query = "INSERT INTO `subscribers` (`email`, `ip`) VALUES ('$email', '$ip');";
if ($result = mysqli_query($con, $query)) {
echo json_encode(1); // all ok inserted
} else {
echo json_encode(0); // failed
}
?>

不取消click事件，因此表单提交。

将return false;添加到subscribe方法的末尾

您必须从订阅方法

返回false

还可以验证电子邮件，如果无效，可以通过返回false

停止发送订阅

你也可以禁用提交按钮。(formObj自带订阅参数)

        formObj.submit.disabled = true;
        formObj.submit.value = 'Log In...';
相关文章：