How to add a keyup EventListener to a form element

[johnwfoster]

I'm trying to add a keyup event to the Company field on a form.  I'm trying to do it via the Additional Code Snippets on the Template, but can't figure it out.

onFormReady($form, ctx) {
console.log("ready")
$('input[name="company"]').keyup = function() {
console.log("keyup")
}
}
});

I also tried addEventListener, but it failed.  I also tried wrapping my keyup in a setTimeout function to allow the form to be loaded.  Nothing seems to work.  I'm not sure if this is a timing issue, or something else is going on.

[tjoyce · Accepted solution]

@johnwfoster - use the global js events callback for this 

window.addEventListener("message", function(event){
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    var $form = $('form[data-form-id="' + event.data.id + '"]');
    var $companyField = $form.find('input[name="company"]');
        $companyField.on('keyup', function(){
          console.log($(this).val())
        })
  }
});

[johnwfoster]

@tjoyce , I haven't published it - just testing in preview.  But I can see with the inspector that the field is "company". It's just the standard HubSpot Company Name property. And I'm still perplexed why I don't get anything in the console for:

console.log('message:' + event.data.type + '-' + event.data.eventName + '-' + event.data.id)

I'd expect to see at least a hit for onFormReady.  Otherwise it's not even going to get into the if branch...

[tjoyce]

can you still link us to the preview of the page? @johnwfoster 

Also, don't preview like that... hit the "open in new window" button....

I'm not sure the events will bubble that far out of the iframe to hit your callback code (I have reported inconsistencies with this to HubSpot in the past).
Just open in new window to remove the extra iframe from the equation.

[johnwfoster · Accepted solution]

@tjoyce , I just found the error:
var $companyField = $form.find('input[name="company"]');
$company.on('keyup', function(){

$companyField.on('keyup', function(){

So the whole script is (with an added check to ensure that "company" is on the form):

<script>

window.addEventListener("message", function(event){
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
var $form = $('form[data-form-id="' + event.data.id + '"]');
var $companyField = $form.find('input[name="company"]');
if ($companyField != null) {
$companyField.on('keyup', function(){
console.log($(this).val())
})
}
console.log('keyup event added')
}
});
</script>

[tjoyce]

@johnwfoster - If you want to drop a link to the page your form is on, we can double check the correct name of that field and make sure that's working.

[tjoyce · Accepted solution]

@johnwfoster - use the global js events callback for this 

window.addEventListener("message", function(event){
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
    var $form = $('form[data-form-id="' + event.data.id + '"]');
    var $companyField = $form.find('input[name="company"]');
        $companyField.on('keyup', function(){
          console.log($(this).val())
        })
  }
});

[johnwfoster]

@tjoyce 

Thanks a lot for chiming in but I'm not quite getting it...  Does this need to go on the Site Header HTML as opposed to the Template Header HTML?

I added the following to the Head HTML on my template:

<script>
window.addEventListener("message", function(event){
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
var $form = $('form[data-form-id="' + event.data.id + '"]');
var $companyField = $form.find('input[name="company"]');
$company.on('keyup', function(){
//console.log($(this).val())
console.log('keyup')
})
console.log('keyup event added')
}
console.log('message:' + event.data.type + '-' + event.data.eventName + '-' + event.data.id)
});
</script>


console.log('keyup event added') never hits. 

All I see in console.log('message:' + event.data.type + '-' + event.data.eventName + '-' + event.data.id) are a bunch of raw-undefined-undefined.

[TiphaineCuisset]

Hi @johnwfoster 

Thank you for reaching out

I want to tag some of our experts on this - @tjoyce @Kevin-C do you have any suggestion for @johnwfoster on this? 

Thank you!

Best

Tiphaine