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

  • Question

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