Question: Develop a Javascript application that allows the user to enter strings into a variable number of input widgets. As a string is entered by the
Develop a Javascript application that allows the user to enter strings into a variable number of input widgets. As a string is entered by the user its length is automatically displayed next to the input widget. Buttons are provided to control the interface and to provide some functionality.
Clicking one button will add another input widget
Clicking another button will remove an input widget, always leaving at least one input widget.
Clicking anther button will cause the visible strings to be sorted
Everthing works besides the Remove button... I want to remove one text box at a time.
As well I want it to keep stored value even if the text box is deleted..
Below is the code:
HTML :
ADD TEXT Field
Dynamic Form!
=========================
Js File
var i = 0; /* Set Global Variable i */ var count =0; function increment(){ i += 1; }
function removeElement(parentDiv, childDiv){ if (childDiv == parentDiv){ alert("The parent div cannot be removed."); } else if (document.getElementById(childDiv)){ var child = document.getElementById(childDiv); var parent = document.getElementById(parentDiv); parent.removeChild(child); } else{ alert("Child div has already been removed or does not exist."); return false; } }
function nameFunction(){ var r = document.createElement('span'); var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("placeholder", "Name"); var g = document.createElement("Text"); g.setAttribute("src"); increment(); y.setAttribute("Name", "textelement_" + i); r.appendChild(y); g.setAttribute("onclick", "removeElement ('myForm' , 'id_ "+ i + "')"); r.appendChild(g); r.setAttribute("id", "id_" + i); document.getElementById("myForm").appendChild(r); count=count+1; }
function resetElements(){ document.getElementById('myForm').innerHTML = ''; i=0; }
function fnsort() { var x; x=count; var strings=[] var t; var i=0; t=x; while(t!=0) { strings.push(document.forms["mainform"].elements[i].value); t=t-1; i=i+1 }
strings=strings.sort() var j=0; var msg=''; while(x!=0) { var msg=msg+strings[j]+' '; document.forms["mainform"].elements[j].value=strings[j]; j=j+1; x=x-1; }
}
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help