How to communicate between HtmlService Javascript and Server Google Apps Script -

i'd create first google docs script generate amount seems not working :

function onopen(e) {      documentapp.getui().createaddonmenu()          .additem('start', 'showsidebar')          .addtoui();  }    function oninstall(e) {      onopen(e);  }    function showsidebar() {      var ui = htmlservice.createhtmloutputfromfile('sidebar').settitle('calcul tarification icecom');      documentapp.getui().showsidebar(ui);  }    function calculprice(compagnytype, hours) {    // here i'm not able "compagnytype" , "hours"    var priceperday = 300;    switch (compagnytype) {      case 'pme':        priceperday = 350;        break;      case 'esi':        priceperday = 400;        break;      case 'ge' :        priceperday = 450;        break;    }    return priceperday * hours;  }

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">  <!-- css package above applies google styling buttons , other elements. -->    <style></style>    <div class="sidebar branding-below">    <form>      <div class="block col-contain">        <div class="col-one">          <label for="compagnytype">type de l'entreprise</label>          <select id="compagnytype" name="compagnytype">            <option>tpe</option>            <option>pme</option>            <option>esi</option>            <option>ge</option>          </select>        </div>      </div>            <div class="block form-group">        <label for="hours"><b>nombre d'heures</b></label>        <input type="text" id="hours" name="hours"/>      </div>       <div class="block" id="button-bar">        <button class="blue" id="calculprice">calculer</button>      </div>    </form>    <div id="result"></div>  </div>    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script>  <script>    $(function() {      $('#calculprice').click(calculprice);    });    function calculprice() {      var compagnytype = $('select[name=compagnytype]').val();      var hours = $('input[name=hours]').val();      var result = google.script.run.calculprice(compagnytype, hours);      $('#result').text(result);    }  </script>

a quick test demonstrates are receiving parameters in calculprice():

function calculprice(compagnytype, hours) {   logger.log(json.stringify(arguments));   ... 

log contains:

[15-05-29 09:09:21:770 edt] {"0":"tpe","1":"23"} 

since information moving client side server side properly, let's @ opposite direction. first, validate server function return value upon success... , does. here's code that's expected receive on client side:

var result = google.script.run.calculprice(compagnytype, hours); $('#result').text(result); 

it's expecting set result return value of google.script.run.... check documentation run, , you'll find there no return code. way api works through call-back function. unlike function call has synchronous response, call-back gets response asynchronously, time after api call, sending parameter client-side function provide. in html/javascript should have:

... google.script.run       .withsuccesshandler(showresult)   // response goes function       .calculprice(compagnytype, hours); 

and add

// function receive asynchronous response function showresult( result ) {   $('#result').text(result);   // << here display result } 

function onopen(e) {      documentapp.getui().createaddonmenu()          .additem('start', 'showsidebar')          .addtoui();  }    function oninstall(e) {      onopen(e);  }    function showsidebar() {      var ui = htmlservice.createhtmloutputfromfile('sidebar').settitle('calcul tarification icecom');      documentapp.getui().showsidebar(ui);  }    function calculprice(compagnytype, hours) {    // here i'm not able "compagnytype" , "hours"    var priceperday = 300;    switch (compagnytype) {      case 'pme':        priceperday = 350;        break;      case 'esi':        priceperday = 400;        break;      case 'ge' :        priceperday = 450;        break;    }    return priceperday * hours;  }

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">  <!-- css package above applies google styling buttons , other elements. -->    <style></style>    <div class="sidebar branding-below">    <form>      <div class="block col-contain">        <div class="col-one">          <label for="compagnytype">type de l'entreprise</label>          <select id="compagnytype" name="compagnytype">            <option>tpe</option>            <option>pme</option>            <option>esi</option>            <option>ge</option>          </select>        </div>      </div>            <div class="block form-group">        <label for="hours"><b>nombre d'heures</b></label>        <input type="text" id="hours" name="hours"/>      </div>       <div class="block" id="button-bar">        <button class="blue" id="calculprice">calculer</button>      </div>    </form>    <div id="result"></div>  </div>    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script>  <script>    $(function() {      $('#calculprice').click(calculprice);    });    function calculprice() {      var compagnytype = $('select[name=compagnytype]').val();      var hours = $('input[name=hours]').val();      google.script.run            .withsuccesshandler(showresult)   // response goes function            .calculprice(compagnytype, hours);    }      // function receive asynchronous response    function showresult( result ) {      $('#result').text(result);   // << here display result    }  </script>