The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> User Create Account Hide/Show Drop-downs based on User Selection
aon
post Sep 17 2019, 03:49 PM
Post #1





Group: Members
Posts: 4
Joined: 17-September 19
Member No.: 26,992



Hi All,
Amateur coder here. In the create account page I want the customers and dealers to sign up through the same portal. Here I have incorporated a number of drop down menus, however I wish the dropdown menu's to only appear/hide if certain options are selected by the user.

Once the User has inputted their first & last names, email and password, they must then choose from the dropdowns. The first drop down must always be shown. Here the User must choose whether they are a (1) customer or a (2) dealer.
If they choose (1) customer, a second dropdown menu appears asking them if they are a yacht owner.
The second dropdown menu will simply have the options (3) yes or (4) no.
If (3) Yes is chosen, they are shown a third dropdown menu asking them for their HIN or Yacht's serial number.
If (4) they can just accept the T&Cs and create an account.

If the User chooses (2) Dealer, a second & third text input menu will appear at the same time. One will ask what their Legal name for their dealership is, and the other is a confirmation code - so we can check if it's actually them signing up.
The User can just accept the T&Cs and create an account.
Hopefully this isn't too overwhelming. Please let me know if there is simple code to execute this?
Thank you and Best regards!

IPB Image
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 17 2019, 06:15 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Where's your code? What you want can be done with Javascript. If you're looking for a ready made script then I don't know if any exist. But we can help you get what you want with Javascript.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aon
post Sep 18 2019, 02:09 AM
Post #3





Group: Members
Posts: 4
Joined: 17-September 19
Member No.: 26,992



QUOTE(CharlesEF @ Sep 18 2019, 12:15 AM) *

Where's your code? What you want can be done with Javascript. If you're looking for a ready made script then I don't know if any exist. But we can help you get what you want with Javascript.



Here's the code. Apologies if it seems messy towards the bottom end...


<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--one-half medium-up--push-one-quarter">

<div class="form-vertical">

<h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

{%- assign formId = 'RegisterForm' -%}
{% form 'create_customer', id: formId, novalidate: 'novalidate' %}
{% include 'form-status', form_id: formId %}

<label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
<input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

<label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
<input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

<label for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
<input
type="email"
name="customer[email]"
id="{{ formId }}-email"
class="{% if form.errors contains 'email' %} input--error{% endif %}"
{% if form.email %} value="{{ form.email }}"{% endif %}
autocorrect="off"
autocapitalize="off"
autocomplete="email"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId }}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}

<label for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
<input
type="password"
name="customer[password]"
id="{{ formId }}-password"
class="{% if form.errors contains 'password' %} input--error{% endif %}"
aria-required="true"
{%- if form.errors contains 'password' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-password-error"
{%- endif -%}
>
{%- if form.errors contains 'password' -%}
<span id="{{ formId}}-password-error" class="input-error-message">
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
</span>
{%- endif -%}

<label for="CustomerFormCustomerorDealer">Are you a Customer or Dealer?</label>
<select id="CustomerFormCustomerorDealer" name="customer[note][Customer or Dealer]">
<option value="" disabled selected>Select your option</option>
<option>Customer</option>
<option>Dealer</option>
</select>


<label for="CustomerFormFairlineowner">Are you a Fairline Yacht owner?</label>
<select id="CustomerFormFairlineowner" name="customer[note][Yes or No]">
<option value="" disabled selected>Select your option</option>
<option>Yes</option>
<option>No</option>
</select>

<label for="CustomerFormHIN">Enter Yacht H.I.N</label>
<input type="text" id="CustomerFormHIN" name="customer[note][Yacht HIN]" placeholder="This is the unique serial number issued to the Yacht.">
<dev/>

<label for="CustomerFormDealership">What is your Dealership's Legal Name?</label>
<input type="text" id="CustomerFormDealership" name="customer[note][Dealership]" placeholder="e.g. Simpson Marine Limited">
<dev/>

<label for="CustomerFormDealershipVerification">Dealer Verification Code</label>
<input type="text" id="CustomerFormDealershipVerification" name="customer[note][DealershipVerification]" placeholder="Please enter the verification code emailed to your dealership.">
<dev/>

<p class="text-center">
<u>
<a href="/pages/understanding-your-yacht-hin">Understanding Your Yacht HIN</a>
</u>

<dev/>
<p
</p>
<p class="text-center">
<input type="checkbox" id="CustomerFormAgree" name="customer[note][Agree]" value="I agree to Fairline Yachts Parts terms and conditions." /> I agree to Fairline Yachts' Parts <u>
<a href="/pages/terms-conditions">Terms and Conditions.</a>
</u>
</p>

<p class="text-center">
<input type="checkbox" id="CustomerFormAgree" name="customer[note][Agree]" value="I agree to all Fairline Yachts Parts Privacy, Refund & GDPR Policies." /> I agree to Fairline Yachts'
<a href="/pages/privacy-policy"><u>Privacy,</u></a>
<a href="/pages/refund-policy"><u>Refund</u><a> &
<a href="/pages/gdpr-policy"><u>GDPR Policies.</u></a>
</p>


<p class="text-center">
<input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
</p>




{% endform %}
</div>
</div>
</div>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 18 2019, 11:28 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Sorry, the code you posted is NOT HTML. It appears to be code generated by some blogger type program. It has to be processed through their program to generate the HTML.

We can help you with regular HTML/Javascript but not the program you are using. If you want to post the page 'Source' then we can help with normal HTML/Javascript. How you put it into your program is up to you.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aon
post Sep 18 2019, 12:51 PM
Post #5





Group: Members
Posts: 4
Joined: 17-September 19
Member No.: 26,992



QUOTE(CharlesEF @ Sep 18 2019, 05:28 PM) *

Sorry, the code you posted is NOT HTML. It appears to be code generated by some blogger type program. It has to be processed through their program to generate the HTML.

We can help you with regular HTML/Javascript but not the program you are using. If you want to post the page 'Source' then we can help with normal HTML/Javascript. How you put it into your program is up to you.



Oops sorry! I am using Shopify. The page in question is the create account page, which can be navigated through the man at the top right of the home page then selecting create account... I hope this helps

Password to enter store is: ohzayb

https://fairline-store-lite.myshopify.com
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Sep 18 2019, 05:17 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



You should run your pages through a validator, there are many errors. Anyway, attached is a sample of what you want to do. You will have to plug it into your Shopify page. I can't help with that.
Attached File  show_hide.html ( 3.31k ) Number of downloads: 236
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aon
post Sep 19 2019, 08:02 AM
Post #7





Group: Members
Posts: 4
Joined: 17-September 19
Member No.: 26,992



QUOTE(CharlesEF @ Sep 18 2019, 11:17 PM) *

You should run your pages through a validator, there are many errors. Anyway, attached is a sample of what you want to do. You will have to plug it into your Shopify page. I can't help with that.
Attached File  show_hide.html ( 3.31k ) Number of downloads: 236



Wow incredible help thank you very much indeed!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:57 AM