CODEWITHSUNDEEP
javascriptjqueryarraysotrs
firewallcj
firewallcj

Reputation: 51

Add input text when option selected - OTRS

Im trying to populate subject with specific text if i choose a specific option from this list

Print of frontend

enter image description here

Subject html part:

<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate  Validate_Required" aria-required="true">

Options list part:

enter image description here

The code that already try to make, but dont work:

 $(document).ready(function() {   
   setTimeout(function() {
     const Action = Core.Config.Get("Action");
     const SupportedActions = ["AgentTicketNote"];
     if ($.inArray(Action, SupportedActions) !== -1) {
       if (Action === "AgentTicketNote") {      
        var dyno = document.getElementById("DynamicField_QueueNote_Search");
        dyno.addEventListener("change", changeByOption(dyno.value), false);
       }
     }
     function changeByOption(option) {
       var sub = document.getElementById("Subject");
          if (option === '- Move -') sub.value = '';      
          else if (option === 'Field_Support') sub.value = 'Nota para field';     
          else if (option === 'Helpdesk') sub.value = 'Nota para helpdesk';       
          else if (option === 'Sistemas_Windows') sub.value = 'Nota para sistemas';
     }  
   })
 });

HTML code part:

                        <div class="Row Row_DynamicField_QueueNote">
                        <label id="LabelDynamicField_QueueNote" for="DynamicField_QueueNote">
To queue:
</label>

                            <div class="Field">
                            <select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
  <option value="">-</option>
  <option value="- Move -" selected="selected">- Move -</option>
  <option value="Field_Support">Field_Support</option>
  <option value="Helpdesk">Helpdesk</option>
  <option value="Sistemas_Windows">Sistemas_Windows</option>
</select>

Input Field code:

<div class="InputField_Selection" style="left: 5px; display: block;"><div class="Text">Helpdesk</div><div class="Remove"><a href="#" title="Remove selection" role="button" tabindex="-1" aria-label="Remove selection: Helpdesk">x</a></div></div>

Upvotes: 0

Views: 229

Answers (2)

eyazi
eyazi

Reputation: 28

You don't need to wait for the DOM to load if you add the JavaScript the proper way. An alternative is this add-on, which also loads the JavaScript after the DOM is fully loaded.

const Action = Core.Config.Get("Action");
const SupportedActions = ["AgentTicketNote"];

if ($.inArray(Action, SupportedActions) !== -1) {
    if (Action === "AgentTicketNote") {
        $('#DynamicField_QueueNote').on('change', function() {
            const Option = $(this).val();

            if (Option === '- Move -') $('#Subject').val('');
            else if (Option === 'Field_Support') $('#Subject').val('Nota para field');
            else if (Option === 'Helpdesk') $('#Subject').val('Nota para helpdesk');   
            else if (Option === 'Sistemas_Windows') $('#Subject').val('Nota para sistemas');
        });
    }
}

Upvotes: 1

ikhvjs
ikhvjs

Reputation: 5977

I don't have your Core.Config, so I hard code Action. When you pass changeByOption in addEventListener, you can get the option value from the event.target.value

Example below

"use strict";
$(document).ready(function () {
  // const Action = Core.Config.Get("Action");
  const Action = "AgentTicketNote";
  const SupportedActions = ["AgentTicketNote"];
  if ($.inArray(Action, SupportedActions) !== -1) {
    if (Action === "AgentTicketNote") {
      const dyno = document.getElementById("DynamicField_QueueNote");
      dyno.addEventListener("change", changeByOption, false);
    }
  }
});

function changeByOption(event) {
  const option = event.target.value;
  console.log(option);
  var sub = document.getElementById("Subject");
  if (option === "- Move -") sub.value = "";
  else if (option === "Field_Support") sub.value = "Nota para field";
  else if (option === "Helpdesk") sub.value = "Nota para helpdesk";
  else if (option === "Sistemas_Windows") sub.value = "Nota para sistemas";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="Row Row_DynamicField_QueueNote">
      <label id="LabelDynamicField_QueueNote" for="DynamicField_QueueNote">
        To queue:
      </label>

      <div class="Field">
        <select
          class="DynamicFieldText Modernize"
          id="DynamicField_QueueNote"
          name="DynamicField_QueueNote"
          size="1"
        >
          <option value="">-</option>
          <option value="- Move -" selected="selected">- Move -</option>
          <option value="Field_Support">Field_Support</option>
          <option value="Helpdesk">Helpdesk</option>
          <option value="Sistemas_Windows">Sistemas_Windows</option>
        </select>
      </div>
    </div>
    <input id="Subject" type="text" />
  </body>
  <script src="test.js"></script>
</html>

Upvotes: 0

Related Questions