在Java Script Function中编写JQuery函数的正确方法是什么

时间:2019-05-25 14:41:55

标签: javascript jquery

我已经编写了一个Java脚本函数,可以单击enterCPDetails形式的提交按钮来运行。我要对此进行检查,然后运行AJAX调用。但它不起作用

function sumbitNewCPTabDataChk() {
   //If i comment the next line my code works
   $("#enterCPDetails").on("submit", function (event) {

    var newCPDetailsTab = document.getElementById('newCPDetailsTable');
    var newCPNoInput=document.getElementById('newCPNo');
    var newCPNoInputValue=newCPNoInput.value;
    if(newCPNoInputValue===""){
        alert("Please enter CP No.");
    }
    // LOOP THROUGH EACH ROW OF THE TABLE.
    else{
        for (row = 1; row <= newCPDetailsTab.rows.length - 1; row++) { 
            // loop through each ceel in row
            for (c = 0; c < newCPDetailsTab.rows[row].cells.length; c++) {   
                //get the cell element in variable
                var element = newCPDetailsTab.rows.item(row).cells[c];
                //check if the child element of cell is text or not. If 
   text then check if it is not empty
                if (element.childNodes[0].getAttribute('type') === 'text') 
                {
                    var valueinCell=element.childNodes[0].value ;
                    if (valueinCell === "" ) { 
                        alert("Please fill complete data in the table.");
                        exit();
                    }

                }
                else{
                    alert("asdf");
                    var rowCnt= newCPDetailsTab.rows.length; 
                    document.getElementById('cntTableRows').value=rowCnt;
                    event.preventDefault();
                    $.ajax({
                        url: "../web/addNewCPDetaills.php",
                        type: "POST",
                        data: "enterCPDetails".serialize(),
                        success: function (result) {
                        console.log(result);
                        }
                    });
                }
            }
        }
    }
});
}

如果我评论这一行     $(“#enterCPDetails”)。on(“ submit”,function(event){

我的功能正常工作。但是用这条线就没有。为什么?

1 个答案:

答案 0 :(得分:0)

据我所知,我假设您已经将 onclick 事件处理程序附加到了提交按钮上,该按钮调用了函数 sumbitNewCPTabDataChk()。这不是必需的,因为本质上就是Jquery的 submit 事件。

因此摆脱单击处理程序,函数sumbitNewCPTabDataChk的使用,只需使用Jquery的提交,如:

   $("#enterCPDetails").on("submit", function(event) {

     var newCPDetailsTab = document.getElementById('newCPDetailsTable');
     var newCPNoInput = document.getElementById('newCPNo');
     var newCPNoInputValue = newCPNoInput.value;
     if (newCPNoInputValue === "") {
       alert("Please enter CP No.");
     }
     // LOOP THROUGH EACH ROW OF THE TABLE.
     else {
       for (row = 1; row <= newCPDetailsTab.rows.length - 1; row++) {
         // loop through each ceel in row
         for (c = 0; c < newCPDetailsTab.rows[row].cells.length; c++) {
           //get the cell element in variable
           var element = newCPDetailsTab.rows.item(row).cells[c];
           //check if the child element of cell is text or not. If  text then check if it is not empty
           if (element.childNodes[0].getAttribute('type') === 'text') {
             var valueinCell = element.childNodes[0].value;
             if (valueinCell === "") {
               alert("Please fill complete data in the table.");
               exit();
             }

           } else {
             alert("asdf");
             var rowCnt = newCPDetailsTab.rows.length;
             document.getElementById('cntTableRows').value = rowCnt;
             event.preventDefault();
             $.ajax({
               url: "../web/addNewCPDetaills.php",
               type: "POST",
               data: "enterCPDetails".serialize(),
               success: function(result) {
                 console.log(result);
               }
             });
           }
         }
       }
     }
   });