Hide textbox characters on smartforms

  • 29 April 2015
  • 9 replies
  • 2 views

Badge +3

Hi All.

 

Is there anyway I can hide characters on my textbox  , for password purposes?  Like have an asterix or a bullet when a user enters a password.


9 replies

Userlevel 5
Badge +16

Dear @MoMapaela,

 

UPDATED**** 

 

1- drag datalable control anywhere on your formview 

 

2- add the following JS as an expression on the datalable:

 

<script type="text/javascript"> $(document).ready(function() 
{
document.getElementsByTagName("input")[12].type = "password"

});</script>

 Change the index according to the control position

 

** to check the number of the <input> tag on your form and determine the position of the password textbox:

 

1- press f12 

2- ctrl + f and look for <input

 

11376i057225D18423A9F6.png

 

3- get to your control, notice that there are17 match and my control is the 13th, the index start from zero which means my control index is 12

 

 

 

Note: you'll have to remove the watermark value from the textbox properties, othewise it will look like ******* 

 

wish it helps

Badge +10

Hi Mustafa,

 

In smartforms does this autimatically generated ID not change?

 

For example, If you deploy to another envirnment. Or if you refresh the page. Or if you move that view containing that control to another form.

 

Thanks

Userlevel 5
Badge +16

Dear @s0m3one,

 

 I'm sorry i didn't consider this, my fault

 

Check my updated answer :)

Badge +3

Thanks a lot :) 

Badge +3

Hi Mustafa.

 

I went and followed your steps , It still doesnt do anything . I have two textboxes on my view. Draged a datalable on my view and on my properties window , I added an expression. Am I doing it correctly?

Userlevel 5
Badge +16

Dear  @MoMapaela,

 

I've updated my answer, I was targeting the textbox by ID which is wrong.

kindly check the updated answer

Badge +3

Hi Mustaf .

 

Thanks again. Really helped. I found another way to do it , it is very short.

 

Add a datalabel and type the following on the text property of the datalabel:

 

<script>

$('input[name="txtPassword"]').get(0).type = 'password';

</script

 

Userlevel 5
Badge +16

Hi  @MoMapaela,

 

very good solution :)

 

good luck 

 

Badge +1

Hi Mark,

 

As I understand it you will have to insert the script into either the text property or in an expression (that populates the text property). I don't know how familiar you are with HTML and script, but if you think of the form rendering as a HTML page what basically happens is this:

 

<intput type="textbox" name="txtPassword">

    <script>

         //some random JQuery/JavaScript

    </script>

</input>

 

If you put that script in any other property it will, for example, go into the name field or the type field, which wont render correctly. Since MoMapaela is finding the textbox by it's name property it should work wherever you put your datalable with the script. And it should work anywhere as long as you find the textbox by the right name and use the right properties.

Reply