javascript - on button click, loop through text boxes javascript

Question

I am trying to make a function actuated by a button click. On click, a function loops through each input type=text element, assigns their value attribute to variable, if that variable = null or variable = "" call method confirm('are you sure you want to save a blank row'). Here's my code/pseudo code:

<script type="text/javascript">
    function isInputEmpty() {
        $("#btnSave").click(function(){
            $('input[type=text]').each(function(){
                var x = $(this).attr('value');
                var bool = false;
                if(x == null || x == "")
                {
                    bool = true;
                }
                else
                {
                    send the request
                }
                if(bool == true)
                {
                    if(confirm('Are you sure you want to save a blank URL?'))
                    {
                        send the request
                    }
                    else
                    {
                        do nothing or cancel the request
                    }
                }
                else
                {
                    send the request
                }
             }
        }
</script>

Here is my asp button code:

<asp:Button ID="btnSave" runat="server" Text="Save"/>

If you need more information, please let me know. Thanks in advance

Answer 1

由于它是 ASP.NET，该 ID 将呈现不同，请尝试获取客户端 ID（如果 JS 在同一个文件中，如果不是，请使用唯一的类并通过它分配处理程序）

$("#<%=btnSave.ClientID%>").click(function() {
    $("input:text").each(function() {
        if (!this.value.length) {
            var confirm = confirm('are you sure you want to save a blank row')
            ..
        }
    });
});

Answer 2

对于 ID 问题，如果您使用 ASP.Net 4.0 +，请设置ClientIDMode=Static

 <asp:Button ID="btnSave" runat="server" ClientIDMode="Static" Text="Save"/>

JS

<script type="text/javascript">
 function isInputEmpty() {
    $("#btnSave").click(function(){
        $('input[type=text]').each(function(){
            var x = this.value;

            var bool = false;
            if(x === null || x === "")
            {
                bool = true;
            }
            else
            {
                send the request
            }
            if(bool === true)
            {
                if(confirm('Are you sure you want to save a blank URL?'))
                {
                    LoadData();
                }
                else
                {
                    return;//do nothing
                }
            }
            else
            {
                send the request
            }
         }
    }


function LoadData()
{
$.ajax({
    type: "GET",
    url: 'page.aspx',       
    timeout: 1000,        
    success:function(data){    
     //do work
    },
    error:function(jqxhr, status){
     if(status==="error"){
     //handle error
     }    
 });
}
</script>

Answer 3

你也可以像下面这样......

<script type="text/javascript">
            function isInputEmpty() {
                var bool = false;
                $("#btnSave").click(function () {
                    $('input[type=text]').each(function () {
                        var x = $(this).attr('value');
                        if (x == null || x == "") {
                            bool = true;
                        }
                    });

                    if (bool == true) {
                        if (confirm('Are you sure you want to save a blank URL?')) {
                            //send the request
                        }
                        else {
                            //do nothing or cancel the request
                        }
                    }
                    else {
                        //send the request
                    }
                });
            }
        </script>

Answer 4

目前尚不完全清楚您的问题是什么，但这里的其他答案正确地集中在 ID 问题和更改元素 ID 的 .Net 网络表单上。

建议的其他解决方案很好，但还有另一种方法，即按部分 ID 搜索。当 clientIDmode 未设置为静态时（或者如果您是 .Net 4.0 之前的版本），.NET ID 将始终在下划线后附加原始 id，因此您可以使用 jquery 找到您的元素，如下所示：

$("[id$='_btnSave']").click(function(){   ...