Hi there,
If I understand you correctly, you’d like to use JavaScript to dynamically change if a field is required or not and the problem you’re having is that your calls to get the field object are being returned null or undefined when trying to get the <input> element by its id.
You can use either the plain JavaScript version: document.getElementbyId(‘id’)
Or
The jQuery version: clickd_jquery(‘#id’)
I did some experimenting and I think the reason that you’re not able to get the field object returned is because you may be making the function call for the <input> object before it has fully loaded on the page. Basically the JavaScript thinks its not there because it performed the search before it was loaded.
The easiest way to avoid this is to use the window.onload function.
I’ve provided an example below:
window.onload=function waitForPagetoLoad(){
var tracker = clickd_jquery('#b2e3da3be13ae511941800155d61b56').prop(‘required’, true);
}
Although there isn’t much point in doing this immediately after the onload because otherwise you might as well just set it to be required in the ClickDimensions form editor tool. So I imagine you want to write a function that determines if a field should be required based on another set of conditions. Perhaps you want make a field required only if their email provider is gmail or you want to make a field only required if they open the link within 24 hours. I don’t know, but whatever your conditions, you should still nest those functions inside the onload function.
The .prop(‘required’, true) function sets the the input field's required property to true. You can undo this by using the .prop(‘required’, false); function.
You could also potentially use the .addClass() function to append a "fieldRequired" class to the <input> element and create custom CSS to style it differently from the optional fields. Just be careful not to use any generic class names that may already be in use.
Hope this helps.