1

我正在尝试将联系页面数据发布到我的视图中，但是当我包含if else语句时它停止工作。

这是我的脚本：

<script>
 function Submit()
{
    var name = document.getElementById('contact-name').value;
    var email = document.getElementById ('contact-email').value;
    var subject = document.getElementById ('contact-subject').value;
    var message = document.getElementById ('contact-message').value;
    var data =  {"name":name,"email":email,"subject":subject,"message":message,csrfmiddlewaretoken:'{{ csrf_token }}'};
    if (name && email && message)
  {
    $.ajax({ // create an AJAX call...
        data: data, // get the form data
        type: "POST", // GET or POST
        url: "", // the file to call
        dataType: "json",
        success: function(response) { // on success..
                alert(response['message']);

        }
    });

    }else
    {
    return true;
    } 
}
</script>

这是我的表格：

        <form class="contact-form">
        {% csrf_token %}
            <p class="input-block">
                <label for="contact-name"><strong>Name</strong> (required)</label>
                <input type="text" name="name" value="" id="contact-name" required>
            </p>

            <p class="input-block">
                <label for="contact-email"><strong>Email</strong> (required)</label>
                <input type="email" name="email" value="" id="contact-email" required>
            </p>

            <p class="input-block">
                <label for="contact-subject"><strong>Subject</strong></label>
                <input type="text" name="subject" value="" id="contact-subject">
            </p>

            <p class="textarea-block">
                <label for="contact-message"><strong>Your Message</strong> (required)</label>
                <textarea name="message" id="contact-message" cols="88" rows="6" required></textarea>
            </p>

            <div class="hidden">
                <label for="contact-spam-check">Do not fill out this field:</label>
                <input name="spam-check" type="text" value="" id="contact-spam-check" />
            </div>

            <input type="submit" value="Submit" onclick="javascript:Submit();">

            <div class="clear"></div>

        </form>

没有if else它，它工作正常，但现在所有页面都重新加载所有表单数据作为查询参数。我该如何纠正？

4

4 回答 4

1

首先，如果您尝试执行 AJAX，则需要阻止默认操作。因为，我看到你已经在使用 jQuery。我建议将以下内容添加到您的顶部<script>：

$("#contact-form").submit(function(e){
   e.preventDefault();
   Submit();
});

显然，你不再需要这个了..

onclick="javascript:Submit();"

现在在任何类型的 javascript 调试器中运行这段代码（Chrome 和 Safari 都有不错的调试器），你应该很好！

于 2013-05-30T17:21:12.613 回答
0

Submit()你需要从你的函数中返回一个 false 。onsubmit另外，使用句柄从表单标签调用函数。

<form class="contact-form" onsubmit="Submit();">

并在Submit()功能上：

        success: function(response) { // on success..
            alert(response['message']);
        }
    });
    return false;
} else {
    return true;
}
于 2013-05-30T17:20:06.410 回答
0

请试试这个..我希望它有效...

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".contact-form").submit(function(e){
            e.preventDefault();
            Submit();
});
});

</script>
<script>
 function Submit()
{
    var name = document.getElementById('contact-name').value;
    var email = document.getElementById ('contact-email').value;
    var subject = document.getElementById ('contact-subject').value;
    var message = document.getElementById ('contact-message').value;
    var data =  {"name":name,"email":email,"subject":subject,"message":message,csrfmiddlewaretoken:'{{ csrf_token }}'};
    if (name && email && message)
  {
    $.ajax({ // create an AJAX call...

        data: data, // get the form data
        type: "POST", // GET or POST
        url: "", // the file to call
        dataType: "json",
        success: function(response) { // on success..
            alert(response['message']);

        }
    });
    return false;
}
}
于 2013-05-31T05:35:56.670 回答
-1

  1. 不要javascript:在onxxx事件处理程序中使用。javascript:是 URL 上的协议说明符，但onclick处理程序需要原始 javascript，而不是 URL。

  2. 您需要false从中返回onclick以防止提交表单的默认操作。我假设您确实想阻止默认设置并改用 AJAX？

于 2013-05-30T17:16:32.327 回答