0

我在所有浏览器中都收到此错误“ jQuery SyntaxError: missing : after property id ”，我不知道如何解决。我已经通过 lint 运行了代码，我得到了同样的错误。代码中的违规行是：

$('#BA_boxform input:submit').on('click', function () {

由于我是 jquery/js 的新手，如果有人能告诉我哪里出错了，我将不胜感激。谢谢

jQuery代码

// function to connect to php and process form values

$(function(){
        $("#BA_boxform").validate({
        rules: {
            name: { required: true },
            lname: { required: true }
        },
        messages: {
            name: { required: "* required" },
            lname: { required: "* required" }
        },
        $('#BA_boxform input:submit').on('click', function () {

        var formdata = $('#BA_boxform').serialize() + '&submit=' + $(this).val();

         //alert(formdata);
         $.ajax({
           type: "POST",
           url: "/sample/admin/requests/boxes/boxesadd.php",
           data: formdata,
           dataType: 'json',
           success: function(msg){
               if(typeof msg.boxerrortext !== "undefined" && msg.boxerrortext == "You need to input a box")
                   {
                     $("#BA_addbox").html(msg.boxerrortext);
                   }
               else
                   {
                     $("#BA_addbox").html("You have successfully added box " + msg.box + " to the archive.");
                   }
               //$("#confirm_department").hide();

               /*
               var $dialog = $('<div id="dialog"></div>')
               .html('Your intake was successfully submitted and will be viewable in the reporting area.<br /><br />Thank you.');
               $dialog.dialog({
               autoOpen: true,
               modal: true,
               title: 'Box intake submission successfull',
               width: 400,
               height: 200,
               draggable: false,
               resizable: false,
               buttons: {
               Close: function() {
               $( this ).dialog( "close" );
               }
               }
               });
               */
               //alert(msg);
               //console.log(msg);
               //$("#BA_addbox").html(msg.box);

               //$("#formImage .col_1 li").show();
               //$("#BA_boxform").get(0).reset();
               //$("#boxaddform").hide();
          }
       });
         return false;
     });
   });
});

// end php processing
// End function to submit box intake form
4

4 回答 4

3

我认为你的 jquery 应该是这样的：

侦听器$('#BA_boxform input:submit').on('click', function ()应该独立于validate方法。

$(function () {
    $("#BA_boxform").validate({
        rules: {
            name: {
                required: true
            },
            lname: {
                required: true
            }
        },
        messages: {
            name: {
                required: "* required"
            },
            lname: {
                required: "* required"
            }
        },
    });

    $('#BA_boxform input:submit').on('click', function () {

        var formdata = $('#BA_boxform').serialize() + '&submit=' + $(this).val();

        //alert(formdata);
        $.ajax({
            type: "POST",
            url: "/sample/admin/requests/boxes/boxesadd.php",
            data: formdata,
            dataType: 'json',
            success: function (msg) {
                if (typeof msg.boxerrortext !== "undefined" && msg.boxerrortext == "You need to input a box") {
                    $("#BA_addbox").html(msg.boxerrortext);
                } else {
                    $("#BA_addbox").html("You have successfully added box " + msg.box + " to the archive.");
                }
                //$("#confirm_department").hide();

                /*
               var $dialog = $('<div id="dialog"></div>')
               .html('Your intake was successfully submitted and will be viewable in the reporting area.<br /><br />Thank you.');
               $dialog.dialog({
               autoOpen: true,
               modal: true,
               title: 'Box intake submission successfull',
               width: 400,
               height: 200,
               draggable: false,
               resizable: false,
               buttons: {
               Close: function() {
               $( this ).dialog( "close" );
               }
               }
               });
               */
                //alert(msg);
                //console.log(msg);
                //$("#BA_addbox").html(msg.box);

                //$("#formImage .col_1 li").show();
                //$("#BA_boxform").get(0).reset();
                //$("#boxaddform").hide();
            }
        });
    });
});

还有一件事..您需要做，因为验证在表单上，​​而您的侦听器在提交按钮上，这不起作用：

$('#BA_boxform').on('submit', function ()
于 2013-06-28T17:55:05.640 回答
2

问题是有问题的代码行没有变量名。该函数在“选项”或属性列表中的逗号之后传递。如果该方法应该作为事件处理程序传递，则需要执行以下操作：

// 连接到 php 并处理表单值的函数

$(function(){
    $("#BA_boxform").validate({
    rules: {
        name: { required: true },
        lname: { required: true }
    },
    messages: {
        name: { required: "* required" },
        lname: { required: "* required" }
    },
    myEventHandler: $('#BA_boxform input:submit').on('click', function () {
// rest of code snippet you had

也就是说，我不确定这就是你想要做的。看起来您正在添加一个单击处理程序作为 validate 函数的选项的一部分。考虑到您正在调用一行代码而不是传递方法处理程序，我猜您的意思是：

$(function(){
    $("#BA_boxform").validate({
    rules: {
        name: { required: true },
        lname: { required: true }
    },
    messages: {
        name: { required: "* required" },
        lname: { required: "* required" }
    }
   }); 
// Validate is ended

// now add your event handler
  $('#BA_boxform input:submit').on('click', function () {

// rest of code snippet you had

以上回答了原来的问题。 我将尝试回答已接受答案的评论中提出的刷新问题。我的大部分建议都是基于一些关于未显示的 html 代码的假设。

好的 - 要停止刷新，有两个简单的选项。
1.将提交按钮从更改<input type='submit'/>为<input type='button'/> 2.在点击处理程序上返回false（就像你正在做的那样）（我上面的评论有误）。

尝试 #2 后您仍然刷新的可能原因是 javascript 停止处理中的错误。将 html 中的输入类型更改为“按钮”而不是提交。然后删除 jquery 选择器中的提交并改为按类或 id 引用按钮$('#BA_boxform').find('.classOfYourButton').on('click', function () {。如果您没有点击 return false 部分，这应该会阻止任何意外发布。

除此之外，我不确定问题是什么。正如其他人所说，在更正了 validate 方法的关闭之后，代码是正确的（尽管它没有做你想要的）。如果您将它们发布在带有其他相关代码的新问题中，则更容易进行故障排除。

于 2013-06-28T18:04:48.970 回答
2

乍一看，你的$("#BA_boxform").validate()还没有关闭

于 2013-06-28T17:54:30.583 回答
0

你确定你正确地写了选择器

var $dialog = $('<div id="dialog"></div>')

因为我认为应该只是

var $dialog = $('#dialog')

或者如果你想创建一个新元素，请使用 append 代替。

于 2013-06-28T17:58:34.523 回答