CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
1vehvehveh7
1vehvehveh7

Reputation: 27

Dynamic textbox and dropdown list based on another dropdown list -javascript

I needed the destination dropdown list to be dependent on my model's dropdown list. And whenever the user will chose an option on the destination list, textbox and label will be generated. However, I've messed up with my for loop so whenever the user adds a destination, model A.1 and model A.2 values shows up and when the user choose Model B, the destination should be of Model B's.

Please help me. Im still struggling to learn html/javascript/jquery Here is my progress so far:

<!DOCTYPE html>
<html>
<head>

<style>
 th, td {
	 padding:15px;
	 font-weight: normal;
 }

 </style>
 
 <script type="text/javascript">
window.onload = function() {
document.getElementById("addbtn").addEventListener("click", function(){
 createOptionList();
 dynamicObjects();

});

};

function createOptionList() {

  var destination = document.getElementById("destination");
  var array = ["Model-A.1", "Model-A.2", "Model-A.3", "Model-A.4"];
  var selectList = document.createElement("select");
  
 

  selectList.setAttribute("id", "mySelect");
  destination.appendChild(selectList);


  for (var i = 0; i < array.length; i++) {

    var option = document.createElement("option");
	var des = document.getElementById("destination");
	var br = document.createElement("br");
	
    option.setAttribute("value", array[i]);
    option.text = array[i];
    selectList.appendChild(option);
	destination.appendChild(br);
	
	
  }

}

function dynamicObjects() {
	
  var cri = document.getElementById("criteria").value
  var criteria = document.getElementById("criteria");
  var qty = document.getElementById("qty");
  var cell = document.getElementById("cell");
  var option = document.getElementsByTagName ("option");
  var blank = "";


  for (var i = 0; i < option.length; i++ ){
	var wrapper = document.createElement("span");
	var textbox = document.createElement("input");
	var textbox1 = document.createElement("input");
	var br = document.createElement("br");
	blank = option[i].innerText;
	
	if (blank == "Model-A.1"){
		wrapper.className = blank;
		textbox.className = blank;
		wrapper.innerText = "Good/n";
		criteria.appendChild(wrapper);
		criteria.appendChild(br);
		qty.appendChild(textbox)
		qty.appendChild(br)
		cell.appendChild(textbox1)
		cell.appendChild(br)
				
	}	else if (blank == "Model-A.2"){
		wrapper.className = blank;
		textbox.className = blank;
		wrapper.innerText = "Fine/n";
		criteria.appendChild(wrapper);
		criteria.appendChild(br);
		qty.appendChild(textbox)
		qty.appendChild(br)
		cell.appendChild(textbox1)
		cell.appendChild(br)
		}
    }	
}

</script>
 
 
 
 
</head>
<body>

<div class = "container">
<table class = "table">

<tr><td> MODEL: </td><td>
  <select id="model" name="model" onchange="populate(this.id, 'destination')" >
    <option value="select">--Select Model--</option>
    <option value="Model-A">Model-A</option>
	<option value = "Model-B"> Model-B </option>
  </select> </td></tr>
</table>


<input type="button" id="addbtn" value="Add Destination"/>
<hr>

<table>
	<tr>
		<th><center> DESTINATION: </th></center>
		<th><center> CRITERIA: </th></center>
		<th><center> QTY: </th></center>
		<th><center> CELL: </th></center>
	</tr>	
	<tr>
		<td width = "140"><center><div id="destination" style = "width:230px; word-wrap: break-word"></center></div></td>
		<td width = "140"><center><div id="criteria" style = "width:350px; word-wrap: break-word"></center></div></td>
		<td width = "140"><center><div id = "qty" required></td></center>
		<td width = "140"><center><div id = "cell" required></td></center>

		
	</tr>
 </table> 
 </body>
</html>

Upvotes: 0

Views: 935

Answers (1)

XaelGa
XaelGa

Reputation: 140

I hope this is what you were looking for :

<!DOCTYPE html>
<html>
<head>

<style>
 th, td {
 padding:15px;
 font-weight: normal;
}

</style>

<script type="text/javascript">
window.onload = function() {
document.getElementById("addbtn").addEventListener("click", function(){
createOptionList();


});

};

function createOptionList() {

var destination = document.getElementById("destination");
var letter = document.getElementById('model').value;
if (letter!="select"){
var array = [`${letter}.1`, `${letter}.2`, `${letter}.3`, `${letter}.4`];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
destination.appendChild(selectList);

for (var i = 0; i < array.length; i++) {

var option = document.createElement("option");
var des = document.getElementById("destination");
var br = document.createElement("br");

option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
destination.appendChild(br);



}
dynamicObjects();
}

}

function dynamicObjects() {

var cri = document.getElementById("criteria").value
var criteria = document.getElementById("criteria");
var qty = document.getElementById("qty");
var cell = document.getElementById("cell");
var option = document.getElementsByTagName ("option");
var blank = "";


for (var i = 0; i < option.length; i++ ){
var wrapper = document.createElement("span");
var textbox = document.createElement("input");
var textbox1 = document.createElement("input");
var br = document.createElement("br");
blank = option[i].innerText;

if (blank == "Model-A.1"){
    wrapper.className = blank;
    textbox.className = blank;
    wrapper.innerText = "Good/n";
    criteria.appendChild(wrapper);
    criteria.appendChild(br);
    qty.appendChild(textbox)
    qty.appendChild(br)
    cell.appendChild(textbox1)
    cell.appendChild(br)

  } else if (blank == "Model-A.2"){
    wrapper.className = blank;
    textbox.className = blank;
    wrapper.innerText = "Fine/n";
    criteria.appendChild(wrapper);
    criteria.appendChild(br);
    qty.appendChild(textbox)
    qty.appendChild(br)
    cell.appendChild(textbox1)
    cell.appendChild(br)
    }
   }    
 }

</script>




</head>
<body>

<div class = "container">
<table class = "table">

<tr><td> MODEL: </td><td>
<select id="model" name="model" onchange="populate(this.id, 
'destination')" >
<option value="select">--Select Model--</option>
<option value="Model-A">Model-A</option>
  <option value = "Model-B"> Model-B </option>
</select> </td></tr>
</table>


<input type="button" id="addbtn" value="Add Destination"/>
<hr>

<table>
<tr>
    <th><center> DESTINATION: </th></center>
    <th><center> CRITERIA: </th></center>
    <th><center> QTY: </th></center>
    <th><center> CELL: </th></center>
</tr>   
<tr>
    <td width = "140"><center><div id="destination" style = "width:230px; 
word-wrap: break-word"></center></div></td>
    <td width = "140"><center><div id="criteria" style = "width:350px; 
word-wrap: break-word"></center></div></td>
    <td width = "140"><center><div id = "qty" required></td></center>
    <td width = "140"><center><div id = "cell" required></td></center>


</tr>
</table> 
</body>
</html>

https://jsfiddle.net/hexcmu05/

Upvotes: 1

Related Questions