How to hide input text when not edit mode, then enable input text when click edit command button in lotus web form

0
votes

Basically I have a form. So I have a form where I display my document in web browser. There are some field with lotus notes field, and some field with html tag.

Right now, I have a command button to edit the form. Im using @Command([EditDocument]) to edit. So when I click, it will triggered and make the form editable.

Not like usual lotus notes form for web form. I can enable edit and disable edit for lotus notes field in web, but not for the input tag. I try to hide using JavaScript using onclick button but I'm using Lotus Notes button not html button.

HTML Input

<div class="form-group" id="date-container">
    <span class="group-read"><Computed Value></span>
    <input type="text" class="form-control group-edit" id="P-AssignDate" name="PAssignDate" autocomplete="off" value="<Computed Value>">
</div>

JavaScript

$(document).ready(function() {
    $('#btn-edit').click(function() {
        $('.group-edit').css('display','inline-block');
        $('.group-read').css('display','none');
    });
});

Anyone know how to hide input button when the form not in edit mode, it just display the value, while when the form is in edit mode, unhide the input.

2
javascriptjqueryhtmllotus-noteslotus-domino
So what problem exactly you are facing? Like you are not able to trigger the javascript function through your button or the JS function in not hiding the field? - Abdulhaq Shah
Because I am using Lotus Notes button in my form. I know how to trigger the button using normal HTML button but I don't know how to trigger the javascript using that Lotus Notes button. - Reinhaa
I hope this will answer your question about using JS with Loutus Notes. - Abdulhaq Shah
Okay will to to it. Thank you! - Reinhaa

2 Answers

1
votes

Probably you can also check the url in the ready function. The url should change to ?editDocument once the document is in edit mode.

You can also create a computed field which evaluates to a value if the document is being edited and query this field during the ready function...

0
votes

I would just swap the input field with a div (and vice versa when I want to go into edit mode again). Here is code for two buttons, one to make all input fields with the data-attribut dominofield into divs, and one to make those divs back into input fields:

// Bind function to Read Only button
$('#btnReadOnly').click( function() {
    // Get all input fields used for Domino
  var inputs = $('[data-dominofield]');
  // Process each field
  inputs.each( function() {
    // Build new DIV element
    var input = $(this);
    var div = '<div class="fieldReadOnly" ';
    div += 'data-dominofield="'+input.data('dominofield')+'" ';
    div += 'id="'+input.attr('id')+'">';
    div += input.val() + '</div>';
    // Insert ther new div element in front of input field
    input.before(div);
    // Remove input field
    input.remove();
  });
 });

 // Bind function to Edit button
$('#btnEdit').click( function() {
    // Get all input fields used for Domino
  var divs = $('[data-dominofield]');
  // Process each field
  divs.each( function() {
    // Build new INPUT element
    var div = $(this);
    var input = '<input type="text" class="form-control" ';
    input += 'data-dominofield="'+div.data('dominofield')+'" ';
    input += 'value="'+div.html()+'" ';
    input += 'id="'+div.attr('id')+'">';
    // Insert ther new input field in front of existing div
    div.before(input);
    // Remove div element
    div.remove();
  });
 });

I created a fiddle to show this in action.