How to hide and Show Textboxes in client side..

Question

4.00/5 (1 vote)

See more:

I have 10 Text boxes, first text box is visible always. If the user enters any value in the first text box then click the button(add button) 2nd textbox has to visible and so on.If they click the close button that particular div has to close and it should not be a empty space.

I wanted this in client side, can any one help me please.

***(Aug 24 2012)*** After couple of days struggle I can able to do using JQuery, I am new to JQuery, by using the below code I am showing and Hiding the Div's, but the problem is - if the page refreshes all div's are closing. If there is any value in the text box that Div should be visible, Can any body help me to solve this please,

Appreciate your help

     $(document).ready(function() {
//         if ($("#ctl00_ContentPlaceHolder1_txtaddPhone2").val() == '') { $('#divphone2').hide(); }
//         if ($("#ctl00_ContentPlaceHolder1_txtaddPhone3").val() != '') { $('#divphone3').hide(); }
         $('#divphone3').hide();
         $('#divphone2').hide();  
         $('#showr').click(function() {            
             if ($("#ctl00_ContentPlaceHolder1_txtaddPhone1").val() != '') { $('#divphone2').show("slow"); }
             if ($("#ctl00_ContentPlaceHolder1_txtaddPhone2").val() != '') { $('#divphone3').show("slow"); }
             if ($("#ctl00_ContentPlaceHolder1_txtaddPhone3").val() != '') { $('#divphone4').show("slow"); }
             if ($("#ctl00_ContentPlaceHolder1_txtaddPhone4").val() != '') { $('#divphone5').show("slow"); }
         });
     });
     $(document).ready(function() {
         $('#ctl00_ContentPlaceHolder1_hidr').click(function() {
         $("#ctl00_ContentPlaceHolder1_txtaddPhone2").val('');
         $('#divphone2').hide("slow");            
         });

         $('#ctl00_ContentPlaceHolder1_hid2').click(function() {
         $("#ctl00_ContentPlaceHolder1_txtaddPhone3").val('');
         $('#divphone3').hide("slow");
          });
     });

Thanks,
Nag

Posted 22-Aug-12 7:55am

ureachnag

Updated 24-Aug-12 3:39am

v3

Add a Solution

5 solutions

Solution 1

You need for your buttons to call a javascript method, taking the id of the next control to show, and set it to show using jquery, like:

$("#elementID").show();

Assuming you use display:none to hide it.

Don't forget, if it's set to be not visible in your code behind, it just won't be there at all, so you can't do that.

Posted 22-Aug-12 8:09am

Christian Graus

Solution 2

Please check this

http://www.w3schools.com/jquery/jquery_events.asp[^]

Posted 22-Aug-12 8:11am

Suman Zalodiya

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandip.Nascar · Accepted Answer · 2012-08-24T08:00:00

Okay, this is the basic of how web page works.

When you refresh a page, you are re submitting the request, so the page loads from begining...

So, you have 2 choices,
1. don't refresh the page or do any postback from control. That means you need to use AJAX to do any server operation
2. use any persistent storage like
session
cookie
hiddenfields
to store the data. So that when the page refreshes, you can get the data from persistent storage and set the data into the controls.

Hope this helps.
cheers

ureachnag · Accepted Answer · 2012-08-24T04:17:00

I Solved this by using the below code

if ($("#ctl00_ContentPlaceHolder1_txtaddPhone2").val() == '') { $('#divphone2').hide(); }
         if ($("#ctl00_ContentPlaceHolder1_txtaddPhone3").val() == '') { $('#divphone3').hide(); }
         if ($("#ctl00_ContentPlaceHolder1_txtaddPhone4").val() == '') { $('#divphone4').hide(); }

Thank you very much to one and all for your help.

-Nag

Sandip.Nascar · Accepted Answer · 2012-08-22T08:36:00

Here is the full source code

<div>
    <input type="text" id="text_1" /><input type="button" id="btn_1" class="addtextbutton" onclick='doclick()' value="Add" /><br />
    <div id="div_1" style="clear:right;"></div>
    <div id="div_2" style="clear:right;"></div>
    <div id="div_3" style="clear:right;"></div>
    <div id="div_4" style="clear:right;"></div>
    <div id="div_5" style="clear:right;"></div>
</div>

<script type="text/javascript">
    var cnt = 1;

    doclick=function(){
        if (cnt == 5) return;
        if ($('#' + 'text_' + cnt).val() != '') {
            var control_string = "<input type='text' id='text_" + parseInt(cnt + 1) + "'/><input type='button' id='Button" + parseInt(cnt + 1) + "' onclick='doclick()' value='Add' />";
            $('#div_' + parseInt(cnt + 1)).html(control_string);
            cnt++;
        }
    }
</script>

Hope this helps.
cheers

How to hide and Show Textboxes in client side..

5 solutions

Solution 1

Solution 5

Solution 4

Solution 3

Solution 2

Add your solution here

Preview 0