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');
  $('').insertAfter(that);
} else {
  var input = that.next();
  that.removeClass('hidden');
  that.text(input.val());
  input.remove();
}
})
})

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


  
    
      #health_record = request.env['model'].search([)]
      
        
          
          
        
        HEALTH RECORD
        
          Name:
          
        
        
          Age:

user_10606400 · Answer

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)
});






  
    
      
      
      
      
    
    HEALTH RECORD
    
      Name:
      Abc
      
      
    
    
      Age:
      20
    
  


  
    
      
      
      
    
    HEALTH RECORD
    
      Name:
      Mno
    
    
      Age:
      23
    
  


  
    
      
      
      
    
    HEALTH RECORD
    
      Name:
      Xyz
    
    
      Age:
      10

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.

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

1 Answers