How to change the button icon with javascript and open a new text area in MJQ

Question

Hello guys I have a Mobile JQuery form like this

<header>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
<link href="http://wstation.inmomundo.com/static01/cssii/costarica/themes/inmomobile.css" type="text/css" rel="stylesheet">
<link href="http://wstation.inmomundo.com/static01/cssii/costarica/themes/jquery.mobile.icons.min.css" type="text/css" rel="stylesheet">
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet">
</header>

<fieldset data-role="controlgroup" data-mini="true" style= "color:#006699 !important">

<h4>Estoy interesado(a) En la propiedad, </h4>
<input  onclick="opendiv1()" class="" id="radio-choice-1" name="opcmessage" title="" type="radio" value="1" />
<label for="radio-choice-1">favor de enviarme más información</label>

<input  onclick="opendiv2()" class="" id="radio-choice-2" name="opcmessage" title="" type="radio" value="2" />   
<label for="radio-choice-2"> deseo visitarla</label>

<input  onclick="opendiv3()" class="" id="radio-choice-3" name="opcmessage" title="" type="radio" value="3"  />
<label for="radio-choice-3"> envieme fotos</label>

<input  onclick="opendiv4()" class="" id="radio-choice-4" name="opcmessage" title="" type="radio" value="4" />
<label for="radio-choice-4">envieme más fotos</label>

</fieldset >


<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>

<a data-rel="back" href="#pageone" data-icon="delete" data-inline="true" data-role="button"  data-theme="c" title="Close">Cancelar</a>


<div style="float: right; margin-right: -10px;">
<input  class="me" data-theme="c" data-role="button" data-inline="true" type="submit" data-icon="search" id="im_send_message" name="im_send_message" value="Enviar"  />
</div>

 </form>
</div>



</div>

I have following things to do which I am not able to do .

1.When some one clicks on one of the option a textarea should open and the content of the text area should be same as the input tag.

2.The data-icon="search" of Enviar button should change to data-icon="check" I have tried following script which did not work

Script

$("#textarea").hide();

function opendiv1(){
$("#textarea").show();
$("#textarea").html( "Estoy interesado(a) en la propiedad, favor de enviarme más información" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}

function opendiv2(){
$("#textarea").show();
$("#textarea").html( "Estoy interesado(a) en la propiedad, deseo visitarla" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}
function opendiv3(){
$("#textarea").shw();
$("#textarea").html( "Estoy interesado(a) en la propiedad, envieme fotos" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}
function opendiv4(){
$("#textarea").show();
 $("#textarea").html( "Estoy interesado(a) en la propiedad, envieme más fotos" );
$('.men').attr('data-icon','arrow-u').button().trigger("refresh"); 
}

I also have a JSFIddle of it kindly have a look

Answer

With help of answer given by @Omar I was able to finish this thing here is a fiddle

FIDDLE

Answer 1

jQuery Mobile wraps all types of input in a div. That div holds all styles, hence, if you want to do any changes to an input, you need to apply them to that div.

To listen to changes on radio buttons, you need to use change event.

$(document).on("pagecreate", function () {
    $("#textarea").hide();
    $("[name=opcmessage]").on("change", function () {
        var text = $(this).closest("div").find("label").text();
        $("#textarea").text(text).show();
        $(".me").closest("div").removeClass("ui-icon-search").addClass("ui-icon-check");
    });
});

Demo