dynamically adding field in ui page

[Vanit]

Hi,

Trying to add a fields(Username and Password) on checking a checkbox in UI page. Can anyone please guide.

HTML in UI page:

                      <input type="checkbox" id="accept_terms" name="accept_terms" onChange="isChecked()" value="false" />

Client Script:

function isChecked()

{

var termsOk = gel('accept_terms').value;

if(termsOk == true)

  {

    var form = document.forms['form.' + '${sys_id}'];

    addInput(form, "userName", display.value);

    addInput(form, "user_password", display.value);

  }

}

[bernyalvarado]

Hi Vani,

You may want to create your password field of type password.

Here goes a code snippet of how you could create an input field of type password.

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';

pass.value = 'Password';

I believe you may be able to do the appendChild to a form element.

I hope this helps.

Thanks,

Berny

[Gurpreet07]

You need to change condition and check if the checkbox is checked or not

var termsOk = document.getElementById('accept_terms').checked;

if(termsOk){

//Create elements ;

}

[Gurpreet07]

You could also create the fields on form with display none and then onchange of the checkbox change the display to block.

<input type="checkbox" id="accept_terms" name="accept_terms" onChange="isChecked()" value="false" />

<input type="text" id="uName" style="display:none;" value="Username" />

<input type="password" id="pwd" style="display:none;" value="Password"/>

<script>

function isChecked()

{

var termsOk = document.getElementById('accept_terms').checked;

if(termsOk == true)

  {

  document.getElementById('uName').style.display = 'block';

  document.getElementById('pwd').style.display = 'block';

  }

else{

  document.getElementById('uName').style.display = 'none';

  document.getElementById('pwd').style.display = 'none';

  }

}

</script>

[Vanit]

Thanks Gurpreet. I tried with the above code. It is not displaying the fields, irrespective of change of checkbox.

Can we use "OnChange" function for checbox?