We help IT Professionals succeed at work.

dynamic creation of different controls based selection  in select box values

shruti A
shruti A asked
on
14 Comments
1 Solution
193 Views
Last Modified: 2017-04-17
this is  bootstrap code
<span>How do you pass values:</span></th>
   <td><select id="type" class="selectpicker" type="text" style="width:150px"  name="chkPassPort" required="" onSelect="select()">
   <option value="">select</option>
  <option value="Custom Values"  id="chkYes">Custom Values
</option>
  <option value=" Static Values"  id="chkNo"> Static Values</option>
  </select></td>
<div id="dvPassport" style="display: none">
    Custom Values:
    <input id="value" type="text" placeholder=" Enter Value " name="value" required="" />
</div>
<div id="dPassport" style="display: none">
    Static Values:
    <select id="value" class="selectpicker" type="text" style="width:150px" name="value" required="" align="left">
  <option value="">select</option>
  <option value="state">State</option>
  <option value="District">District</option>
  <option value="Gender">Gender</option>
  <option value="B-group">B-group</option>
  </select>
</div>
  </tr>
below is javascript
please help me to solve what i shoud do where i'm going wrong
<script language="javascript" type="text/javascript">
function select()
{
if(document.form.chkPassPort.value=="Custom Values")
{
  $("#dvPassport").show() && $("#dPassport").hide();
}
else
{
 $("#dPassport").show() && $("#dvPassport").hide();
            }
}
</script>

Open in new window

Comment
Watch Question

View Solution Only

Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
You can't concatenate javascript statements using &&. Just put them in the same block and jQuery will execute them
<script language="javascript" type="text/javascript">
function select()
{
if(document.form.chkPassPort.value=="Custom Values")
{
  $("#dvPassport").show();
  $("#dPassport").hide();
}
else
{
 $("#dPassport").show();
 $("#dvPassport").hide();
}
}
</script>

Open in new window

shruti Aweb developer

Author

Commented:
no sir it did not work for me anyway thank you
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Sorry, I forgto to mention another important thing: use jQuery to get the select value
if ($('#type').find(":selected").text() == 'Custom Values'){

Open in new window

or using option id
if ($('#type').find(":selected").attr('id') == 'chkYes'){

Open in new window

shruti Aweb developer

Author

Commented:
nothing has changed
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Okay, then I guess you don't have any other not-posted javascript to bind the function select to the 'change' event of the select. So do this:
$(document).ready(function () {
			function select() {
				if ($('#type').find(":selected").attr('id') == 'chkYes'){
					$("#dvPassport").show();
					$("#dPassport").hide();
				} else {
					$("#dPassport").show();
					$("#dvPassport").hide();
				}
			}
                        //this makes the select change call the function select():
                       // anytime the user change the selection the function select() is called and works as expected
			$('#type').on('change', function(){
				select();
			});
		});

Open in new window

You can check it here: http://test.webintenerife.com/select_change.php
shruti Aweb developer

Author

Commented:
yaa sir yours link is working but it is not for me why dont know
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Can you post your full page, please? Just use code tags as you did for the javascript code.
shruti Aweb developer

Author

Commented: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
</head>
<style type="text/css">
.table {
    margin: 0 auto;
    width: 50%;
    opacity: ;
}
</style>
</head>
<body>
	<form class="form-horizontal" name="form" role="form" method="post" action="" onclick="validator()">
<table>
	<thead>
<tr>
<th>Enter Field Name<span class="label label"> <td><input id="new-state" type="text" placeholder="Field Name "/>
 </td></span></th>
 <td><button type="button" id="btn-add-state">ADD</button></td></tr>
<tr>
<th>Select Field Name <span class="label label"> <td>
  <select id="state" class="selectpicker" type="text" style="width:150px" name="column" required="" align="left">
  <option value="">select</option>
  <option value="col1">col1</option>
  <option value="col2">col2</option>
  </select>
  </td></span></th>
</tr>
  
  <tr>
<th>Select Field type<span class="label label"><td>
<select id="type" class="selectpicker" type="text" style="width:150px" name="type" required="">
  <option value="">select</option>
  <option value="INT">INT</option>
  <option value="VARCHAR">VARCHAR</option>
  </select></td></span>
  </th>
   
   </tr>
   <tr>
   <th>
   <span>How do you pass values:</span></th>    <td>
   <select id="type" class="selectpicker" type="text" style="width:150px"  name="chkPassPort" required="" onselect="select();">
   <option value="">select</option>
  <option value="Custom Values"  id="chkYes">Custom Values</option>
  <option value=" Static Values"  id="chkNo"> Static Values</option>
  </select></td>
<div id="dvPassport" style="display: none">
    Custom Values:
    <input id="value" type="text" placeholder=" Enter Value " name="value" required="" />
</div>
<div id="dPassport" style="display: none">
    Static Values:
    <select id="value" class="selectpicker" type="text" style="width:150px" name="value" required="" align="left">
  <option value="">select</option>
  <option value="state">State</option>
  <option value="District">District</option>
  <option value="Gender">Gender</option>
  <option value="B-group">B-group</option>
  </select>
</div>
  </tr>
  <tr>
  <th>
<input type="submit" value="SUBMIT" class="btn btn-success"  name="submit" />
   </th>

</tr> 
<tr>

<td><input id="remove" type="button" value="Done" onclick="myFunction()"></td></tr>
</thead>
</table>
	</form>
	<script type="text/javascript">
	$(document).ready(function () {
			function select() {
				if ($('#type').find(":selected").attr('id') == 'chkYes'){
					$("#dvPassport").show();
					$("#dPassport").hide();
				} else {
					$("#dPassport").show();
					$("#dvPassport").hide();
				}
			}
                        //this makes the select change call the function select():
                       // anytime the user change the selection the function select() is called and works as expected
			$('#type').on('change', function(){
				select();
			});
		});
</script>
	<script type="text/javascript">
$(document).ready(function() {
    $("#state").select2({
      tags: true
    });
      
    $("#btn-add-state").on("click", function(){
      var newStateVal = $("#new-state").val();
      // Set the value, creating a new option if necessary
      if ($("#state").find("option[value='" + newStateVal + "']").length) {
        $("#state").val(newStateVal).trigger("change");
      } else { 
        // Create the DOM option that is pre-selected by default
        var newState = new Option(newStateVal, newStateVal, true, true);
        // Append it to the select
        $("#state").append(newState).trigger('change');
      } 
    });  
});
</script>
<script type="text/javascript">
$(document).ready(function() {
    $("#type").select2({
      tags: true
    });
  });
    </script>
    <script language="javascript" type="text/javascript">
function select()
{
if(document.form.chkPassPort.value=="Custom Values")
{
  $("#dvPassport").show();
  $("#dPassport").hide();
}
else
{
 $("#dPassport").show();
 $("#dvPassport").hide();
}
}
</script>
</body>
</html>

Open in new window

Freelancer
CERTIFIED EXPERT
Top Expert 2010
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Ray Paseur
Most Valuable Expert 2011
Author of the Year 2014

Commented:
Buy this book and read it cover-to-cover so you understand the basics of JavaScript that underpin jQuery.
https://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/

After that you should be able to use the online jQuery resources to help you work independently.
https://learn.jquery.com/
shruti Aweb developer

Author

Commented:
Thank you so much sir its working fine thank you so much.........
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:
Glad to help you :)
Do you know how to award points and a solved question?
Marco GasiFreelancer
CERTIFIED EXPERT
Top Expert 2010

Commented:

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.

View Solution