asked on

dynamic creation of different controls based selection in select box values

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

Marco Gasi

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 A

ASKER

no sir it did not work for me anyway thank you

Marco Gasi

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 A

ASKER

nothing has changed

Marco Gasi

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 A

ASKER

yaa sir yours link is working but it is not for me why dont know

Marco Gasi

Can you post your full page, please? Just use code tags as you did for the javascript code.

shruti A

ASKER

<!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

ASKER CERTIFIED SOLUTION

Marco Gasi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ray Paseur

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 A

ASKER

Thank you so much sir its working fine thank you so much.........

Marco Gasi

Glad to help you :)
Do you know how to award points and a solved question?

Marco Gasi

As evident in comment https://www.experts-exchange.com/questions/29012157/dynamic-creation-of-different-controls-based-selection-in-select-box-values.html?anchorAnswerId=42071021#a42071021, this is the right solution to the question :)