This question has been flagged

I created the form in Odoo XML file. When I click to submit the form that same time both input box value does not get in my script.js file. I want to get the input box field value from XML file to Odoo javascript file.

How do I get the input value from XML to JS file?

example.xml:

<template id="example_page" name="Example page" page="True">

    <tt-call="website.layout">

        <tt-name="DemoTemplate">

            <divclass="oe_structure">

                <divclass="container">

                    <formtarget="_self"action=""method="post"id="test_form">

                        Value of A: <inputtype="text"name="num_a"class="num_A"/><br/>

                        Value of B: <inputtype="text"name="num_b"class="num_B"/><br/>

                        Total Value: <input type="text" name="total" class="total" readonly="True"/><br/>

                         <button type="button" name="button" class="my-button">

                            <a href="/example" class="btn btn-info">Submit</a>

                        </button>

                    </form>

                </div>

            </div>

        </t>

    </t>

</template>

Script.js file:

$('#test_form').on('click', 'button.my_button', function(e) {

        e.preventDefault();

        var num_A = parseInt($("input[name='num_a']").val());

        var num_B= parseInt($("input[name='num_b']").val());

        console.log('hello');

        console.log('num_A ');

        console.log('num_B');

        ajax.jsonRpc('/my_url/some_url', 'call', {'a': num_A, 'b': num_B})

            .then(function(result){

                    console.log(result);

                    var output_data=result['total'];

                    console.log(output_data);

                    $("#total").html(output_data);

                });

        });

example.py:

   @http.route(['/my_url/some_url'], type='json', auth="public", website=True)

    def some_url(self, **arg):

        #Fetch input json data sent from js

        print "Welcome to JSON function"

        a = arg.get('a')

        b = arg.get('b');

        total_sum = a + b

        res={'total':str(total_sum)}

        print res

        return res


I want to set the total value in my input box how can I achieve it.

Avatar
Discard
Best Answer

Hi,

Update your script with this code,

    $('#test_form').on('click', 'button.my-button', function(e) {
e.preventDefault();
var num_A = $( ".num_A" ).val();
var num_B= $( ".num_B" ).val();
});


Now you will get the values of input fields in num_A,  num_B


Thanks


Avatar
Discard
Author Best Answer

Finally, I found the answer,

I created the XML file,

code:

   <template id="example_page" name="Example page" page="True">

      <t t-call="website.layout">

          <t t-name="DemoTemplate">

            <div class="oe_structure">

              <div class="container">

                <center><h3>Title</h3></center>

                <p>

                  <a t-attf-href="/example/detail" class="btn btn-info">Company detail page</a>

                </p>

                <p> Welcome to HTTP Request and Response Page</p>

                <div id="test_div">

                    <label for="f_name">First Name</label>

                    <input type="text" name="f_name" class="f_name" id="f_name"/><br/>

                    

                    <label for="l_name">Last Name</label>

                    <input type="text" name="l_name" class="l_name" id="l_name"/><br/>

                    

                    <label for="email">Email</label>

                    <input type="text" name="email" class="email" id="email"/><br/>

                    

                    <label for="contact_no">Contact No</label>

                    <input type="text" name="contact_no" class="contact_no" id="contact_no"/><br/>

                    

                    <label for="address">Address</label>

                    <input type="text" name="address" class="address" id="address"/><br/>

                    

                    <label for="address">Customer Address</label>

                    <textarea name="full_address" class="full_address" id="full_address" rows="7" cols="30" readonly="True"/><br/>

                    

                    <input type="button" value="Submit" id="submit" />

                </div>

              </div>

            </div>

           </t>

      </t>

    </template>

py file like as,

#    Data processing and fetch output data-----

    @http.route(['/json_call_fun'], type='json', auth="public", website=True)

    def some_url(self, **arg):

        #Fetch input json data sent from js

        first_name = arg.get('first_name')

        last_name = arg.get('last_name');

        email = arg.get('email')

        number = arg.get('number');

        address = arg.get('address')

        result=first_name+''+ last_name +'\n' + email + '\n' + number +'\n' + address

        res={'name':result}

        return res

Javascript file,

odoo.define('sample_webcontrol.script', function (require) {

    "use strict";


var ajax = require('web.ajax');

$(document).ready(function() {

$('#test_div').on('click','#submit',function(){

var f_name = $(".f_name").val();

var l_name = $(".l_name").val();

var email = $(".email").val();

var number = $(".contact_no").val();

var address = $(".address").val();

ajax.jsonRpc("/json_call_fun", 'call',{

  first_name : f_name,

  last_name : l_name,

email : email,

  number : number,

  address : address

}).then(function(result){ 

var output_data=result['name'];

$('.full_address').val(output_data);

    });

});

});


});

While refresh page, run the js file. JS file inside call the URL as '/json_call_fun'. Check this URL in Py file after then execute the some_url code. JSON data result return to JS file. Then set the value to HTML file. This is the way of getting and setting the JSON data from odoo to JS.



Avatar
Discard