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

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


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

<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>

<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"/>
<label>PC/Laptop 2 :</label>
<input type="text" name="machine2" id="machine2" placeholder="Please Enter PC/Laptop 2"/>
<label>PC/Laptop 3 :</label>
<input type="text" name="machine3" id="machine3" placeholder="Please Enter PC/Laptop 3"/>
<label>PC/Laptop 4 :</label>
<input type="text" name="machine4" id="machine4" placeholder="Please Enter PC/Laptop 4"/>
<label>PC/Laptop 5 :</label>
<input type="text" name="machine5" id="machine5" placeholder="Please Enter PC/Laptop 5"/>
<label>Customer Name :</label>
<input type="text" name="customer_name" id="customer_name" placeholder="Enter Customer Name"/>
<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"/>
<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 />

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

ianhaney is offline   Reply With Quote

Thread Tools
Display Modes
Threaded Mode Threaded 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 07:16 AM.

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 - 2018, Jelsoft Enterprises Ltd.