[SOLVED] Get Value of Radio input

Questions
1

How can I get value when clicking on some item on Radio input?
Thanks

image
image.jpg417×519 57.5 KB 

<div class="accordion-item-content">
                                                <div class="box-c__content no-padding list searchbar-found">
                                                    <ul>
                                                        <li>
                                                            <label class="popup-close item-radio item-radio-location item-content">
                                                                <input type="radio" name="demo-radio" value="Movies1" checked="" />
                                                                <i class="icon icon-location"><div>HNA</div></i>
                                                                <div class="item-inner item-inner-custom">
                                                                    <div class="item-title">Hà Nội</div>
                                                                </div>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label class="popup-close item-radio item-radio-location item-content">
                                                                <input type="radio" name="demo-radio" value="Movies2" />
                                                                <i class="icon icon-location"><div>HP</div></i>
                                                                <div class="item-inner item-inner-custom">
                                                                    <div class="item-title">Hải Phòng</div>
                                                                </div>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label class="popup-close item-radio item-radio-location item-content">
                                                                <input type="radio" name="demo-radio" value="Movies3" />
                                                                <i class="icon icon-location"><div>DN</div></i>
                                                                <div class="item-inner item-inner-custom">
                                                                    <div class="item-title">Đà Nẵng</div>
                                                                </div>
                                                            </label>
                                                        </li>
                                                        <li>
                                                            <label class="popup-close item-radio item-radio-location item-content">
                                                                <input type="radio" name="demo-radio" value="Movies4" />
                                                                <i class="icon icon-location"><div>HCM</div></i>
                                                                <div class="item-inner item-inner-custom">
                                                                    <div class="item-title">Thành Phố Hồ Chí Minh</div>
                                                                </div>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>

@nolimits4web please help me sir! :slight_smile:

2

Hi,

$$('input[type="radio"]').on('change click', function(ev){
   console.log($$(ev.currentTarget).val());
});

something like this ?

3

Yes, but It doesn’t work. I’m still not get input value :frowning:

4

where do you put your js code ?

5

I put it before closing body tag

6

well you should put it in your route pageInit event.
example :

path: '/games/what/',
url: route_root+'/pages/games/what.html',    
on: {
  pageInit: function (e, page) {
    var pageContainer=page.$pageEl;
    
   $$('select[name="what_nb_joueurs"]').empty(); 
   $$('select[name="what_nb_joueurs"]').append('<option value="">Indifférent</option>');
   for (var i = 1; i <= 12; i++) {
      $$('select[name="what_nb_joueurs"]').append('<option value="'+i+'">'+i+'</option>');
   }
   $$('select[name="what_nb_joueurs"]').append('<option value="more">13+</option>');
 }
}
7

I’m still not get it. Could you show me more details or another example, please?

8

pages are defined within your routes array. when you declare a route, you link your html code (template / component) with a url path ( ‘/mypage/’ ). with route events, you make sure that your js code is executed after your html code is loaded.

var app = new Framework7({
 routes: [
// ...
{
  path: '/users/',
  url: './pages/users.html',
  on: {
    pageBeforeIn: function (event, page) {
      // do something before page gets into the view
    },
    pageAfterIn: function (event, page) {
      // do something after page gets into the view
    },
    pageInit: function (event, page) {
      // do something when page initialized
    },
    pageBeforeRemove: function (event, page) {
      // do something before page gets removed from DOM
     },
   }
 },
  // ...
],
});

Inside an event (pageInit mainly), you can target your radio buttons, and put events on them.

9

Thanks you @Francois-Xavier_G, I made it work by your help :slight_smile:

1 Like
10

cool, you can mark your topic solved :slight_smile:

1 Like
11

Should I comment my success code, sir?