Ashish Sood Posted February 6, 2013 Share Posted February 6, 2013 (edited) 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 February 6, 2013 by Ashish Sood Link to comment Share on other sites More sharing options...
jeffman Posted February 6, 2013 Share Posted February 6, 2013 You need to post the code you're using now so we can show you what to change. Link to comment Share on other sites More sharing options...
Ashish Sood Posted February 6, 2013 Author Share Posted February 6, 2013 (edited) 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 February 6, 2013 by Ashish Sood Link to comment Share on other sites More sharing options...
jeffman Posted February 6, 2013 Share Posted February 6, 2013 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 More sharing options...
Ashish Sood Posted February 6, 2013 Author Share Posted February 6, 2013 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 More sharing options...
justsomeguy Posted February 6, 2013 Share Posted February 6, 2013 Create option elements and append them to the select element. Link to comment Share on other sites More sharing options...
Ashish Sood Posted February 6, 2013 Author Share Posted February 6, 2013 var option=document.createElement("option"); option.text="1"; option.text="2"; option.text="3"; option.text="4"; option.text="5"; btn.appendChild(option); After that i m only getting "5" in my dropdown list, dont know what i did wrong , Please guide . Link to comment Share on other sites More sharing options...
justsomeguy Posted February 6, 2013 Share Posted February 6, 2013 You created one option, changed the text of it a bunch of times, and appended it. You need to create more than one option and set the text and value of each one, and append each one. Link to comment Share on other sites More sharing options...
Ashish Sood Posted February 6, 2013 Author Share Posted February 6, 2013 But i want all the value of option in my dropdown list, Sir , Could you please understand me via example, so it will easy for me to understand . Thanks for a quick response Link to comment Share on other sites More sharing options...
jeffman Posted February 6, 2013 Share Posted February 6, 2013 (edited) 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 February 6, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2013 Share Posted February 7, 2013 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 More sharing options...
Ashish Sood Posted February 7, 2013 Author Share Posted February 7, 2013 (edited) 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 February 7, 2013 by Ashish Sood Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2013 Share Posted February 8, 2013 (edited) 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 February 8, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Ashish Sood Posted February 8, 2013 Author Share Posted February 8, 2013 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 More sharing options...
jeffman Posted February 8, 2013 Share Posted February 8, 2013 btn.id="select00";//////var currentSel = document.getElementById(btn.id); If you use the same id every time you create the element, the options will always be appended to the same element. Link to comment Share on other sites More sharing options...
Ashish Sood Posted February 8, 2013 Author Share Posted February 8, 2013 So what modification i need to edit into it, because my project require is where every user click on the button new have to create with textbox , dropdownlist. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2013 Share Posted February 8, 2013 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 More sharing options...
Ashish Sood Posted February 8, 2013 Author Share Posted February 8, 2013 Thanks For a quick response. Upon loading the page SelectCreation function call and two dropdown list created. but when i click on the button and calls the SelectCreation function two dropdown list created with no options value into it(blank dropdown list).? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2013 Share Posted February 8, 2013 (edited) 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 February 8, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Ashish Sood Posted February 8, 2013 Author Share Posted February 8, 2013 (edited) <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 February 8, 2013 by Ashish Sood Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2013 Share Posted February 8, 2013 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 More sharing options...
dsonesuk Posted February 8, 2013 Share Posted February 8, 2013 you are going to have to send an argument ( id ref name) when you call the function SelectCreation('another-select') then you would use that to assign a new id ref Link to comment Share on other sites More sharing options...
Ashish Sood Posted February 8, 2013 Author Share Posted February 8, 2013 (edited) Any idea how could i change the value of ID each time user call the selectcreation function.Hope you got my point. Edited February 8, 2013 by Ashish Sood Link to comment Share on other sites More sharing options...
dsonesuk Posted February 8, 2013 Share Posted February 8, 2013 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 More sharing options...
Ashish Sood Posted February 9, 2013 Author Share Posted February 9, 2013 I tried but failed to give a unique id value, do u have any idea about ? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now