CODEWITHSUNDEEP
javascriptjqueryhtml
Hakerovsky
Hakerovsky

Reputation: 103

Add required to input of hidden div when radio is checked

What I'm trying to do is to set hidden div with inputs depended on checked radio input.

This is the logic:

  1. If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...

  2. If the second radio is checked I want the input to be added with required..

  3. And, it shouldn't be required if the 2nd radio isn't checked...

I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...

So Any help will be much appreciated...

/*
        // this code is working but I messed the HTML while trying to get it work with the other code below...
        $(document).ready(function() {
        	$("div.hiddendiv").hide();
        	check();
          
          $("input[name$='name02']").change(check);
        	  function check() {
        		  var test = $("input[name$='name02']:checked").val();
        			$("div.hiddendiv").hide();
        			$("#" + test).show();
        		 }
        }
        */

// The code i'm trying to work with...
$(function() {
  var radio = $("#closed");
  var hidden = $("#hide");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      hidden.show();
      //add required
      $('#name02').prop('required', true);
    } else {
      hidden.hide();
      //clear when hidden checked
      $("#name02").val("");
      //remove required
      $('#name02').prop('required', false);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open

<div name="01" class="hiddendiv">
  <input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
  <input name="name02" type="text" value="">
</div>

Here is the JSFiddle,

Upvotes: 0

Views: 78

Answers (2)

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7165

try this code

give same name of radio button so it will work as a group and

also set id of input tag as name02 so its use as a #name02 in jquery

so it will work 

$(function() {
  var radio = $("#closed");
  var hidden = $("#hide");
  hidden.hide();
  $(this).click(function() {
    if ($('#closed').is(':checked')) {
      hidden.show();
      $('#name02').prop('required', true);
    } else {
      hidden.hide();
      //clear when hidden checked
      $("#name02").val("");
      //remove required
      $('#name02').prop('required', false);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open

<div name="01" class="hiddendiv">
  <input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
  <input name="name02" id="name02" type="text" value="">
</div>

Upvotes: 1

derp
derp

Reputation: 2318

Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.

I've updated the JSfiddle here https://jsfiddle.net/hba4d83k/2/

What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.

Upvotes: 0

Related Questions