Show hide text box from a dynamic element jQuery c#

Question

Below is my code, I am trying to hide and show dynamic elements. The problem I am having is, I only want my hidden div to only show one at a time if only I check "Other". However, the code below will show the hidden div for all number of #dynamicRows I have. so it works for initial 1st #dynamicRow added, the problem is when I have two or more #dynamicRows

$('#dynamicRow').on('click', 'input[id^=race]', function () {
    if ($(this).is(":checked")) {
        if ($(this).val() == "Other") {
            $(".cssclass").each(function (index) {                    
                $(this).closest("div").show();
            });

        }
        else {
            $(".cssclass").each(function () {
                $(this).closest("div").hide();

            });
        }
    }
});

Below are dynamic rows, for help purposes i am showing the html code, however, it doesn't exist on the screen, a user will click "ADD" to generate the code below. I have no problem in generating dynamic row and it is not why I am posting. note the name in my radio button is generated by c# and everything works. Again the problem is not how to create a dynamic row, it is nicely taken care of in C#.

Dynamic row one works with the above jQuery:

<div id="dynamicRow">
    <input type="radio" value="No" id="race[]" name="Person[hhhhhh].race"> No:
    <input type="radio" value="Other" id="race[]" name="Person[hhhhhh].race"> Other:

    <div id="iamhidden" class="cssclass">
        I appear one at a time, when other radio button is checked
    </div>      
</div>

Dynamic row two doesn't work with the above jquery and it takes the above form events as its own, so if i check the radio button in row 2, the 1st dynamic row responds to that event and vice versa:

<div id="dynamicRow">
    <input type="radio" value="No" id="race[]" name="Person[hhhhh].race"> No:
    <input type="radio" value="Other" id="race[]" name="Person[hhhhh].race"> Other:

    <div id="iamhidden" class="cssclass">
        I appear one at a time, when other radio button is checked
    </div>      
</div>

IDs should be unique, if you want to assign IDs to more than 1 element use classes. — Chris, Apr 05 '16 at 15:53
You have to consider the user of .each(). This thread may help you I hope: http://stackoverflow.com/questions/18966222/jquery-each-and-attaching-click-event just as an example. Also avoid using id, try to identify elements using html tags any way. — Khadim Ali, Apr 05 '16 at 15:55
@Chris i can't assign ids because the html is a dynamic form and it is generated in c# that is why i have a class call cssclass — NULL, Apr 05 '16 at 15:55
Bind the on to the body instead of the ID. That should solve your problem I believe. — Chris, Apr 05 '16 at 15:58
@Chris the id "dynamicRow" i am using is the how ajax append my dynamic row, not to the body. — NULL, Apr 05 '16 at 16:00

Zakaria Acharki · Accepted Answer · 2016-04-06T08:18:12.317

0

Working Example

id should be unique in same document, replace the duplicate ones by a class :

<input type="radio" value="No" class="race" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" class="race" name="Person[hhhhhh].race"> Other:

Also add class and not id to the dynamic rows generated by your C# code :

<div class="dynamicRow">

Then in your js use this class :

$(".cssclass").hide();
$('.dynamicRow').on('click', '.race', function () {
    if ($(this).val() == "Other") {
      $(this).next(".cssclass").show();
    } else {
      $(this).nextAll(".cssclass").hide();
    }
});

Hope this helps.

edited Apr 06 '16 at 08:18

answered Apr 05 '16 at 15:56

Zakaria Acharki

66,747
15
75
101

my posted jquery works, it is the foreach loop. i need to show and hide based on the index that I am currently at. – NULL Apr 05 '16 at 15:58
What you mean by works? using the same `id` in all rows generate ana invalid HTML code and it can generate bugs. – Zakaria Acharki Apr 05 '16 at 16:04
i mean it works because jquery event is trigger when initial row is 1, even when row is 2. btw, i have class=race and that also didn't work. basically if i have 5 rows of dynamic div, and i check on "other" radio button, all the rest of the form shows the hidden div. – NULL Apr 05 '16 at 16:12
I doesn't work, and it is just like my original question. did you see how when i click on an event "no" not in the same row as the "other" the div goes away? – NULL Apr 05 '16 at 16:36
man you are so close with your answer. so when i am in a row, and i click "no" i should see nothing, in the same row, if i click "other" i should see the div, now if i go to the next row, the same process follows. currently with your answer, when i click "other" and then change to "no" div still stays. – NULL Apr 05 '16 at 16:58

score 0 · Answer 2 · answered Apr 05 '16 at 16:04

Try this:

$('body').on('click', '#dynamicRow', function () {
    if ($(this).find('[value=Other]').is(":checked")) {
        $(".cssclass").each(function (index) {                    
            $(this).closest("div").show();
        });
    } else {
        $(".cssclass").each(function () {
            $(this).closest("div").hide();
        });
    }
});

score 0 · Answer 3 · answered Apr 05 '16 at 16:38

He is a working example of what you wanted. I am generating the required with js only.

Few Points to mention

you add the event listener to the parent of the dynamic generated content.
Avoid use of IDs if they are not going to be unique and prefer classes and pseudo selectors if required

var counter = 0;
function addNewEntry(){
  ++counter;
  var str = '<div class="dynamicRow"><input type="radio" value="No" id="race[]" name="Person[hh'+counter+'].race"> No:<input type="radio" value="Other" id="race[]" name="Person[hh'+counter+'].race"> Other:<div id="iamhidden" class="cssclass"> I appear one at a time, when other radio button is checked</div> </div>';
  $('#dynamicRowContainer').append(str);
  $("#dynamicRowContainer .dynamicRow:last-child .cssclass").hide()
}
$('#dynamicRowContainer').on('change', '.dynamicRow > input', function () {
   if(this.value=="Other"){
       $(this).siblings('.cssclass').show();
     }else{
       $(this).siblings('.cssclass').hide();
     }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addNewEntry()">Add New Entry</button>
<div id="dynamicRowContainer">

</div>

I just saw how you generated the form, of course that will work, but i am using C# to generate a collection of form fields, and these variables are already provided by the system and I need to work with what I posted. if i was appending using js then it will work, however, it is not the case, thanks though. — NULL, Apr 05 '16 at 17:24

Show hide text box from a dynamic element jQuery c#

3 Answers3