CODEWITHSUNDEEP
javascriptjquery
Bhanu
Bhanu

Reputation: 155

How to get alert when radio button is changed in jquery?

I have two radio buttons and a text area. Now what i want to do is,when i change the radio button when text area is not empty i need a corfirm box. Only if user clicks ok Then only the radio button must be changed .or else,the value in the text area must be shown and the value of radio button must not changed..

My code

jQuery
--------

$(".radio1").change(function(event){

            if($(".txtarea").val() != "")
                { 
                    var flag = confirm("Do you want to change ?");
                }
            if(flag)
                {
                $(".txtarea").val("");
                }


        });


Html
------
<input type="radio" id="radio1" name="radio1" class="radio1">hello
<input type="radio" id="radio2" name="radio1" class="radio1">hi
<textarea id="txtarea" class="txtarea"></textarea>

Upvotes: 0

Views: 1245

Answers (5)

Prabhat-VS
Prabhat-VS

Reputation: 1530

Working Example,

$(document).ready(function() {
    $('input[type=radio][name=radiogroup]').change(function() {
        if (this.value == 'radio1') {
           
          var r = confirm("Do you want to change ?");
         if (r == true) {
           
        $("#txtarea").val("Yes!");
           } else {
         $("#txtarea").val("No!");
          }
        }
        else if (this.value == 'radio2') {
            alert("radio2 selected");
          $("#txtarea").val("");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="radio1" value="radio1" checked="checked" name="radiogroup" class="radio1">hello
<input type="radio" id="radio2" value="radio2" name="radiogroup" class="radio2">hi
<textarea id="txtarea" class="txtarea"></textarea>

Upvotes: 0

Danilo
Danilo

Reputation: 2686

To remove the selection from the radio, simply select another radio in the group:

$(function() {
  $('input[name=radiogroup]').change(function() {
    if ($(this).attr("id") == "radio2") {
      if (confirm("Are you sure?")) $("textarea").val("");
      else $("#radio1").prop('checked', true);
    }
  });
});

and the elements

<input type="radio" id="radio1" value="radio1" name="radiogroup" class="radio1" checked="checked">radio1
<input type="radio" id="radio2" value="radio2" name="radiogroup" class="radio2">radio2
<textarea id="textarea" class="txtarea"></textarea>

try here: https://jsfiddle.net/ewnLw4wf/1/

Upvotes: 0

Dhaval Pankhaniya
Dhaval Pankhaniya

Reputation: 1996

as per your requirement i have created one fiddle please have a look 

    jsfiddle.net/dhavalpankhaniya1989/4w536885/3/

let me know if you doubts

Upvotes: 0

dormouse
dormouse

Reputation: 73

You need something like this.

$(
  function()
  {
    $(".radio1").click(function(event)
	{
	  if(($(".txtarea").val()!="")&&(!$(this).attr('checked')))
	  { 
        if(confirm("Do you want to change ?"))
        {
          $(".txtarea").val("");
        }
        else
        {
          return(false);
        }
      }
    });
  }
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" id="radio1" name="radio1" class="radio1"/><lable for="radio1">1</label>
<input type="radio" id="radio2" name="radio1" class="radio1"/><lable for="radio2">2</label>
<br/>
<textarea id="txtarea" class="txtarea"></textarea>

NOTE - onchange fires after change is done, so you can't use it to prevent change

Upvotes: 0

Dhara Parmar
Dhara Parmar

Reputation: 8101

Try this:

$(document).ready(function() {
    $('input[type=radio][name=radiogroup]').change(function() {
        if (this.value == 'radio1') {
            alert("radio1 selected");
        }
        else if (this.value == 'radio2') {
            alert("radio2 selected");
        }
    });
});



<input type="radio" id="radio1" value="radio1" name="radiogroup" class="radio1">hello
<input type="radio" id="radio2" value="radio2" name="radiogroup" class="radio2">hi
<textarea id="txtarea" class="txtarea"></textarea>

Upvotes: 1

Related Questions