How to open new inputs when listbox is choosen?

Forum Moderators: open

Message Too Old, No Replies

How to open new inputs when listbox is choosen?

toplisek

2:09 pm on Apr 7, 2013 (gmt 0)

I like to solve with jQuery event to open other additional fields if listbox like company is selected. How to do it using jQuery and validation
bassistance.de/jquery-plugins/jquery-plugin-validation/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>

<table>
<tr>
<td align="left" colspan="2" class="myfield1">Type of account*<br>
<select id="" class="" onchange="checkType(this.value)" name="id_mygroups1" >
<option value="1">1. Company</option>
<option value="2">2. Person</option>
</select>
</td>
</tr>
</table>
</body>

daveVk

2:15 pm on Apr 19, 2013 (gmt 0)

Gowri pandiyan

9:42 am on May 9, 2013 (gmt 0)

Please check the below codes

Script:

<script type="text/javascript">

$(document).ready(function(){

$("#idCompanyDiv").hide();
$("#idPersoDiv").hide();

$("#id_mygroups1").change(function () {

var val = $(this).val();

if ( val === "1" ) { $("#idCompanyDiv").show();$("#idPersoDiv").hide(); }
if ( val === "2" ) { $("#idPersoDiv").show();$("#idCompanyDiv").hide(); }

});

});
</script>

HTML:

<table>
<tr>
<td align="left" colspan="2" class="myfield1">Type of account*<br>
<select id="id_mygroups1" class="" name="id_mygroups1" >
<option value="1">1. Company</option>
<option value="2">2. Person</option>
</select>
<div id="idCompanyDiv">Company.......</div>
<div id="idPersoDiv">Person.........</div>
</td>
</tr>
</table>

If you would like to have "1. Company" as pre-selected

Script:

<script type="text/javascript">

$(document).ready(function(){

$("#idPersoDiv").hide();

$("#id_mygroups1").change(function () {

var val = $(this).val();

if ( val === "1" ) { $("#idCompanyDiv").show();$("#idPersoDiv").hide(); }
if ( val === "2" ) { $("#idPersoDiv").show();$("#idCompanyDiv").hide(); }

});

});
</script>

HTML:

<table>
<tr>
<td align="left" colspan="2" class="myfield1">Type of account*<br>
<select id="id_mygroups1" class="" name="id_mygroups1" >
<option value="1">1. Company</option>
<option value="2">2. Person</option>
</select>
<div id="idCompanyDiv">Company.......</div>
<div id="idPersoDiv">Person.........</div>
</td>
</tr>
</table>

daveVk

12:52 am on May 10, 2013 (gmt 0)

That looks fine, is there a problem ?

If you want Company preselected then select in option

<option value="1" selected="selected">1. Company</option>

If you need to code for more than two options then less code to do hides first

$("#idPersoDiv").hide();
$("#idCompanyDiv").hide();
... more hides ...
if ( val === "1" ) { $("#idCompanyDiv").show(); }
if ( val === "2" ) { $("#idPersoDiv").show(); }
... more shows ...