javascript - 表单将不会提交，未捕获的TypeError:非法调用

我尝试使用的表单不​​会提交，尝试时在控制台中不断收到“ Uncaught TypeError：Illegal Invocation”。
非常感谢您的帮助，我不确定是否偶然使用引起问题的系统/保留字。

    <script>
$(document).ready(function($) {
    $("#submit_btn").click(function() {
        //get input field values
        var user_name       = $('input[name=name]').val();
        var user_email      = $('input[name=email]').val();
        var user_add1      = $('input[name=add1]').val();
        var user_add2      = $('input[name=add2]').val();
        var user_town      = $('input[name=town]').val();
        var user_country      = $('input[name=country]').val();
        var user_postcode      = $('input[name=postcode]').val();
        var user_tel      = $('input[name=tel]').val();
        var user_entries      = $('input[name=entries]').val();
        var user_freeentries      = $('input[name=freeentries]').val();
        var user_entries      = $('input[name=entries]').val();
        var user_total      = $('input[name=total]').val();
        var user_question      = $('select[name=question]').val();

        //simple validation at client's end
        //we simply change border color to red if empty field using .css()
        var proceed = true;
        if(user_name==""){
            $('input[name=name]').css('border-color','red');
            proceed = false;
        }

        //everything looks good! proceed...
        if(proceed)
        {

            //data to be sent to server
            post_data = {'userName':user_name, 'userEmail':user_email, 'AddressLine1':user_add1, 'AddressLine2':user_add2, 'town':user_town, 'country':user_country, 'postcode':user_add1, 'tel':user_tel, 'entries':user_entries, 'freeentries':user_freeentries, 'total':total, 'question':user_question};

            //Ajax post data to server
            $.post('enter.php', post_data, function(response){

                //load json data from server and output message
                if(response.type == 'error')
                {
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';

                    //reset values in all input fields
                    $('#contact_form input').val('');
                    $('#contact_form select').val('');
                }

                $("#result").hide().html(output).slideDown();
            }, 'json');

        }
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form input, #contact_form select").keyup(function() {
        $("#contact_form input, #contact_form select").css('border-color','');
        $("#result").slideUp();
    });

});(jQuery);
</script>

这是供参考的表格。正在测试，没有纯文字的奇怪字符。

<fieldset id="contact_form">
                  <div id="result"></div>
                  <input type="text" name="name" id="name" placeholder="Name" />
                  <input type="email" name="email" id="email" placeholder="Email" />
                  <input type="text" name="add1" id="add1" placeholder="Address Line 1" />
                  <input type="text" name="add2" id="add2" placeholder="Address Line 2" />
                  <input type="text" name="town" id="town" placeholder="Town" />
                  <input type="text" name="country" id="country" placeholder="Country" />
                  <input type="text" name="postcode" id="postcode" placeholder="Post Code" />
                  <input type="text" name="tel" id="tel" placeholder="Telephone number" />
                  <input onblur="findTotal()" type="text" name="entries" id="entries" placeholder="Number" />
                  <input type="text" name="freeentries" id="freeentries" placeholder="Number" />
                  <input type="text" name="total" id="total" placeholder="Cost of Entry" />

                  <select style="color:#666" name="question">
                  <option value="">Please Choose...</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                  </select>
                    <br><Br><br><br><br>


                  <label><span>&nbsp;</span>
                    <button class="submit_btn animate swing" data-delay="500" id="submit_btn">Enter</button>
                  </label>
                </fieldset>

                    <script type="text/javascript">
function findTotal(){
    var arr = document.getElementsByName('entries');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = "£" + tot * 50;
}

    </script>

最佳答案

function findTotal(){
    var arr = document.getElementsByName('entries');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = "£" + tot * 50;
}

$(document).ready(function() {
    $("#submit_btn").click(function() {
        //get input field values
        var user_name       = $('input[name=name]').val();
        var user_email      = $('input[name=email]').val();
        var user_add1      = $('input[name=add1]').val();
        var user_add2      = $('input[name=add2]').val();
        var user_town      = $('input[name=town]').val();
        var user_country      = $('input[name=country]').val();
        var user_postcode      = $('input[name=postcode]').val();
        var user_tel      = $('input[name=tel]').val();
        var user_freeentries      = $('input[name=freeentries]').val();
        var user_entries      = $('input[name=entries]').val();
        var user_total      = $('input#total').val();
        var user_question      = $('select[name=question]').val();
        console.log(user_total)
        //simple validation at client's end
        //we simply change border color to red if empty field using .css()
        var proceed = true;
        if(user_name==""){
            $('input[name=name]').css('border-color','red');
            proceed = false;
        }

        //everything looks good! proceed...
        if(proceed)
        {

            //data to be sent to server
            post_data = {'userName':user_name, 'userEmail':user_email, 'AddressLine1':user_add1, 'AddressLine2':user_add2, 'town':user_town, 'country':user_country, 'postcode':user_add1, 'tel':user_tel, 'entries':user_entries, 'freeentries':user_freeentries, 'total':user_total, 'question':user_question};
            console.log(post_data)

            //Ajax post data to server
            $.post('enter.php', post_data, function(response){

                //load json data from server and output message
                if(response.type == 'error')
                {
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';

                    //reset values in all input fields
                    $('#contact_form input').val('');
                    $('#contact_form select').val('');
                }

                $("#result").hide().html(output).slideDown();
            }, 'json');

        }
    });

    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form input, #contact_form select").keyup(function() {
        $("#contact_form input, #contact_form select").css('border-color','');
        $("#result").slideUp();
    });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Here is the form for reference. it is being tested with no strange characters just plain text.

<fieldset id="contact_form">
                  <div id="result"></div>
                  <input type="text" name="name" id="name" placeholder="Name" />
                  <input type="email" name="email" id="email" placeholder="Email" />
                  <input type="text" name="add1" id="add1" placeholder="Address Line 1" />
                  <input type="text" name="add2" id="add2" placeholder="Address Line 2" />
                  <input type="text" name="town" id="town" placeholder="Town" />
                  <input type="text" name="country" id="country" placeholder="Country" />
                  <input type="text" name="postcode" id="postcode" placeholder="Post Code" />
                  <input type="text" name="tel" id="tel" placeholder="Telephone number" />
                  <input onblur="findTotal()" type="text" name="entries" id="entries" placeholder="Number" />
                  <input type="text" name="freeentries" id="freeentries" placeholder="Number" />
                  <input type="text" name="total" id="total" placeholder="Cost of Entry" />

                  <select style="color:#666" name="question">
                  <option value="">Please Choose...</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                  </select>
                    <br><Br><br><br><br>


                  <label><span>&nbsp;</span>
                    <button class="submit_btn animate swing" data-delay="500" id="submit_btn">Enter</button>
                  </label>
                </fieldset>

您在post_data请求中的$.post序列化有问题。检查post_data对象中的所有值是否都已正确序列化：这意味着您的数据必须是纯对象或字符串或数组。您也可以尝试在processData: false设置中设置ajax（可以找到列表here）。

编辑：再次看到html和yur代码后，发现输入的值不是传递的“总计”，而是传递了错误的值total而不是正确的user_total，从而导致错误。
更正于`post_data。请参阅更正的代码段。