Skip to Content
This question has been flagged
jqueryodoojsonrpcJavascriptCallFromOdooOdoo10.0
3 Replies
37020 Views
Avatar
Kirubanidhi Rajarathinam

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
Avatar
Cybrosys Techno Solutions Pvt.Ltd
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
Avatar
Kirubanidhi Rajarathinam
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
Related Posts Replies Views Activity
OwlError: The following error occurred in onMounted: "invalid portal target"
odoo JavascriptCallFromOdoo
Avatar
Avatar
1
Nov 24
2094
How to create custom Jquery AJax Post in Odoo?
jquery odoo
Avatar
0
Oct 16
4243
jsonrpc bulk write
api odoo jsonrpc
Avatar
Avatar
1
Apr 25
2038
Odoo JsonRPC : Get m2m, m2o or o2m nested field with read method
odoo jsonrpc odoo17
Avatar
0
Feb 25
2125
how to load a translation with json rpc ?
translations odoo jsonrpc
Avatar
Avatar
Avatar
2
Jun 23
6671