Question

大家好，我有一个从数据库动态生成的表。这是table。

我拥有所有可以正常工作的代码，但是我只需要适当的执行时间即可 1）检查是否在单击按钮时填充了所有必填字段，否则请不要发送Ajax。 2）在按钮上填充所有必填字段后，单击，然后调用ajax并将适当的值发送给c＃，然后再发送给数据库。

首先，我需要检查是否所有必填字段都已填写（检查必填列（是或否）：

$(function () {
              $("#myButton").on("click", function () {
                  // Loop all span elements with target class
                  $(".IDMandatory").each(function (i, el) {
                      // Skip spans which text is actually a number
                      if (!isNaN($(el).text())) {
                          return;
                      }

                      // Get the value
                      var val = $(el).text().toUpperCase();
                      var isRequired = (val === "TRUE") ? true :
                                       (val === "FALSE") ? false : undefined;

                      // Mark the textbox with required attribute
                      if (isRequired) {
                          // Find the form element
                          var target = $(el).parents("tr").find("input,select");

                          if (target.val()) {
                              return;

                          }
                          // Mark it with required attribute
                          target.prop("required", true);

                          // Just some styling
                          target.css("border", "1px solid red");

                      }
                  });
              })
          });

如果没有，请不要调用ajax并发送值。如果所有字段都已填充，则调用ajax将值发送到c＃。这是一个ajax代码，它从字段和表中获取值，然后将其发送到c＃WebMethod，然后再发送到数据库。

 $(function () {

            $('#myButton').on('click', function () {



                var ddl = $('#MainContent_ddlBusinessCenter').val()

                var myCollection = [];

                $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function (i, e) {
                    var row = $(e);
                    myCollection.push({
                        label: valuefromType(row.find(row.find('td:eq(1)').children())),
                        opis: valuefromType(row.find(row.find('td:eq(3)').children()))
                    });

                });

                console.log(myCollection);
                function valuefromType(control) {
                    var type = $(control).prop('nodeName').toLowerCase();


                    switch (type) {
                        case "input":
                            return $(control).val();
                        case "span":
                            return $(control).text();
                        case "select":
                            ('Selected text:' + $('option:selected', control).text());
                            return $('option:selected', control).text();
                    }
                }
                var lvl = $('#MainContent_txtProductConstruction').val()
                if (lvl.length > 0) {
                    $.ajax({
                        type: "POST",
                        url: "NewProductConstruction.aspx/GetCollection",
                        data: JSON.stringify({ 'omyCollection': myCollection, 'lvl': lvl, 'ddl': ddl }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",

                        success: function (response) {
                            if (parseInt(response.d) > 0)
                                alert("Saved successfully.");
                            else
                                alert("This object already exists in the database!");
                            console.log(response);
                            location.reload(true);
                        },
                        error: function (response) {
                            alert("Not Saved!");
                            console.log(response);
                            location.reload(true);
                        }
                    });
                }
                else {
                    alert("Please fill in the Product Construction field!")
                }
            });

        });

我需要代码来执行第一个必填字段，当它们全部填写后，再调用代码的ajax部分！谁能帮忙！如果您需要更多说明，请询问！预先感谢！

更新Liam帮助分配了我，但ajax不能在按钮单击上工作。

function validate() {

    // Loop all span elements with target class
    $(".IDMandatory").each(function (i, el) {
        // Skip spans which text is actually a number
        if (!isNaN($(el).text())) {
            return;
        }

        // Get the value
        var val = $(el).text().toUpperCase();
        var isRequired = (val === "TRUE") ? true :
                         (val === "FALSE") ? false : undefined;

        // Mark the textbox with required attribute
        if (isRequired) {
            // Find the form element
            var target = $(el).parents("tr").find("input,select");

            if (target.val()) {
                return;

            }
            // Mark it with required attribute
            target.prop("required", true);

            // Just some styling
            target.css("border", "1px solid red");

        }
    });
}



function sendAjax() {
    var ddl = $('#MainContent_ddlBusinessCenter').val()

    var myCollection = [];

    $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function (i, e) {
        var row = $(e);
        myCollection.push({
            label: valuefromType(row.find(row.find('td:eq(1)').children())),
            opis: valuefromType(row.find(row.find('td:eq(3)').children()))
        });

    });

    console.log(myCollection);
    function valuefromType(control) {
        var type = $(control).prop('nodeName').toLowerCase();


        switch (type) {
            case "input":
                return $(control).val();
            case "span":
                return $(control).text();
            case "select":
                ('Selected text:' + $('option:selected', control).text());
                return $('option:selected', control).text();
        }
    }
    var lvl = $('#MainContent_txtProductConstruction').val()
    if (lvl.length > 0) {
        $.ajax({
            type: "POST",
            url: "NewProductConstruction.aspx/GetCollection",
            data: JSON.stringify({ 'omyCollection': myCollection, 'lvl': lvl, 'ddl': ddl }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (response) {
                if (parseInt(response.d) > 0)
                    alert("Saved successfully.");
                else
                    alert("This object already exists in the database!");
                console.log(response);
                location.reload(true);
            },
            error: function (response) {
                alert("Not Saved!");
                console.log(response);
                location.reload(true);
            }
        });
    }
    else {
        alert("Please fill in the Product Construction field!")
    }
}


$(function () {
    $('#myButton').on('click', function () {
        if (validate()){
            sendAjax();
        }
    })



});

Answer 1

如果要按顺序执行这些命令，为什么不添加一个调用每个函数的单击处理程序：

function validate(){
    // Loop all span elements with target class
    $(".IDMandatory").each(function (i, el) {
       // Skip spans which text is actually a number
      ....etc.
}

function sendAjax(){
   var ddl = $('#MainContent_ddlBusinessCenter').val()
   var myCollection = [];
   ..etc.
}

$(function () {
     $('#myButton').on('click', function () {
        validate();
        sendAjax();
     }
});

如果您的validate函数实际上返回true或false（如果您的表单也有效）似乎很有意义。那么您可以：

$(function () {
     $('#myButton').on('click', function () {
        if (validate()){
           sendAjax();
        }
     }
});

我不确定您为什么这么做：

// Mark it with required attribute
target.prop("required", true);

何时验证？如果只是将其添加到HTML中，它将处理必需的内容。在这里添加它似乎有点奇怪。我猜您实际上没有提交表格吗？自己添加验证消息比使用此属性更有意义。

您的代码不起作用，因为您没有从validate函数返回任何内容。我尚不清楚100％有效和无效，因此我无法更改。但是您需要为有效情况添加return true;，为无效情况添加return false;，以使if语句if (validate()){起作用。

单击按钮后，如何在发送ajax之前调用我的validate函数？

1 个答案: