1

我正在尝试通过 jQuery 和 AJAX 提交我的表单，但似乎最终采取了 self (index.php) 的操作，而不是 jQuery 提交处理程序。任何想法为什么？

    <form id="artist_signup" action="index.php" method="get" oninput="AoutName.value=ANAME.value">
    <input type="hidden" name="ajax" value="true" />
    <div class="inlineInput">
        <input type="text" name="ANAME" placeholder="Name">
    </div>

    <div class="inlineInput">
        <input type="text" name="LOCATION" placeholder="City, State">
    </div>

    <div class="inlineInput">
        <input type="email" name="EMAIL" placeholder="Email">
    </div>

    <div class="inlineInput">
        <input type="url" name="AWEBSITE" placeholder="www.myawesomeband.com">
    </div>

    <div class="submitContainer">
        <input type="submit" value="Sen" class="donateButton formSubmit">
    </div>
    <div id="artist_message"></div>
</form>

    <script type="text/javascript"> 
$(document).ready(function() {
    $('#artist_signup').submit(function() {
        $("#artist_message").html("<span class='error'>Adding your email address...</span>");
        $.ajax({
            url: 'inc/store-address.php',
            data: $('#artist_signup').serialize(),
            success: function(msg) {
                $('#artist_message').html(msg);
            }
        });
        return false;
    });
});
</script>
4

2 回答 2

2

您需要阻止默认操作，即表单提交。这可以通过使用来完成您可以在此处e.preventDefault()阅读有关它的更多信息

$(document).ready(function() {
    $('#artist_signup').submit(function(e) {
       e.preventDefault();
       $("#artist_message").html("<span class='error'>Adding your email address...</span>");
       $.ajax({
            url: 'inc/store-address.php',
            data: $('#artist_signup').serialize(),
            success: function(msg) {
                $('#artist_message').html(msg);
            }
        });
    });
});
于 2013-06-05T17:58:03.130 回答
0

使用提交功能时，很自然的操作是回发到任何表单操作。您可以做的是为您的函数添加一个参数e。这将表示具有与事件本身相关的属性和方法的事件对象。有了这个，你可以做e.preventDefault();这将阻止表单动作的发生。

<script type="text/javascript"> 
    $(document).ready(function() {
    $('#artist_signup').submit(function(e) {
        e.preventDefault();
        $("#artist_message").html("<span class='error'>Adding your email address...   </span>");
    $.ajax({
        url: 'inc/store-address.php',
        data: $('#artist_signup').serialize(),
        success: function(msg) {
            $('#artist_message').html(msg);
            }
        });
    });
});
</script>
于 2013-06-05T18:00:28.203 回答