WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > PROGRAMMING LANGUAGES > Scripting and Server Side > show text field based on users select option

Reply
  Thread Tools Display Modes
Old 10th October 15, 12:11 PM   #1
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default show text field based on users select option

Hi

I am building a admin backend side and got a form that saves data to the mysql database which all works ok but I have a dropdown select menu and I want a text field to show if a user selects a specific option within the select menu, I have got it working for one of the select dropdown value but am not sure how to make it so that if they select the second option it also displays the text field as at the moment if the user selects the first option, the text field appears

Hope that makes sense, below is the coding I have

Code:
<form id="support" action="" method="post">
<select name="support_plans" id="plan">
<option>Select the support plan</option>
<option value="Domestic" >Domestic</option>
<option value="Domestic+">Domestic+</option>
<option value="Domestic Gold">Domestic Gold</option>
<option value="Domestic+ Gold">Domestic+ Gold</option>
<option value="Commercial+">Commercial</option>
 </select>
<br><br>

<div id="extra" style="display:none">
<label>PC/Laptop 1 :</label>
<input type="text" name="machine1" id="machine1" required placeholder="Please Enter PC/Laptop 1"/>
<br><br>
<label>PC/Laptop 2 :</label>
<input type="text" name="machine2" id="machine2" placeholder="Please Enter PC/Laptop 2"/>
<br><br>
<label>PC/Laptop 3 :</label>
<input type="text" name="machine3" id="machine3" placeholder="Please Enter PC/Laptop 3"/>
<br><br>
<label>PC/Laptop 4 :</label>
<input type="text" name="machine4" id="machine4" placeholder="Please Enter PC/Laptop 4"/>
<br><br>
<label>PC/Laptop 5 :</label>
<input type="text" name="machine5" id="machine5" placeholder="Please Enter PC/Laptop 5"/>
</div>
<br><br>
<label>Customer Name :</label>
<input type="text" name="customer_name" id="customer_name" placeholder="Enter Customer Name"/>
<br><br>
<label>Customer Email :</label>
<input type="email" name="customer_email" id="customer_email" required placeholder="Enter Customer Email"/>
<br/><br />
<label>Customer Phone :</label>
<input type="text" name="customer_phone" id="customer_phone" placeholder="Enter Customer's Phone Number"/>
<br><br>
<label>Date plan was purchased :</label>
<input type="date" name="date_purchased_plan" id="date_purchased_plan" required />
<br/><br />
<input type="submit" value="Submit" name="submit"/>
<br />
</form>

<script>
	$(document).ready(function () {
    $('#support select[name="support_plans"]').change(function () {
        if ($('#support select[name="support_plans"] option:selected').val() == 'Domestic+') {
            $('#extra').show();
        } else {
            $('#extra').hide();
        }
    });
	
    });
</script>
Thank you in advance

Ian
ianhaney is offline   Reply With Quote
Old 10th October 15, 04:55 PM   #2
ianhaney
WLC Lover
 
Join Date: Jun 2012
Posts: 78
Default Re: show text field based on users select option

Sorry I have got it sussed and sorted now

I can post the solution if need be if others need it
ianhaney is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:08 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.