homepage Welcome to WebmasterWorld Guest from 54.204.231.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to open new inputs when listbox is choosen?
toplisek




msg:4562363
 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




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

function checkType( val ) {
// hide all conditional divs
$(#idCompanyDiv).hide();
$(#idPersonDiv).hide();
// show div relevent to selection
if ( val === "1" ) { $(#idCompanyDiv).show(); }
if ( val === "2" ) { $(#idPersoDiv).show(); }
}

Gowri pandiyan




msg:4572246
 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




msg:4572532
 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 ...

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved