View Single Post
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