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, 01: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, 05: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
Old 31st October 17, 09:49 PM   #3
Gimli
WLC Member
 
Join Date: Oct 2017
Location: South Africa
Posts: 8
Default Re: show text field based on users select option

i honestly didnt understand your question but i recently did a drop down with a radio button and a up loadable email in php contact form , it was quite tricky for me i wont lie , i has to use ajax to validate and also a base encoding. I would like to see the form , maybe i can pick up more about these type of fields.
Gimli 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 11:22 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 - 2017, Jelsoft Enterprises Ltd.