javascript - How to apply the CSS class "hidden" to the field rows of the fields needed to be suppressed and set the value on the inputs to a default value

Question

I have to hide the fields password and verify password from UI screen and assign a default password xyz for the new users created. Please suggest how I can do that in the below snippet:

<div class="field-row">
  <span class="crud-label">${msg("bel.password")}:&nbsp;*</span>
</div>
<div class="field-row" type="hidden">
  <input class="crud-input" id="${el}-create-password" type="password" maxlength="100" />
</div>
<div class="field-row">
  <span class="crud-label">${msg("label.rifypassword")}:&nbsp;*</span>
</div>
<div class="field-row" type="hidden">
  <input class="crud-input" id="${el}-create-verifypassword" type="password" maxlength="100" />
</div>

Answer 1

Seeing that no one helped you yet, let me help you here :).

You can set a default value on an input field with the "value" property.

Use this HTML:

<div class="field-row">
  <span class="crud-label">${msg("bel.password")}:&nbsp;*</span>
</div>
<div class="field-row hidden" type="hidden">
  <input class="crud-input" id="${el}-create-password" value="defaultPassword" type="password" maxlength="100" />
</div>
<div class="field-row">
  <span class="crud-label">${msg("label.rifypassword")}:&nbsp;*</span>
</div>
<div class="field-row hidden" type="hidden">
  <input class="crud-input" id="${el}-create-verifypassword" value="defaultPassword" type="password" maxlength="100" />
</div>

This will result in your default password values to be "defaultPassword".

Now, to hide these fields, you can use CSS:

.hidden {
    display: none;
}

Note that in the HTML I added extra class names. You add extra class names by just adding more to the class="", seperated by a space.

If you use jQuery or something, you can also set the display to none with:

$(".hidden").css("display", "none");

Hope this helped you!