0

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>
Bhanu
  • 155
  • 1
  • 2
  • 15

5 Answers5

1

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>
Dhara Parmar
  • 8,021
  • 1
  • 16
  • 27
0

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>
Prabhat Sinha
  • 1,500
  • 20
  • 32
  • By default one radio buton is checked.And in your code, when i change the radio button, i should get an confirm box..Not alert. When i click ok on confirm box the textarea must be cleared . But when i click on cancel, the radio button must be as it before and also text area must have the value which it has in initial state.. but i dont find my requirement in this – Bhanu Apr 19 '16 at 12:59
0

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

    jsfiddle.net/dhavalpankhaniya1989/4w536885/3/

let me know if you doubts

Dhaval Pankhaniya
  • 1,996
  • 1
  • 15
  • 26
  • By default one radio buton is checked.And in your code, when i change the radio button, i should get an confirm box..Not alert. When i click ok on confirm box the textarea must be cleared . But when i click on cancel, the radio button must be as it before and also text area must have the value which it has in initail state – Bhanu Apr 19 '16 at 12:58
  • don't post blindly check the requirement. – Prabhat Sinha Apr 19 '16 at 12:59
  • please check now i have edited the link https://jsfiddle.net/dhavalpankhaniya1989/4w536885/1/ – Dhaval Pankhaniya Apr 19 '16 at 13:00
  • @PrabhatSinha check your solution first. is it providing proper solution ? even your solution giving alters rather then confirm – Dhaval Pankhaniya Apr 19 '16 at 13:05
  • @Bhanu can you please check and let me know now ? – Dhaval Pankhaniya Apr 19 '16 at 13:07
  • Its not right.. I'l update your fiddle with my requirement.. Can u give me the solution again please – Bhanu Apr 19 '16 at 13:16
  • have you checked [link](https://jsfiddle.net/dhavalpankhaniya1989/4w536885/3/) one ? – Dhaval Pankhaniya Apr 19 '16 at 13:17
  • https://jsfiddle.net/4w536885/4/ This is my updated fiddle.. The main requirement is ,if i am clicking on cancel the text is same but the radio button value is changing..the radio button should not change.. – Bhanu Apr 19 '16 at 13:21
  • @Dhaval i am give you suggestion only i'm not aware of that, if I'm wrong welcome your suggestion. Thanks – Prabhat Sinha Apr 19 '16 at 15:17
0

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

dormouse
  • 63
  • 5
0

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/

Danilo
  • 2,676
  • 7
  • 32
  • 36