Jump to content

Dynamic add element on the the page


Ashish Sood

Recommended Posts

Hi All, My project is in the last phase, my requirement is i want to dynamic add row on the page in which i want text box, dropdownlist and text area. Detail. Right now i had create a text box ,2 dropdown list and one text area, which is used to stored user information but its not full-fill the requirement because when there is more than one user then we need more element on the page, so i need a button which can call the function. so user click on the button these four element will be create below the earlier element. Hope you guys understand my Req. Please help me guys in my last phase ( i am very new to JS) All helps is appriciated Thanks A lot In Advance

Edited by Ashish Sood
Link to comment
Share on other sites

For the security reason i am using ### to hide the information.

<?php include_once('validation_turnover.php'); ?><!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Daily Turnover</title><style type="text/css">.format {font-family: Verdana, Geneva, sans-serif;font-size: 15px;font-style: normal;text-transform: capitalize;position: relative;text-align: justify;color: #963;letter-spacing: 1px;display: inline;width: auto;visibility: visible;height: 1px;}</style></head><body><form action="turnover.php" method="post"><b>  <label for="INCIDENT" class=format>INCIDENT ID</label>				<label for="SEVERITY" class=format>SEVERITY</label>	<label for="STATUS" class=format>STATUS</label>				  <label for="description" class=format>TICKET DESCRIPTION</label></b></b><br /><input type="text" name="incident"  />	<select name="sev">   <option value="none0"></option>  <option value="###">###</option>  <option value="###">###</option>  <option value="###">###</option>  <option value="###">###</option>  <option value="###">###</option> </select> 		   <select name="status"><option value="###"></option>  <option value="###">###</option>  <option value="###">###</option>  <option value="###">###</option>  <option value="###">###</option>  <option value="###">######</option>  <option value="###">###</option>  </select>	  <textarea rows="2" cols="30" name="description_tic" ></textarea><br><center><input name="submit" type="submit" value="Submit" /></form><hr></html></body>

Edited by Ashish Sood
Link to comment
Share on other sites

I misunderstood. I thought you were already creating elements. This might be a lot to learn. You should start by giving the important elements id attributes, like your form. createElement and appendChild will be important methods to use. The examples may help. cloneNode might be an alternative that could simplify some tasks. You could wrap your form elements in a fieldset element, and then just clone the whole fieldset at once. You would still need to update the names of the elements.

Link to comment
Share on other sites

Thanks For the replyI had successfully add a elements on my page. But only one problem i am facing is that how could i add option values in my dropdown list ?<script>function myFunction(){ var text=document.createElement("input"); document.body.appendChild(text); var btn=document.createElement("select"); document.body.appendChild(btn); var area=document.createElement("textarea"); document.body.appendChild(area); };</script>

Link to comment
Share on other sites

var option1 = document.createElement("option");option1.text = "1";option1.value = "1"; var option2 = document.createElement("option");option2.text = "2";option2.value = "2"; btn.appendChild(option1);btn.appendChild(option2); // and so on

It would be neater if you used a loop. It would be even neater if you clone the entire select element. Note that appendChild probably works in all/most browsers with option elements, but the recommended way is to use the add() method of the select element. That is a little tricky, since old versions of IE require special treatment. It might be useful to try appendChild in every browser you have access to.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Add values and text to array, and loop through them

var btn=document.createElement("select");btn.id="select00";document.body.appendChild(btn);var SelectOptions = [["",'--Select Option--'],[1,'option1'],[2,'option2'],[3,'option3'],[4,'option4'],[5,'option5'],[6,'option6'],];var currentSel = document.getElementById(btn.id);        for (i = 0; i < SelectOptions.length; ++i)            {            var optn = document.createElement("OPTION");                            optn.text = SelectOptions[i][1];                optn.value = SelectOptions[i][0];                currentSel.options.add(optn);            }

Link to comment
Share on other sites

Thanks for the reply dsonesuk Whenever i calls the function add(); its increment the existing dropdownlist with the existing options, but i want a new dropdown list with the options each time whenever i call the function. New dropdown list should be created in the new line ...

Edited by Ashish Sood
Link to comment
Share on other sites

OOPS you don't need the last comma in the array

	var SelectOptions = [	["",'--Select Severity--'],	[1,'stat 1'],	[2,'stat 2'],	[3,'stat 3'],	[4,'stat 4'],	[5,'stat 5'] // last item requires no comma afterwards	]; var option_status = [["",'--Select Status--'],	[1,'op1'],	[2,'op2'],	[3,'op3'],	[4,'op4'],	[5,'op5'] // last item requires no comma afterwards];

But you also forgot to add reference to individual items in the array using 'i' varable within the for loop, plus the number part [0], and the text part [1] within each array item

optn.text = SelectOptions ;optn.value = SelectOptions[0]; status_op.text = option_status ;status_op.value = option_status[0];

should be

optn.text = SelectOptions[i][1];optn.value = SelectOptions[i][0]; status_op.text = option_status[i][1];status_op= option_status[i][0];

Edited by dsonesuk
Link to comment
Share on other sites

After removing the last ',' is still adding the option element in the existing dropdown list dropdown list, please let me know where i am wrong

var btn=document.createElement("select");btn.id="select00";document.body.appendChild(btn);var SelectOptions = [["",'--Select Option--'],[1,'option1'],[2,'option2'],[3,'option3'],[4,'option4'],[5,'option5'],[6,'option6']];var currentSel = document.getElementById(btn.id);	    for (i = 0; i < SelectOptions.length; ++i)		    {		    var optn = document.createElement("OPTION");		   			    optn.text = SelectOptions[i][1];			    optn.value = SelectOptions[i][0];			    currentSel.options.add(optn);		    }

Link to comment
Share on other sites

function SelectCreation(){var optn, btn=document.createElement("select"), status=document.createElement("select");btn.id="select00";status.id="select01";document.body.appendChild(btn);document.body.appendChild(status);var SelectOptions = [['0','Select Option'],['1','option1'],['2','option2'],['3','option3'],['4','option4'],['5','option5'],['6','option6']];var option_status = [["",'--Select Status--'],    [11,'op1'],    [12,'op2'],    [13,'op3'],    [14,'op4'],    [15,'op5']];var currentSel = document.getElementById(btn.id);        for (i = 0; i < SelectOptions.length; i++)            {             optn = document.createElement("OPTION");                           optn.text = SelectOptions[i][1];                optn.value = SelectOptions[i][0];                currentSel.options.add(optn);            }currentSel = document.getElementById(status.id);        for (i = 0; i < option_status.length; i++)            {            optn = document.createElement("OPTION");                           optn.text = option_status[i][1];                optn.value = option_status[i][0];                currentSel.options.add(optn);            }          }window.onload=function(){SelectCreation();}

Link to comment
Share on other sites

Wirhout code, i can only give the answer that you must have done it wrong again! if you just let the onload run, that will create the two dropdowns, then create a button that is suppose to force another two dropdowns, because the 2 onload drop downs will have the same id, as button click dropdowns they will always recieve the options lists, and the other duplicate id dropdowns WONT.

Edited by dsonesuk
Link to comment
Share on other sites

<button onclick="SelectCreation();">Add</button>

<script>  function SelectCreation() { var optn, btn=document.createElement("select"), status=document.createElement("select"); btn.id="select00";status.id="select01"; document.body.appendChild(btn);document.body.appendChild(status);  var SelectOptions = [['0','Select Option'],['1','option1'],['2','option2'],['3','option3'],['4','option4'],['5','option5'],['6','option6']]; var option_status = [["",'--Select Status--'],	[11,'op1'],	[12,'op2'],	[13,'op3'],	[14,'op4'],	[15,'op5']];  var currentSel = document.getElementById(btn.id); 		for (i = 0; i < SelectOptions.length; i++)			{			 optn = document.createElement("OPTION");		  				optn.text = SelectOptions[i][1];				optn.value = SelectOptions[i][0];				currentSel.options.add(optn); 			} currentSel = document.getElementById(status.id); 		for (i = 0; i < option_status.length; i++)			{			optn = document.createElement("OPTION");		  				optn.text = option_status[i][1];				optn.value = option_status[i][0];				currentSel.options.add(optn); 			}	    }  window.onload=function(){ SelectCreation();}

One more thing that after clicking on the add button the existing dropdown list is incremented with the same option value

Edited by Ashish Sood
Link to comment
Share on other sites

they will as i said the both 1st duplicate of each id ref select will always recieve the options.add() call, the other wont even be toiuched. status.id="select01"; currentSel = document.getElementById(status.id); for (i = 0; i < option_status.length; i++) { optn = document.createElement("OPTION"); optn.text = option_status[1]; optn.value = option_status[0]; currentSel.options.add(optn); }

Link to comment
Share on other sites

The function i created is for creating two dropdown with set id ref in both, i told how t send a id ref name, so you can make them unique, but the problem come in how or what you wish to use for the values and and text names of options. then it become more complicated and not what this function was initially set up to produce i.e. to produce two dropdowns with set values( value and text) stored in array.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...