CODEWITHSUNDEEP
javascripthtml
Prince Bhatia
Prince Bhatia

Reputation: 63

How to append already created html form into table using javascript dropdown?

I have created a dropdown which has values from 1 to 6(need to add more). In that html i have created a blank table and a form .

what i am tryin to do is ..when i select value 1 from dropdown , i want form of id 1 should be appended to table

and when i select value 2 form with the value of 2 should be appended not any other

Till now what is happening when i select the drop form added to html table but it is not visible

<!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    </head>
    <body>
	<table border ="1" align='center'>
		<tr>

		   <td>
			  <select id="colors" onchange="changedesc()">
				 <option value="1">Desc1</option>
				 <option value="2">Desc2</option>
				 <option value="3" >Desc3</option>
				 <option value="4">Desc4</option>
				 <option value="5">Desc5</option>
				 <option value="6" >Desc6</option>
			  </select>
		   </td>

		</tr>
	 </table>

	 <table id ="addform">

		<!-- to be inserted here the div-->
	 </table>

		<form id=1 style="visibility: hidden;">
				<input type="text">
				<textarea>abc</textarea>
			</form>
		<form id=2 style="visibility: hidden;">
				<input type="text">
				<input type="checkbo">
		</form>
		

	 </div>

	 <script>
		 function changedesc(){
		 var eID = document.getElementById("colors");
		 var colorVal = eID.options[eID.selectedIndex].value
		 if (colorVal=="1"){
			var frm = document.getElementById(1);
			frm.removeAttribute("style");
			var ff = document.getElementById("addform")
			ff.appendChild(frm);
			
		 }
		 if (colorVal=="2"){
			var frm = document.getElementById(2);
			frm.removeAttribute("style");
			var ff = document.getElementById("addform")
			ff.appendChild(frm);
			//how to remove previuos one
		 }
		}
	 </script>
</body>
</html>

Upvotes: 0

Views: 32

Answers (1)

ROOT
ROOT

Reputation: 11622

Few point to mention here:

  • in your snippet there is a closing </div> tag, this would lead to invalid HTML.
  • you have a table with one cell that holds a select button, I suggest that you use <div> since table is made to be used for displaying data that meant to be viewed as a table.
  • you have another table with no <tr>, <td>, and appending the form tag to id, not having <tr>, <td> tags will be invalid HTML and cause the HTML to not render.
  • the hidden forms use id attribute of 1 and 2 although its parsed and recongniszed by the browser I suggest that you use a more meaningful ids.

  • one last thing as a suggestion is to use the display/visibility/opacity attributes to toggle show/hide the forms instead of appending them here.

    Here is a snippet with a working HTML from your snippet:

function changedesc(){
 var eID = document.getElementById("colors");
 var colorVal = eID.options[eID.selectedIndex].value
 if (colorVal=="1"){
  var frm = document.getElementById(1).cloneNode(true);
  console.log(frm);
  frm.id="new-form1"
  frm.removeAttribute("style");
  var ff = document.getElementById("form-td");
  ff.innerHTML = "";
  ff.appendChild(frm);

 }
 if (colorVal=="2"){
  var frm = document.getElementById(2).cloneNode(true);
  frm.id="new-form2"
  frm.removeAttribute("style");
  var ff = document.getElementById("form-td")
  ff.innerHTML = "";
  ff.appendChild(frm);
  //how to remove previuos one
 }
}
<!DOCTYPE html>
    <html lang="en">
    <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
    </head>
    <body>
	<table border ="1" align='center'>
		<tr>

		   <td>
			  <select id="colors" onchange="changedesc()">
				 <option value="1">Desc1</option>
				 <option value="2">Desc2</option>
				 <option value="3" >Desc3</option>
				 <option value="4">Desc4</option>
				 <option value="5">Desc5</option>
				 <option value="6" >Desc6</option>
			  </select>
		   </td>

		</tr>
	 </table>

	 <table id ="addform">
    <tr>
      <td id="form-td"></td>
    </tr>
		<!-- to be inserted here the div-->
	 </table>

		<form id=1 style="visibility: hidden;">
				<input type="text">
				<textarea>abc</textarea>
			</form>
		<form id=2 style="visibility: hidden;">
				<input type="text">
				<input type="checkbo">
		</form>
	 <script>
		 
	 </script>
</body>
</html>

Upvotes: 1

Related Questions