1

I'm trying to input an URL Parameter into a form input. When I'm trying to do it via the inspect console, everything seems fine. But when I load the page I got an error: Uncaught TypeError: Cannot set property 'value' of null.

Here the main javascript

function getParameterByName(name)
 {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
     return "";
  else
 return decodeURIComponent(results[1].replace(/\+/g, " "));
 }

my input looks like this... There is a part of the ID that randomly changes on reload, only satisfaction_case_number stay the same.

<input id="satisfaction_case_number-da4e00e8-dcf6-4efa-9f92-d9564432f979_2621" class="hs-input" type="text" name="satisfaction_case_number" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$0.$satisfaction_case_number.0">

I tried 2 functions call.

document.getElementByName("satisfaction_case_number").value = getParameterByName("case")

and

document.querySelector('[id^="satisfaction_case_number"]').value = getParameterByName("case")

I have to say I'm kinda blind here. Any flag would be appreciated.

Here is the URL of my page : http://info.techo-bloc.com/customer-service-0?case=CAS-00745-Z0G5F8.

I'm trying to get : CAS-00745-Z0G5F8 into the input. Thanks

jhpratt
  • 6,841
  • 16
  • 40
  • 50
Antoine Sp
  • 11
  • 2
  • 1
    Are you using jQuery really? or added by mistake to the OP ? – Zakaria Acharki Nov 16 '17 at 18:58
  • 4
    There is no `getElementByName`, there's a `getElementsByName` that returns a collection. `document.querySelector('[id^="satisfaction_case_number"]').value = "foo"` worked fine for me on your page. – Dave Newton Nov 16 '17 at 18:58
  • 2
    [querySelector](https://jsfiddle.net/ewh73how/1/) works fine. – Andy Nov 16 '17 at 18:59
  • If you mean you can't get the right *value* into the element then there's something wrong with your `getParameterByName` code. – Dave Newton Nov 16 '17 at 19:00
  • Is the HTML there when the page loads, or is it added dynamically? That might be an issue. – Andy Nov 16 '17 at 19:04
  • @ZakariaAcharki, this isn't about getting params. That duplicate question wasn't going to help. – Andy Nov 16 '17 at 19:10
  • Its.. just passing the param as argument instead will do the job. – Zakaria Acharki Nov 16 '17 at 19:12
  • @Dave Newton If i inspect the element and put : document.querySelector('[id^="satisfaction_case_number"]').value = getParameterByName("case") into the console i got the right value. But onload of the page i got the error Uncaught TypeError: Cannot set property 'value' of null. – Antoine Sp Nov 16 '17 at 19:14
  • @Andy I'm not sure... it's being done by hubspot as a form.. so maybe the form comes after the page has load... If this is the case.. i should do a window.setTimeout ? – Antoine Sp Nov 16 '17 at 19:17

3 Answers3

1

Wait till the window has loaded then execute it;

window.onload = function () {
    document.getElementsByName("satisfaction_case_number")[0].value = getParameterByName('case'); 
}

The form is being dynamically generated after the rest of your content has loaded, It's unreliable to rely on timing as connection speeds can vary, using window.onload will ensure the page is fully loaded before executing.

I tested this by throttling my browser connection to "Slow 3G" and it still worked, Your original piece of code that selected the element by name wasn't selecting the first entry in the NodeList, to do this you need to add [0] before the .value

Jack
  • 649
  • 7
  • 22
  • https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded may work also (it's earlier) – sam Nov 16 '17 at 20:51
0

You can try document.querySelector('input[id *= satisfaction_case_number]').value = 'example'

Petrashka Siarhei
  • 733
  • 10
  • 12
-1
setTimeout(function () {
  var input = document.querySelector('[id^="satisfaction_case_number"]');
  input.value = getParameterByName('case');
  input.dispatchEvent(new Event('change'));
}, 1000);

or try to modify the code that creates HubSpot form:

hbspt.forms.create({
  // ...
  onFormReady: function () {
    var input = document.querySelector('[id^="satisfaction_case_number"]');
    input.value = getParameterByName('case');
    input.dispatchEvent(new Event('change'));
  }
});
Dmitry Druganov
  • 2,088
  • 3
  • 23
  • 32
  • This isn't the issue. See the comments below the question. – Andy Nov 16 '17 at 19:04
  • Maybe the element doesn't exists in the moment you are trying to access it? – Dmitry Druganov Nov 16 '17 at 19:09
  • I've update the answer, please try these solutions. Likely that the element you are updating doesn't exist at the very beginning. So you need to wait for them moment when it appears. Probably the library that renders the form provides a hook for it (something like `onReady` or similar?). – Dmitry Druganov Nov 16 '17 at 19:17
  • @DmitryDruganov It worked with a timeout... guess the form wasn't loaded at the beginning. The addEventListener didn't work tho... – Antoine Sp Nov 16 '17 at 19:25
  • I see that you are using HubSpot API to create the form. I'm not familiar with it, but looks like it provides `onFormReady` hook. Try it also. – Dmitry Druganov Nov 16 '17 at 19:33
  • @DmitryDruganov I added the code and it worked, but when I click on the other input it disappears... any idea why? – Antoine Sp Nov 16 '17 at 19:34
  • Try `document.querySelector('[id^="satisfaction_case_number"]').blur()` right after the value assignment – Dmitry Druganov Nov 16 '17 at 19:36
  • When you modify the value you also need to notify the form about the change. Triggering of `blur` does the trick. Also take a look to [HubSpot API docs](https://developers.hubspot.com/docs/methods/forms/advanced_form_options). Likely that there should be a way to provide initial values for the form. – Dmitry Druganov Nov 16 '17 at 19:37
  • Im not familar enough with API to go that way.. should it look like this ? setTimeout(function () { document.querySelector('[id^="satisfaction_case_number"]').value = getParameterByName("case"); }, 1000); document.querySelector('[id^="satisfaction_case_number"]').blur(); – Antoine Sp Nov 16 '17 at 19:42
  • You need to add the last line to the setTimeout callback. Also try the updated solution – Dmitry Druganov Nov 16 '17 at 19:50
  • @DmitryDruganov added the script on the website, but still the same... is it possible HubSpot has events handler on inputs? and that's why I keep clearing it? – Antoine Sp Nov 16 '17 at 19:58
  • @AntoineSp Try with `dispatchEvent` (see updated code) – Dmitry Druganov Nov 16 '17 at 21:20
  • @AntoineSp Did you have a chance to try the solution with `dispatchEvent`? – Dmitry Druganov Nov 18 '17 at 02:29
  • Somebody who've just downvoted the answer, could you please clarify it? – Dmitry Druganov Nov 19 '17 at 17:08
  • @DmitryDruganov no, actually I found out that HubSpot will automatically paste the value if the parameter is the same as his internal key! So didn't have to to use java :) Thanks tho for your help :) – Antoine Sp Nov 23 '17 at 14:22