Some more functionality in HTML/CSS Code

@Pullo:

Sorry for late reply
can you highlight where is error in my code?

Did you look in the console?

yes
there are 2 errors
I have fixed Validate() function error
but I do not understand what is meaning of

“Use of inputEncoding is deprecated.”

Can you post a link to your current code in a JSFiddle

sure,here it is

This code is removing the section you are trying to show/hide:

function initTemplates() {
    $('.template').each(function () {
        var template = $(this).children(),
            key = template.attr('class') || 'template' + templates.length;
        templates[key] = template;
        //$(this).remove();
    });
}

You can’t toggle the visibility of an element you have removed from the page :slight_smile:

i don’t get you can you make some change in my JSfiddle what you mean?

Put another way, what should the code above accomplish?

Ok
let me explain

Suppose I have added 2,3 blocks of employment by checking Yes on radio button and also by click on Add button(I hope you got it).Then when I check on Button No then all the blocks that are added should remove from JSP page and this will display like it is in start (if I confrom ‘yes’),and if I confrom ‘No’ then nothing should happen.

How to put this?

You have this in your code (took me a while to spot that):

$("input[name='user_past_employ_status']").on("click", function(){
  $(".template").toggle(this.value === "false" && this.checked);
});

Remove it.

Also, remove this line:

initTemplates();

Then, change your radio button HTML to this:

Past Employment:
<input type="radio" value="true"  name="user_past_employ_status" id="pemp_yes" checked>
<label for="pemp_yes">Yes</label>
<input type="radio" value="false" name="user_past_employ_status" id="pemp_no">
<label for="pemp_no">No</label>

I have added a checked attribute and inverted the true and false values (the value for the yes option shouldn’t be false)

Then, insert the JS I gave you yesterday:

$("input[name='user_past_employ_status']").on("click", function(){
    var sure = true;
    if(this.value === "false"){
      var sure = confirm("You sure?");
    }
    
    if(sure){
      $(".template").toggle(this.value === "true" && this.checked);
    } else {
      return false;
    }
});

And things will work as you desire.

1 Like

after 3 hours work
now I have acheived what I was looking for thanks @pullo for your guidance
http://jsfiddle.net/vngx/ftb26jut/2/

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.