Apply onkeyup to inputs in Forms API

[modifiedcontent]

I am trying to apply onkeyup or jquery keyup to a PW form - to autogenerate a username from a real name.

This javascript/jquery works fine on test html input fields:

  Reveal hidden contents

$("#fullname").keyup(function(event) {
	var input=$(this).val();
	
	input = input.replace(/^\s+|\s+$/g, ''); // trim
	input = input.toLowerCase();
  
  // replace diacritics, weird accent letters, swap ñ for n, è for e, etc
	var diacritics = [
    {char: 'A', base: /[\300-\306]/g},
    {char: 'a', base: /[\340-\346]/g},
    {char: 'E', base: /[\310-\313]/g},
    {char: 'e', base: /[\350-\353]/g},
    {char: 'I', base: /[\314-\317]/g},
    {char: 'i', base: /[\354-\357]/g},
    {char: 'O', base: /[\322-\330]/g},
    {char: 'o', base: /[\362-\370]/g},
    {char: 'U', base: /[\331-\334]/g},
    {char: 'u', base: /[\371-\374]/g},
    {char: 'N', base: /[\321]/g},
    {char: 'n', base: /[\361]/g},
    {char: 'C', base: /[\307]/g},
    {char: 'c', base: /[\347]/g}
	]

	diacritics.forEach(function(letter){
    input = input.replace(letter.base, letter.char);
	});
	
	input = input.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
	.replace(/\s+/g, '') // collapse whitespace and replace by -
	.replace(/-+/g, ''); // collapse dashes

	$("#username").text(input);
});

 

But I can't get it to work on the fields generated by the PW forms API, even though the input id names are exactly the same.

What am I missing? 

[Zeka]

Check id`s of generated fields. They shoud be like

Inputfield_fullname

and adapt your script for new id`s

[tpr]

Perhaps there's already a keyup event on the input, perhaps try this (note that it's using $(document) to make the event fire even if the elements are added later to the DOM):

$(document).on('input propertychange', '#fullname', (function(event) {

But Zeka's suggestion could also work.

[modifiedcontent]

Thanks for the response. The id's of the PW input fields are exactly the same as the html test fields; 'fullname' and 'username'.

The alternative first line breaks the javascript.

[modifiedcontent]

The problem was in the javascript.

$("#username").text(input);

... should be ...

$("#username").val(input);

... and then it works fine.

Nothing to do with Forms API. Any way to delete this thread?

[szabesz]

  On 11/7/2016 at 3:15 AM, modifiedcontent said:

Any way to delete this thread?

Expand  

Why? Someone might still find it useful in the future. Especially if you edit your original post, fix this line and provide a short explanation.

Sure, this thread could be moved to the Dev Talk topic, so perhaps a Moderator can help us out...

[SiNNuT]

@szabesz , moved to Dev Talk as suggested