Click here to Skip to main content
15,881,757 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
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
Updated 24-Aug-12 3:39am
v3

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.
 
Share this answer
 
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
 
Share this answer
 
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
 
Share this answer
 
v2
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
 
Share this answer
 
Comments
Sandip.Nascar 22-Aug-12 14:39pm    
close button, I leave this to you. Pretty straight forward to implement.
ureachnag 24-Aug-12 9:32am    
Sandip.Nascar, Thank you very much for your reply. I am new to JQuery some how Show/Hide is working, the problem is - if the page refreshes , all the divs are hiding. I am posting my code, once again thank you so much,

Nag
Sandip.Nascar 24-Aug-12 12:05pm    
yes, when you refresh, postback occurs and thus the previous state disappears.
To cater this, you need to store the last state to regain it.
Sandip.Nascar 24-Aug-12 15:49pm    
Who is the guy marking downvote here? Come here and write your comment for the reason for downvoting.

Don't do sabotage in the site.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900