Jump to content

Apply onkeyup to inputs in Forms API

Recommended Posts

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:


$("#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}

    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



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? 

Share this post

Link to post
Share on other sites

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


and adapt your script for new id`s

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

The problem was in the javascript.


... should be ...


... and then it works fine.

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

Share this post

Link to post
Share on other sites
5 hours ago, modifiedcontent said:

Any way to delete this thread?

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...

  • Like 2

Share this post

Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By 999design
      Hi all,
      Running into an odd error that I can't seem to get my head around.
      We have 2 separately created Formbuilder forms sitting on a single page.
      But we keep experiencing weird results with them, originally we couldn't get one of the forms to ever submit so we ended up disabling CSRF for them which let us get around this issue.
      However it then causes a problem in that with CSRF disabled, one of forms always records 2 entries on submission. Just a straight duplicate within the entries for that form.
      So trying to stop this happening we tried enabling CSRF again and although that does stop the duplicated entry, it ends up giving really weird feedback such as the attached screengrab.
      Hazarding a guess I assume whatever is trigger on submission is firing twice because of the presence of the second form, but I have no idea why this would be the case as they are 2 seperately named forms?
      Any ideas?

    • By benbyf
      I have a a form in my site footer that can be accessed anywhere on site, I've added the form in the _inc.php file and added the render in the pages footer.php. However, this works well on the homepage e.g. you can submit said form and get a thank you on reload, doesnt work at all on other pages... Just lots like a fresh reload. Any thing im doing wrong here or ways to diagnose as there isn't an error log for formbuilder etc...?
    • By benbyf
      Hi, Looking to create form elements on a page–some input with a colection of form inputs and the appropriate labels and variables for that input. I've used ProForms in the past and rolled out my own when creating simply one off forms, but I wonder if anyone has found a good way of allowing form creation on page editing so that clients can adhocly make and edit forms?
    • By jds43
      I have a search page loosely based on Skyscrapers where I'm parsing a selector with options 'beds', 'bathrooms', 'size' fields. It is working well until I select 'Any' after I've run a search. This is where no results are returned (/?beds=&bathrooms=&size=&submit=). I want it to reset and show all results.
      I hope this isn't too vague.
    • By Peter Knight
      I have a few web forms which require testing on a weekly basis and I don't want the recipients (administrators) to receive these test emails.
      What would be a good way to test approx 15 forms from the front end and have the test delivered a list of secondary administrator recipients?
      I'm thinking that I could have some kind of config file which watches for a trigger word or email and then understands that it's a test and to bypass the normal admins?
      All of the forms ask for an email address so I could setup an email such as 'testform@email.not' etc which my config file (hook?) would watch for.
      Or is there a better way to do this?
      Additionally, I have a few extra requirements...
      Forms should goto an alternative success page. This is because I don't want my test to skew my Google Analytics conversion tracking Forms would need to be tested from the front-end and not the PW admin area Any advice appreciated.
      BTW I realise this should be posted in the proper FormBuilder support forum. I am in the process of renewing my license for access to that support forum.
  • Create New...