Remove From My Forums

how to remove fields then add them back when radio button is selected

Question
0

Sign in to vote

User-452285847 posted

Hi how do i write the code for when the radio button is selected the fields are remove() then when another radio button is selected then the fields are added back in so far i have this codes but when i change the selection of the radio button the fields dont seem to appear back they are just removed. is there a way to add the fields back once remove. Thanks for the help :)

$(document).ready(function () {

$('#rb1').click(function () {
$("#ED").show();
});
$('#rb2').click(function () {
$('#ED').remove();
});

Monday, December 24, 2018 2:25 PM

All replies

User283571144 posted

Hi learningintern,

As far as I know, if you want to remove and re-add the html element, you couldn’t use show function.

Since if you use remove function , it will directly remove all the html codes in the page, then if you use show, it will not display, since they are not there.

I suggest you could use document.createElement to create the element and re-add it when click the radio button.

More details, you could refer to below codes:

<script src="../Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#rb1').click(function () {
                var a = document.createElement("input");
                a.id = "ED";
                a.type = "text";
                a.value = "hello world";              
                $("body").append(a);
            });

            $('#rb2').click(function () {
                $("#ED").remove();
            });
        });
    </script>

<body>
    <input type="radio" name="r" id="rb1" />
    <input type="radio" name="r" id="rb2" />
    
</body>

Result:

Besides, if you don’t want to remove the whole element, I suggest you could use jquery css method to add the css style display none to hide the html element.

Then you could modify the css style to add it back.

Code:

 <script src="../Scripts/jquery-1.10.2.js"></script>
  <script>
      $(function () {
          $("#rb1").click(function () {
              $("#ED").css("display","inline-block");
          });
          $("#rb2").click(function () {
              $("#ED").css("display", "none");
          });
      })
  </script>
<body>
    <input type="radio" name="r" id="rb1" />
    <input type="radio" name="r" id="rb2" />
    <input id="ED" type="text" value="hello world" />

</body>

Result:

Best Regards,

Brando

Tuesday, December 25, 2018 7:46 AM

0

Sign in to vote

User-452285847 posted

hi Brando,

i think i need to use something similar to the first method u explained but i am using MVC as part of my coding as well so the fields have validations to go thru

so for example if user select rb1 then additional fields will appear but if they select rb 2 the fields need to be remove as the additional fields have "asp-validation-for" on them so if i use the second method it doesnt allow me to submit the form as the additional fields are not filled but they are also not required to be filled if rb2 is selected

As for the ur method 1 is there a way i can call my asp-for instead of doing a document.createElement as i have quite a lot of additional fields that need to shown when rb1 is selected..

Thank You for the help!

appreciate it.

Tuesday, December 25, 2018 8:40 AM
0

Sign in to vote

User-474980206 posted
The easiest would be to use .hide() rather than .remove(). But if you want to use asp-for, then you use Ajax to call an action that returns a partial view. The Ajax then loads this html into the dom.

Tuesday, December 25, 2018 5:22 PM

Asked by:

how to remove fields then add them back when radio button is selected

Question

All replies