how can we make a form in the website editable odoo 12? (edit/save in form using js/jquery)

Question

I've created a form view in the website for the portal user. I'm fetching the datas from a model A.

What I'm trying to do here is, a user can see the already fetched data using (t-field in span) and the user needs to edit and save the resulting data needs to updated to the corresponding model. However when there is data fetched in the span field ,user can't edit the field and save

$('#edit_save').click(function(e) {
    e.preventDefault();
    editable = !editable;
    if (editable) {
      $(this).text('Save');
    } else {
    }
    ); 
    alert("Hello! I am an alert box!!"); $(this).text('Edit');
}

$('.input').each(function() {
var that = $(this);
if (editable) {
  that.addClass('hidden');
  $('<input value="' + that.text() + '">').insertAfter(that);
} else {
  var input = that.next();
  that.removeClass('hidden');
  that.text(input.val());
  input.remove();
}
})
})

.input {
  margin: 5px;
  position: relative;
}

<form class="form-horizontal" style="bg-light">
  <t t-set="card_body">
    <t t-foreach="health_record" t-as="hr">
      #health_record = request.env['model'].search([)]
      <div class="form-group">
        <t>
          <button id="edit_save" class="btn btn-primary">Edit</button>
          <button id="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
        </t>
        <h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
        <div style="padding-bottom:1px;" class="col-md text-md-left">
          <label class="text-secondary"><strong>Name:</strong></label>
          <span t-field="hr.partner_id" class="input" title="Name" />
        </div>
        <div class="col-md text-md-left">
          <label class="text-secondary"><strong >Age:</strong></label>
          <span id="age" t-field="hr.age" class="input" title="Age" />
        </div>
    </t>
  </t>
</form>

Hi , what is editable in your jquery code? Also you need to add input box next to span ? — Swati, Nov 24 '20 at 07:22
what im trying to do here is fetching datas from a model,and showing in the website as a form view. But user should have the provision to add and overwrite the datas from the form in the website itself — Raihan, Nov 24 '20 at 07:53
I see .. can you show html generated code of your span ? Also , as `form` tag is outside your element so every input field which is not even edited will get submit ..Are you planing to submit only one `` or whole inside form if only one `` then you also need some kind of `id` to let the model know where to update i don't see any code for that . — Swati, Nov 24 '20 at 12:51
I didnt get you exactly,My bad.If you can, share some References so that i can give a look and learn.Thanks, — Raihan, Nov 25 '20 at 07:28

score 4 · Accepted Answer · answered Nov 27 '20 at 14:24

You can add inputs for name and age next to span tag and hide them first when your page gets load . Then ,whenever your edit button gets clicked you can check if the text is Edit if yes you can show the inputs-box and hide span tag and change your edit button to save button .So , if user clicked on save button you can grab both input values and send it to backend using form submit or ajax call .

Nextly , when edit button gets clicked you can show cancel button(optional) as well so if user clicked on cancel button then no changes will be made and inputs will get hidden.

Demo Code :

$(".form-group input").hide() //hide inputs
//on click ofedit button
$(".edit_save").click(function() {
  var selector = $(this).closest(".form-group")
  var btnText = $(this).text();
  if (btnText === 'Edit') {
    $(this).text('Save');
    $(this).next("button").show(); //hide
    selector.find("form span").hide() //span hide
    selector.find("form input").show() //show inputs
  } else {
    $(this).text('Edit');
    $(this).next("button").hide();
    selector.find("form span").show()
    selector.find("form input").hide()

    //get values from input box which is edited
    var name = selector.find("input[name=name]").val();
    var age = selector.find("input[name=age]").val()
    //your ajax call put here to send both values and some id to identify record whwere to update...
    //put updated values in span again add this inside success fn of ajax call 
    selector.find("span.names").text(name)
    selector.find("span.ages").text(age)
    //or submit from here using $(this).closest("form").submit();
    //this will submit form with input value to your backed don't forget to add action to form also some hidden input to identify record.
  }



});

