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

Murali Murugesan · Accepted Answer · 2013-11-08 16:32:19Z

1

For ID issue, if you use ASP.Net 4.0 +, set 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>

edited Nov 8, 2013 at 16:32

answered Nov 8, 2013 at 15:52

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PeonProgrammer Over a year ago

This was a very helpful response. I will mark your entry as an answer if you could also help me with the code I need to add in place of the pseudo code "send the request" and "do nothing or cancel the request"

Murali Murugesan Over a year ago

@user2855535,as you requested added LoadData for loading data. check it ot

tymeJV · Accepted Answer · 2013-11-08 15:48:19Z

1

Since it's ASP.NET, that ID is going to be rendered different, try grabbing the Client ID (if the JS is in the same file, if it is not, use a unique class and assign the handler via that)

$("#<%=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')
            ..
        }
    });
});

answered Nov 8, 2013 at 15:48

tymeJV

105k14 gold badges165 silver badges158 bronze badges

2 Comments

PlantTheIdea Over a year ago

thank you for using this.value. $(this).val() is bad enough, let alone the $(this).attr('value') that he was using.

tymeJV Over a year ago

@PlantTheIdea -- No need to get jQuery happy :)

Vishal Patel · Accepted Answer · 2013-11-08 15:52:10Z

0

You can also do like below....

<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>

answered Nov 8, 2013 at 15:52

Vishal Patel

9735 silver badges12 bronze badges

1 Comment

PeonProgrammer Over a year ago

Thank you for cleaning up my code. My question wasn't stated explicitly. I wanted to know where my javascript needed to be altered, but also, what kind of logic I need to add in place of the //send the request //do nothing comments. Full code is not necessary, although appreciated.

MakingItUp · Accepted Answer · 2013-11-08 16:03:10Z

0

It's not entirely clear what your question is, but other answers here have rightfully focussed on the ID issue and .Net webforms changing the element's ID.

The other solutions suggested are fine, but there is also another way, and that is searching by partial ID. When clientIDmode isn't set to static (or if you're pre .Net 4.0) the .NET ID will always have the original id appended after an underscore, so you can find your element using jquery like this:

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

edited Nov 8, 2013 at 16:03

answered Nov 8, 2013 at 15:57

MakingItUp

4,7562 gold badges23 silver badges26 bronze badges

1 Comment

PeonProgrammer Over a year ago

You are correct, my question was not explicitly stated. I wanted my code to be critiqued, outlining obvious syntax/logic errors. And what logic I need to add in place of the pseudo "send the request/do nothing" Full code examples is not necessary, although greatly appreciated.

Collectives™ on Stack Overflow

on button click, loop through text boxes javascript

4 Answers 4

2 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related