UI: Change behavior of address fields in volunteer and admin sign-up

[rkpattnaik780]

Description

As a volunteer/admin, while signing up, the form fields pertaining to address should be enabled only if the dependent fields are filled. The "state/province" field should be enabled only after country is selected. City should be enabled only if both "country" and "state/province" are selected.

Acceptance Criteria

Update [Required]

• [ ] GIF of the behavior of form fields.
• [ ] Changed behavior of form fields.

Definition of Done

• [ ] All of the required items are completed.
• [ ] Approval by 1 mentor.

Estimation

2 hours

[ymaheshwari1]

I am interested in working on this.

[abhinav72610]

@rkpattnaik780 Hey I am new in this community and I am participating in OSH can I take this up?

[yash2189]

Can I work on this @rkpattnaik780 ?

[PrernaSingh587]

Hi, I am interested to work on this. Can I do it?

[rkpattnaik780]

Hi, I am interested to work on this. Can I do it?

@psingh587 go ahead!

[PrernaSingh587]

Sure, Thanks!

[rkpattnaik780]

@psingh587 are you still working on this issue?

[PrernaSingh587]

Sir, I am having problems in installation of VMS in my machine. I had asked for help yesterday but no response yet. Could you please help me? I have checked the files on the repo, i can fix this, only problem is the installation.

[rkpattnaik780]

Let me try to run vms using docker compose, I will reach back after that.

[PrernaSingh587]

My Installation is done. I am working on this. Thanks so much for your help

[PrernaSingh587]

Sir, I have a question.

This is what I see in volunteer sign up page. In this, City is there first, then state, then country. But in live vms, its different.

Here its written in order. Where am I going wrong? Also, there is no dropdown for city, country as well. another issue has already been raised on it.

[PrernaSingh587]

@rkpattnaik780 Anything on it?

[rkpattnaik780]

@psingh587 sorry for the delayed response. I can see the change can be done only to admin signup page, you just need to disable the respective dropdowns with something like <select disabled>. You have to conditionally put the disabled attribute.

[PrernaSingh587]

Okay so that means I only have to do it in the admin sign up page right? I have written a JS function and its working as well. I will attach it. I have written that function in another JS file which was already there containing other function. Should I make a new file? or Will it be okay if I write it in this one? Also , when I am trying to make another file , I cant see the change I made. How shall I proceed?

[rkpattnaik780]

Hello @psingh587 . Yup just the admin signup. I was thinking this wouldn't be needing a JS file. You can conditionally add an attribute to the template. I googled it right now, you can do something like this. And this is bit out of context, to easily record screen, use peek :)

[PrernaSingh587]

Hello @psingh587 . Yup just the admin signup. I was thinking this wouldn't be needing a JS file. You can conditionally add an attribute to the template. I googled it right now, you can do something like this. And this is bit out of context, to easily record screen, use peek :)

Hi, Actually I had thought about it earlier- to do it inside the HTML only. But I am not able to figure out how to write the condition to disable=" " . How to get the value of country dynamically? Please help me here. I checked it here as well

[rkpattnaik780]

Hello @psingh587 . Yup just the admin signup. I was thinking this wouldn't be needing a JS file. You can conditionally add an attribute to the template. I googled it right now, you can do something like this. And this is bit out of context, to easily record screen, use peek :)

Hi, Actually I had thought about it earlier- to do it inside the HTML only. But I am not able to figure out how to write the condition to disable=" " . How to get the value of country dynamically? Please help me here. I checked it here as well

It seems bit tricky to do it in htmll. You can handle it through javascript, won't be an issue. Just handle all the scenarios.

[rkpattnaik780]

There is no necessity to create a new js file, load_city.js and load_state.js should do the work.

[PrernaSingh587]

There is no necessity to create a new js file, load_city.js and load_state.js should do the work.

Working on it!

[PrernaSingh587]

@rkpattnaik780 Please look into my PR