dynamically adding field in ui page

Go to solution
Vanit
Mega Contributor

‎03-01-2016 08:34 PM

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);

  }

}

Labels:
0 Helpfuls
  • 3,552 Views
1 ACCEPTED SOLUTION

Go to solution
Vanit
Mega Contributor

‎03-02-2016 11:42 PM

Hi Gurpreet,



Somehow it is ".checked" is not working in geneva version.



On checking the checkbox "accept_terms", "username" field will be added dynamically with the below code:



I achieved it with the below code:



UI page:



<input type="checkbox" id="accept_terms" name="accept_terms"/>


                      <label for="load_demo">I accept these terms and conditions.</label>  


                  </div>


              </td>


          </tr>




  <TR class="user_controls" style="display:none">


  <TD>


  <label for="userName">User Name: </label><input type="text" name="userName" id="userName" />


  </TD>


  </TR>



Client script in UI page:


var $jj = jQuery;


$jj('input[type=checkbox][name=accept_terms]').change(function() {


  if (this.checked == true) {


  $jj('form').attr("enctype", "multipart/form-data").attr("encoding", "multipart/form-data");


  $jj('.user_controls').show();


  }


});


View solution in original post

0 Helpfuls
6 REPLIES 6

Go to solution
bernyalvarado
Mega Sage

‎03-01-2016 09:49 PM

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


0 Helpfuls

Go to solution
Gurpreet07
Mega Sage

‎03-01-2016 09:52 PM

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 ;


}


0 Helpfuls

Go to solution
Gurpreet07
Mega Sage

‎03-01-2016 09:55 PM

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>


0 Helpfuls

Go to solution
Vanit
Mega Contributor
In response to Gurpreet07

‎03-01-2016 10:18 PM

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?


0 Helpfuls