[SOLVED] How can I redirect to a page after radio button selection

Questions
1

Hi, i’m developing my first app with framework7. My code doesn’t work, but I don’t understand why.
I want to redirect to page X to page Y according to user choice after selected a radio button.
Firstly, I declared the pages in my-app.json

/**
 * Routes
 */
 routes: [
    {
		name: 'home',
		path: '/home/',
		url: './pages/home/home.html'
	},
	{
		name: 'travel',
		path: '/travel/',
		url: './pages/travel/travel.html',
		routes: [

			{
				name: 'travel-ny',
				path: ' ny/',
				url: './pages/travel/ny.html',
			},
			{
				name: 'travel-la',
				path: ' la/',
				url: './pages/travel/la.html',
			},

			{
				name: 'travel-milan',
				path: ' milan/',
				url: './pages/travel/milan.html',
			},

		]
	}

}

the choice user from radio selection is taken in travel.html

<div data-name="travel" class="page">

<div class="page-content pg-no-padding">

	<div class="row">
		<div class="col-100 tablet-100 desktop-100">			
		<form class="list" id="travel-form">
				<ul>
					<li>
						<label class="item-radio item-content">
        					<input type="radio" name="travel" value="ny" checked="checked"/>
        					<i class="icon icon-radio"></i>
        					<div class="item-inner">
          						<div class="item-title">New York</div>
        					</div>
  						</label>							
					</li>

					<li>
						<label class="item-radio item-content">
        					<input type="radio" name="travel" value="la"/>
        					<i class="icon icon-radio"></i>
        					<div class="item-inner">
          						<div class="item-title">Los Angeles</div>
        					</div>
  						</label>							
					</li>

					<li>
						<label class="item-radio item-content">
        					<input type="radio" name="travel" value="milan" />
        					<i class="icon icon-radio"></i>
        					<div class="item-inner">
          						<div class="item-title">Milan</div>
        					</div>
  						</label>							
					</li>

			</form> <!--list-->	

			<div class="block">
				<a class="button button-fill travelChoice" onclick="onClickGo()">Go</a>
			</div>		
		</div><!--col-100-->
	</div><!--row-->			
</div> <!-- ./ page-content-->

i put the function onClickGo in travel.js that I included it in home.html in this way

<script type="text/javascript" src="js/travel.js"></script>

travel.js

function onClickGo = () => {

$$('.travelChoice').on('click', function(){

	//retrieve the value selected
	var selectedValue = $$('.list input:checked').val();
	//go to the page 
	router.navigate('/travel/'+ selectedValue +'/');
	
});

}

but it doesn’t work. The console write:

Uncaught ReferenceError:  onClickGo is not defined

Thank you for your help

1 Like
2

this syntax is wrong. you are mixing stuff
or you use

function onClickGo  () {
...
some code
...
}

or something like this

var onClickGo = () => {
...
some code
...
}

edit:
the arrow opperator will be transpiled as function;
so

var onClickGo = () => {} ===  var onClickGo = function () { }

here you can read more;

http://ccoenraets.github.io/es6-tutorial/arrow-functions/

3

I’m using this syntax

var onClickGo = () => {
    ...
    some code
     ...
 }

but the problem still the same

4

Use it as Router Component page (http://framework7.io/docs/router-component.html):

<template>
  <div data-name="travel" class="page">
    <div class="page-content pg-no-padding">
      <div class="row">
        <div class="col-100 tablet-100 desktop-100">
          <form class="list" id="travel-form">
            <ul>
              <li>
                <label class="item-radio item-content">
                  <input type="radio" name="travel" value="ny" checked="checked" />
                  <i class="icon icon-radio"></i>
                  <div class="item-inner">
                    <div class="item-title">New York</div>
                  </div>
                </label>
              </li>

              <li>
                <label class="item-radio item-content">
                  <input type="radio" name="travel" value="la" />
                  <i class="icon icon-radio"></i>
                  <div class="item-inner">
                    <div class="item-title">Los Angeles</div>
                  </div>
                </label>
              </li>

              <li>
                <label class="item-radio item-content">
                  <input type="radio" name="travel" value="milan" />
                  <i class="icon icon-radio"></i>
                  <div class="item-inner">
                    <div class="item-title">Milan</div>
                  </div>
                </label>
              </li>

          </form>
          <!--list-->

          <div class="block">
            <a class="button button-fill travelChoice" @click="onClickGo">Go</a>
          </div>
        </div>
        <!--col-100-->
      </div>
      <!--row-->
    </div>
  </div>
</template>
<script>
  return {
    methods: {
      onClickGo: function () {
        var self = this;
        var selectedValue = self.$el.find('.list input:checked').val();
        self.$router.navigate('/travel/'+ selectedValue +'/');
      },
    }
  }
</script>
5

Thank you Vladimir :slight_smile: I just solved the problem with these changes

<a class="button button-fill" id="travelChoice" onclick="onClickGo()">Go</a>

$$('#travelChoice').on('click', function(){.....

but I don’t understand why after 5 applications the form allows to check two radio buttons