CODEWITHSUNDEEP
jqueryhtmlradio-button
Mohsen Rahnamaei
Mohsen Rahnamaei

Reputation: 411

Check of specific radio button is checked and it doesn't work

I want to show the ptext when radio button has checked and hide when another radio button is active but does not work

This is my code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  </head>
  <body>
    <input id="postageyes" name="type" value="Paint" type="radio">Paint
    <br>
    <input id="postageno" name="type" value="Sculpture" type="radio">Sculpture
    <br>
    <input id="postageno" name="type" value="calligraphy" type="radio">calligraphy
    <br>
    <input id="stext" name="type" value="type" type="text"><br>
    <input id="ctext" name="type" value="type" type="text"><br>
    <input id="ptext" name="type" value="type" type="text">
    <script type="text/javascript">

      $('input:radio[name="postage"]').change(function() {
        if ($(this).val() == 'Paint') {
          $("#ptext").show();
        } else {
          $("#ptext").hide();
        }
      });

    </script>



  </body>
</html>

Upvotes: 0

Views: 392

Answers (3)

Dlanor
Dlanor

Reputation: 276

HTML - The fix was only in the name attribute, becase in your html says "Type" instead of "postage"

<input id="postageyes" name="postage" value="Paint" type="radio">Paint
    <br>
    <input id="postageno" name="postage" value="Sculpture" type="radio">Sculpture
    <br>
    <input id="postageno" name="postage" value="calligraphy" type="radio">calligraphy
    <br>
    <input id="stext" name="type" value="type" type="text"><br>
    <input id="ctext" name="type" value="type" type="text"><br>
    <input id="ptext" name="type" value="type" type="text" style="display:none">

Javascript - The javascript if working I only will give you a recommendation and is, use the document ready

$(document).ready(function() {

    $('input:radio[name="postage"]').change(function() {
        if ($(this).val() == 'Paint') {
          $("#ptext").show();
        } else {
          $("#ptext").hide();
        }
      });

});

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

You have two major issues:

  • The value of id should be unique.
  • There's no input with name as postage.
  • Extra: Better to hide the ptext when loading the page.

Change the name to postage:

<input id="postageyes" name="postage" value="Paint" type="radio">Paint
<br>
<input id="postageno1" name="postage" value="Sculpture" type="radio">Sculpture
<br>
<input id="postageno2" name="postage" value="calligraphy" type="radio">calligraphy


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="postageyes" name="postage" value="Paint" type="radio">Paint
<br>
<input id="postageno1" name="postage" value="Sculpture" type="radio">Sculpture
<br>
<input id="postageno2" name="postage" value="calligraphy" type="radio">calligraphy
<br>
<input id="stext" name="type" value="type" type="text"><br>
<input id="ctext" name="type" value="type" type="text"><br>
<input id="ptext" name="type" value="type" type="text">
<script type="text/javascript">
  $("#ptext").hide();
  $('input:radio[name="postage"]').change(function() {
    if ($(this).val() == 'Paint') {
      $("#ptext").show();
    } else {
      $("#ptext").hide();
    }
  });

</script>

Also, it is better to hide it when you load the document. See the above example.

Upvotes: 1

Purvik Dhorajiya
Purvik Dhorajiya

Reputation: 4870

You have to pass wrong radio button name in jQuery, Could you please check below code?

<script type="text/javascript">

    $('input:radio[name="type"]').change(function() {
      if ($(this).val() == 'Paint') {
        $("#ptext").show();
      } else {
        $("#ptext").hide();
      }
    });

</script>

Upvotes: 0

Related Questions