JQuery, AJAX форма отправки не работает. Страница вылетает

Question

Я пытаюсь получить форму отправки без перезагрузки страницы.

Вот сценарий:

$(function() {
    $("#submit").click(function() {
        var email = document.getElementById('emailaddress');
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!filter.test(email.value)) {
            $('#invalidmail').show();
            var t=setTimeout(function(){$('#invalidmail').fadeOut("slow");},2000);
            email.focus;
            return false;
        } else {    
            $.ajax({
                type: "POST",
                url: "traces_form_handler.cgi",
                data: email,
                success: function(){
                    alert("success!");
                }
            });
            alert("success!");
            return false;
        };

      });  
});
</script>

и вот HTML

<form name="form" method="post">
    Email: <input type="text" name="email" id="emailaddress" />
    <input type="submit" value="Submit" id="submit"/>
    </form>        
   <p id="invalidmail">Ops! The address you provided is not valid. Please retry.</p>

работает до тех пор, пока не отправит недействительную почту, но если я отправлю действительный адрес электронной почты, браузер вылетит.

Есть предложения?

Спасибо

Answer 1

Я не знаю, приведет ли это к краху браузера.Но вы отправляете элемент dom как данные в запрос ajax, где, я думаю, вы хотите просто отправить его значение.

        $.ajax({
            type: "POST",
            url: "traces_form_handler.cgi",
            data: { email: email.value },//Check here in your code
            success: function(){
                alert("success!");
            }
        });

Answer 2

Вы можете использовать форму отправки события, это лучше

HTML

<form id="myForm" name="form" method="post">
  Email: <input type="text" name="email" id="emailaddress" />
  <input type="submit" value="Submit" id="submit"/>
</form> 
<p id="invalidmail">Ops! The address you provided is not valid. Please retry.</p>

JS

$(function() {
​$("#myForm").on('submit', function(e){
e.preventDefault();
var email=$("#emailaddress");
var filter = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
    if (!filter.test(email.value)) {
        $('#invalidmail').show();
        var t=setTimeout(function(){
            $('#invalidmail').fadeOut("slow");},2000);
        email.focus;
        return false;
    }
    else 
    {    
        $.ajax({
            type: "POST",
            url: "my_server-page.php",
            data: email.val(),
            success: function(data){
                alert("success!");
            }
        });
    }

});​​
});

Answer 3

Этот атрибут вызывает проблему

url: "traces_form_handler.cgi",

Я протестировал его в своем браузере. FF 10.0.2

Вкл. Ошибка консоли: Ошибка: необработанное исключение: [Исключение ...«Не удалось преобразовать аргумент JavaScript» nsresult: «0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS) :: строка 7601» данные: нет]

Solution: url:"some_valid_url_.php"