Input field doesn't appear after changing the selection field

Related searches

Once the user selects 'Cancelled' in the drop-down menu, the input field should appear to the user, so that the user can enter their reason for cancellation.

But it's not working.

By default, the input field is disabled, and doesn't appear to the user.

I tried to use onselect but to no avail.

HTML

<div>
    <select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" disabled>
        <option value="Pending">Pending</option>
        <option value="Quoted">Quoted</option>
        <option value="Cancelled">Cancelled</option>
        <option value="Confirmed">Confirmed</option>
    </select>
    <input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>
if (document.getElementById('changeStatus').value != "Cancelled") {

  document.getElementById("closeReason").style.opacity = 0;
  document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
  document.getElementById("closeReason").style.opacity = 1;
  document.getElementById("closeReason").disabled = false;
}

once the user clicks on cancelled the input field disabled here should just be abled and appear for the user to enter

I think you missed the onchange function what happens when you change the select. Modify the onselect function to onchange function and add opacity:0 into input style and make it disabled initially.

function closeReasonAction() {
            if (document.getElementById('changeStatus').value != "Cancelled") {
                document.getElementById("closeReason").style.opacity = 0;
                document.getElementById("closeReason").disabled = true;
            }
            else if (document.getElementById('changeStatus').value == "Cancelled") {
                document.getElementById("closeReason").style.opacity = 1;
                document.getElementById("closeReason").disabled = false;
            }
        }
<div>
        <select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus" >
            <option value="Pending">Pending</option>
            <option value="Quoted">Quoted</option>
            <option value="Cancelled">Cancelled</option>
            <option value="Confirmed">Confirmed</option>
        </select>
        <input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity:0" disabled />
</div>

lightning:inputField - documentation, If the field doesn't have a value, the component's client-side validation catches the error before the form data is submitted to the server. The client-side required� The <input type="hidden"> defines a hidden input field. A hidden field let web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.

You have missed your onchange function.

function func(){
  if (document.getElementById('changeStatus').value != "Cancelled")
  {
    document.getElementById("closeReason").style.opacity = 0;
    document.getElementById("closeReason").disabled = true;
  }
  else if (document.getElementById('changeStatus').value == "Cancelled") {
    document.getElementById("closeReason").style.opacity = 1;
    document.getElementById("closeReason").disabled = false;
  }
}
func()
<div>

  <select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" onchange="func()">
    <option value="Pending">Pending</option>
    <option value="Quoted">Quoted</option>
    <option value="Cancelled">Cancelled</option>
    <option value="Confirmed">Confirmed</option>
  </select>
  <input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

<input>: The Input (Form Input) element, A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and� The <input> tag specifies an input field where the user can enter data. The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute. The different input types are as follows: <input type="button">. <input type="checkbox">. <input type="color">. <input type="date">.

<input type="text">, input elements of type text create basic single-line text fields. An input field can have spell checking enabled if it doesn't have the readonly� Input fields set as required on the server are universally required, to be displayed with a red asterisk wherever the input fields are used. For more information, see Require Field Input to Ensure Data Quality in Salesforce help. To make an input field required on the client only, include the required attribute in lightning-input-field. Use this attribute if you want to require a value in a field before the form can be submitted, and the field isn't marked required in Setup.

The if condition should be inside a function and the function should be called on change event of the select box

function closeReasonAction() {
  if (document.getElementById('changeStatus').value != "Cancelled") {

    //document.getElementById("closeReason").style.opacity = 0;
    document.getElementById("closeReason").disabled = true;
  } else if (document.getElementById('changeStatus').value == "Cancelled") {
    document.getElementById("closeReason").style.opacity = 1;
    document.getElementById("closeReason").disabled = false;
  }
}
<div>

  <select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus">
    <option value="Pending">Pending</option>
    <option value="Quoted">Quoted</option>
    <option value="Cancelled">Cancelled</option>
    <option value="Confirmed">Confirmed</option>
  </select>
  <input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

Text fields, A text field doesn't require a label if the field's purpose is indicated by a separate, independent label. Form with separate labels above the inactive text fields. Text� For me the problem was that changing the value for this field didn`t work: $('#cardNumber').val(maskNumber); None of the solutions above worked for me so I investigated further and found:

You should change onselect with onchange:

function closeReasonAction($el) {
  var $reason = document.getElementById("closeReason");
  if ($el.value != "Cancelled") {
    $reason.disabled = true;
  } else if ($el.value == "Cancelled") {
    $reason.style.opacity = 1;
    $reason.disabled = false;
  }
}
<div>

  <select placeholder="Status?" onchange="closeReasonAction(this)" name="changeStatus" id="changeStatus">
    <option value="Pending">Pending</option>
    <option value="Quoted">Quoted</option>
    <option value="Cancelled">Cancelled</option>
    <option value="Confirmed">Confirmed</option>
  </select>
  <input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

Unable to set focus on lightning-input-field in LWC, Unfortunately lightning-input-field doesn't have @api method focus. You can use lightning-input instead. Text Field. Text fields let users enter and edit text. Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. TextField. The TextField wrapper component is a complete form control including a label, input and help text. It supports standard, outlined and filled styling.

Why does this input allow for the character 'e' to be entered in the input field? No other alphabet character is able to be entered (as expected) Using chrome v. 44.0.2403.107

Field type=date isn't supported by all browsers. In such a case, the input field is treated like a normal text field and the user doesn't get any support when entering a date. We discovered this behaviour with Internet Explorer 11 and Firefox 38.

<input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time. The time and datetime-local input types support time and date+time input.

Comments
  • Why does the else branch exactly invert the condition? What do you expect the value would be in the else branch when you tested it in the original if first?