$('.cancel').click(function() {
  var selector = $(this).closest('form')
  //get span values 
  var names = selector.find("span.names").text()
  var ages = selector.closest('form').find("span.ages").text()

  $(this).hide(); //hide cancel buton
  $(this).prev(".edit_save").text('Edit'); //change text
  selector.find("span").show() //hide & Show
  selector.find("input").hide()
  selector.find("input[name=name]").val(names);
  selector.find("input[name=age]").val(ages)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<div class="form-group">
  <form class="form-horizontal" style="bg-light">
    <t>
      <button type="button" class="edit_save" class="btn btn-primary">Edit</button>
      <!--added this button-->
      <button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
      <button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
    </t>
    <h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
    <div style="padding-bottom:1px;" class="col-md text-md-left">
      <label class="text-secondary"><strong>Name:</strong></label>
      <span t-field="hr.partner_id" class="input names" title="Name">Abc</span>
      <!--added input here you can use t-att-value="hr.partner_id" same for other fields-->
      <input type="text" name="name" value="Abc" />
    </div>
    <div class="col-md text-md-left">
      <label class="text-secondary"><strong >Age:</strong></label>
      <span t-field="hr.age" class="input ages" title="Age">20</span><input type="text" name="age" value="20" />
    </div>
  </form>
</div>
<div class="form-group">
  <form class="form-horizontal" style="bg-light">
    <t>
      <button type="button" class="edit_save" class="btn btn-primary">Edit</button>
      <button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
      <button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
    </t>
    <h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
    <div style="padding-bottom:1px;" class="col-md text-md-left">
      <label class="text-secondary"><strong>Name:</strong></label>
      <span t-field="hr.partner_id" class="input names" title="Name">Mno</span><input type="text" name="name" value="Mno" />
    </div>
    <div class="col-md text-md-left">
      <label class="text-secondary"><strong >Age:</strong></label>
      <span t-field="hr.age" class="input ages" title="Age">23</span><input type="text" name="age" value="23" />
    </div>
  </form>
</div>
<div class="form-group">
  <form class="form-horizontal" style="bg-light">
    <t>
      <button type="button" class="edit_save" class="btn btn-primary">Edit</button>
      <button class="cancel" type="button" class="btn btn-primary" style="display:none">Cancel</button>
      <button class="health_profile" type="submit" class="btn btn-primary">Health Profile</button>
    </t>
    <h3 style="padding-top: 30px; padding-bottom: 45px; text-align: center; font-family: 'sans-serif'; font-weight: bold;" class="text-secondary">HEALTH RECORD</h3>
    <div style="padding-bottom:1px;" class="col-md text-md-left">
      <label class="text-secondary"><strong>Name:</strong></label>
      <span t-field="hr.partner_id" class="input names" title="Name">Xyz</span><input type="text" name="name" value="Xyz" />
    </div>
    <div class="col-md text-md-left">
      <label class="text-secondary"><strong >Age:</strong></label>
      <span t-field="hr.age" class="input ages" title="Age">10</span><input type="text" name="age" value="10" />
    </div>

  </form>
</div>

Note : You just need to add input with value i.e : t-att-value="yourvalue" or value="yourvalue" i have not use odoo before but one of them should work . Also, make sure to add hidden input inside form which will differentiate each datas i.e : some id which is unique for each record so that it would help you to update your data at backend.

Since the data is being read from the server isn't it better to dynamically generate the "form-group" using jquery for each model with a specific ID rather than being static? — prathap sagar, Nov 28 '20 at 05:51
OP has already generated that using `t-foreach` loop it will generate mutiple divs no need to use jquery to do same . — Swati, Nov 28 '20 at 06:00
Oh sorry. I was going through your code and couldn’t find that so I got confused. — prathap sagar, Nov 28 '20 at 06:08
Thanks for the answer,much appreciated. btw I've tried that code and its working but there is an issue,All the other input fields in the other pages turned to readonly type. — Raihan, Dec 03 '20 at 07:34
@Swati second of all can we update a select field through ajax call just like the way you mentioned above. please see the code below — Raihan, Dec 03 '20 at 07:38
Just print the value `hr.gender` inside span and next to it put that select-box so whenever `edit` button will get click show that select-box as well `selector.find("form input ,select").show()` and same for hide let me if that doesn't work. — Swati, Dec 03 '20 at 13:04
@swati after implementing this js code i have an issue with sign in,where the field is on readonly mode,can you please let me know a solution? — Raihan, Dec 08 '20 at 18:39
Hi, can you ask another question ? I will try to help you there if i know solution. — Swati, Dec 09 '20 at 04:03
@Swati i cant update the solution u mentioned above about the ```hr.gender``` selector.find("form input ,select").show() you mentioned above,can you please let me know how to updatee it ? — Raihan, Dec 09 '20 at 06:27
Did you print value of `hr.gender` inside span tag ? i.e : `` then put that dropdown next to it . After these changes let me know if you are able to get value from dropdown inside jquery code or not . — Swati, Dec 09 '20 at 06:44

how can we make a form in the website editable odoo 12? (edit/save in form using js/jquery)

1 Answers1