CODEWITHSUNDEEP
javascriptcss
Stephen
Stephen

Reputation: 13

Combine input from text boxes to auto-fill another text box

My experience writing Javascript is very minimal, so I ask your forgiveness if I word this poorly. :)

First, the context.

I'm working in a saas platform that allows me to add custom CSS and Javascript to my forms.

Each form requires a unique email address.

However, we don't always need an email address -- especially when we are filling them out with information people provide either in person or by the phone.

SO I've been trying to find a way to add a workaround to one of the forms by auto-creating a "fake email" based on the input provided.

This allows us to use the form quickly without having to manually come up with an email, but still have the email be meaningful and unique when we search the system later to clean up these fake addresses.

Ok, now for what I need some brilliant guidance with.

I'd like to combine the input in two text boxes to auto-fill a third.

But additionally -- I'd like to add a suffix to this info.

So, for example, if they type in John" and "Doe" the new text box would add the suffix "[email protected]" to create "[email protected]".

I think you get the idea. :)

See this image: enter image description here

I appreciate any insight anyone can provide.

Thanks in advance!

Upvotes: 0

Views: 1012

Answers (1)

Boris Lobanov
Boris Lobanov

Reputation: 2454

I guess this should do the job. In this example the email changes every time any of the input changes by typing. You can easily change 'keyup' to 'blur' if you inly want it to change when you remove focus from input.

First Name: <input type="text" id="firstName" name="firstName"><br><br>
Last Name: <input type="text" id="lastName" name="lastName"><br><br>
Fake email: <input type="text" id="email" name="email"><br>
<script>
  var suffix = '[email protected]';
  
  var firstName = document.getElementById('firstName');
  var lastName = document.getElementById('lastName');
  var email = document.getElementById('email');
  
  function makeFakeEmail() {
  	var fakeEmail = firstName.value + lastName.value + suffix;
    email.value = fakeEmail;
  }
  
  firstName.addEventListener('keyup', makeFakeEmail);
  lastName.addEventListener('keyup', makeFakeEmail);
</script>

Upvotes: 3

Related Questions