Loading...

Search jQuery

Search

jQuery Forum

Query About Enabling / Disabling Form Inputs

in Using jQuery • 11 years ago

Hi All,

I am quite new to jQuery and am trying to build a form that comprises two main parts (within multiple fieldsets wrapped within two divs). These are 'About You' and 'Your Requirements'. The behaviour I am looking for is as follows:

- By default when the page loads, the div around the second section will have a class of inactive which sets it's opacity to 0.2

- The second section will also have all input fields within disabled until the user completes any required fields within the first section

- When the required fields have been completed in section one, the user will then be able to activate the second section (removing the inactive class and adding an active class) by either clicking anywhere within it, or clicking/tabbing to one of it's inputs

I have searched quite a few places and tried various bits of code but have not been able to find any code that works in all major browsers and accomplishes all goals above. Does anyone have any ideas of where I can find the answer to this or how best to go about it?

All advise will be much appreciated. The HTML I am using is below:

Thanks

<form action="" id="booking_form">
<div id="book_form_section_1" class="active">
<fieldset>
<legend>About You</legend>
<div>
<label for="title">Title</label>
<select name="title" id="title" class="input">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div>
<label for="first_name">First Name</label>
<input type="text" name="first_name" class="input" required />
</div>
<div>
<label for="last_name">Last Name</label>
<input type="text" name="last_name" class="input"/>
</div>
<div>
<label for="contact_number">Contact Number</label>
<input type="tel" name="contact_number" required class="input" required/>
</div>
<div>
<label for="email">E-mail</label>
<input type="email" name="email" class="input"/>
</div>
<div>
<label for="confirm_email">Confirm E-mail</label>
<input type="email" name="confirm_email" class="input"/>
</div>
</fieldset>
</div>
<div id="book_form_section_2" class="inactive">
<fieldset>
<legend>Your Requirements</legend>
<div>
<label for="lesson_type">What lesson type are you looking for?</label>
<select name="lesson_type" id="lesson_type">
<option value="first_time_learner">First Time Learner</option>
<option value="refresher_course">Refresher Course</option>
<option value="pass_plus">Pass Plus</option>
</select>
</div>
</fieldset>
<fieldset>
<legend id="pick_up">Where would we pick you up?</legend>
<div>
<label for="house_name">House Name / Number</label>
<input type="text" name="house_name" required />
</div>
<div>
<label for="address1">Address Line 1</label>
<input type="text" name="address1" />
</div>
<div>
<label for="address2">Address Line 2</label>
<input type="text" name="address2"/>
</div>
<div>
<label for="address3">Address Line 3</label>
<input type="text" name="address3" />
</div>
<div>
<label for="post_code">Post Code</label>
<input type="text" name="post_code" required />
</div>
<div>
<input type="submit" value="submit" class="yellow_button"/>
</div>
</fieldset>
</div>
</form>

1

Replies(3)

chrisvillanueva

Re: Query About Enabling / Disabling Form Inputs

11 years ago

hi!

this should give you a good start.

here is my fiddle code

customize as needed.

Re: Re: Query About Enabling / Disabling Form Inputs

11 years ago

Thanks for this it's given me the perfect start. Much appreciated!

chrisvillanueva

Re: Query About Enabling / Disabling Form Inputs

11 years ago

no problem. i'm glad you have something to work with and help you along.

ask for help anytime.