Unable to get input value using jQuery with crayons v3

[sarfaraz_Mohammed]

Hi Team,

We are developing a custom app with a custom installation page. With the launch of crayons v3. I’ve added the CDN along with jQuery.

The problem we are facing is that we are unable to fetch the input value with Jquery. Attaching a code snippet for further reference.
iparams.txt (3.9 KB)

The installation page works with crayons v2. I’m only facing this issue in v3.
Thanks in advance.

[Santhosh (Santhosh Balusamy)]

@sarfaraz_Mohammed,
Good Day!
the way you’re setting/getting value from Crayons input is wrong,

you need to use like this to set and get the value

eg:

 <fw-input class="input-container" id="domain_name" label="Domain Name" placeholder="Enter Freshdesk Domain name" required></fw-input>

let dominId = document.getElementById('domain_id').value; // get the value

 document.getElementById('domain_id').value = 'some value' // to set the value

Hope it helps

Thanks

[sarfaraz_Mohammed]

Hi @Santhosh

Thanks for the help the method worked and I’m able to get the values from the input.

But another problem now I’m facing is that when the input fields are with the <fw-tab> I’m only able to get the value of the domain the API key input field every time returns empty.

Also, can we use JQuery with crayons v3?

[Santhosh (Santhosh Balusamy)]

@sarfaraz_Mohammed

Also, can we use JQuery with crayons v3?

yes, you can, but in crayons, Jquery methods won’t work, like $(‘#id’).val()
instead, you need to use the crayons attributes/props

@sarfaraz_Mohammed

But another problem now I’m facing is that when the input fields are with the <fw-tab> I’m only able to get the value of the domain the API key input field every time returns empty.

you mean, able to retrieve only domain and not the API key ?
ideally, both are crayons Input the field right, then it won’t be a problem.

Thanks

[sarfaraz_Mohammed]

Hi @Santhosh

I was able to figure out the other issue was with my code. I’m able to get both values with tabs now.
Thanks for your help