Menu
Sites
Language
[Gear] How to know which radio popup is checked

Dear all,

I am relatively new to Tizen and web programming. I am currently implememting my app in Samsung Gear S. In my app, I need to show up a popup with radio box so users can select the option they want. I implement this function based on the Samsung Web GUI example where the code in my index.html looks like this:

 

<div id="radioPopup" class="ui-popup"> 
    <div class="ui-popup-header">Ringtones</div>
    <div class="ui-popup-content">
        <ul class="ui-listview">
            <li class="li-has-radio">
                <label> Option1 
                    <input type="radio" name="radioset" id="radio-1" checked="checked" /> 
                </label> 
            </li>
            <li class="li-has-radio"> 
                <label> Option2 
                    <input type="radio" name="radioset" id="radio-2" /> 
                </label> 
            </li>
    <div class="ui-popup-footer">
        <a id="radioPopup-close" href="#" class="ui-btn" data-rel="back">Close</a> 
    </div> 
</div>

The UI of this code work perfectly (user can select the option and the radio index will be cheked and remembered). However, I am not sure how to retrieve the result of user's selection. My first attemp is to retrieve the "checked" atrribute as the following:

function closePopup() {
    for(var i=0;i<2.length;i++){
        var radioCheck = document.getElementById('radio-'+i);
        var checkAttr = radioCheck.getAttribute("checked");
        var isChecked = radioCheck.classList.contains('checked');
        if(isChecked){
            console.log('is checked'); 
            targetNamesIdx = i;
        } else {
        	console.log('not checked');
        }   
    }
        	
    console.log('targetNamesIdx = '+targetNamesIdx);
    tau.closePopup();
}

However, the "checked" attribute seems not updated (even though the UI is updated). Could anyone please let me know how to address this problem? Any suggestion/hint will be very appreciated!!

 

Edited on 13 04, 2015
List

Responses

5 Replies
Vikram

Hello,

Please refer to my suggestion and you don't need getAttribute() in that case.

 

   var targetNamesIdx;
   document.getElementById('radioPopup-close').addEventListener('click', function(ev)
   {
    
    for(var i=1;i<3;i++){
      var radioCheck = document.getElementById('radio-'+i);
     
        if(radioCheck.checked == true){
            console.log('is checked');
            targetNamesIdx = i;           
        } else {
         console.log('not checked');
        }  
    }
         
    console.log('targetNamesIdx = '+targetNamesIdx);
    tau.closePopup();
   });

AVSukhov

Hello,

This topic can help you:

http://stackoverflow.com/questions/3869535/how-to-get-the-selected-radio-button-value-using-js

Marco Buettner

I have a solution which works, but I can write it later this day

Yu-Chih Tung

Thank Vikram and AVSukhov,

 

Your solution works! And I am now getting more familar with how to Google the problem I will face in the Tizen development (I used to use the key word "Tizen" but it seems most the UI problem is related to JS only).

 

Many Thanks!

Yu-Chih

AVSukhov

Hello,

Web application model supports set of standard W3C/HTML5 features, which include various JavaScript APIs as well as additional HTML markups and CSS features. Therefore, most of the problems can be releated to HTML/CSS/JS. If you have experience in web development then you should have no problem with Tizen Web app.

Specificity can be shown when you use Tizen Device API.