sshelton5150
Programmer
I'm creating a form dynamically from a javascript array. Essentially the form presents items to the user which they can reorder as they choose by typing into the input box. It's a similar idea to what NetFlix has on their Movie Queue page, where you can reorder movies in your list.
I am trying to capture what they input into the field, but it's not passing the value correctly to the javascript function that does the reordering. If I hard code a value rather than saying "this" when I call the changeProcedures function it works. The minute I try and pass "this" for newPosition, it doesn't work. Is something wrong with my syntax? I'm no guru as you can see so I'm trying to figure out how to get the correct value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Prioritize Procedures</title>
</head>
<body>
<!--- Containers Divs --->
<div id="formStart">
<form action="moveArrayElements.html" method="Post" name="Prioritize">
</div>
<div id="formMiddle">
</div>
<div id="formEnd"><br><br>
<input type="Submit" value="Submit">
</form>
</div>
<!--- Scripts --->
<script type="text/javascript">
// Initialize default array
var Procedures = new Array(5);
Procedures[0] = " Procedure 1";
Procedures[1] = " Procedure 2";
Procedures[2] = " Procedure 3";
Procedures[3] = " Procedure 4";
Procedures[4] = " Procedure 5";
Procedures[5] = " Procedure 6";
var myDiv=document.getElementById("formMiddle");
var myText = "";
myText = "begin<br>";
// Create form field for each array item
for (i=0;i<Procedures.length;i++) {
myText += "<input onChange=changeProcedures(this,"+i+"); type='text' name='"+i+"' value='"+i+"'>"+Procedures+"<br >";
}
myText += "end";
myDiv.innerHTML = myText;
//Reorder array by first inputing item into its new position, then deleting from old position
function changeProcedures(newPosition,oldPosition){
Procedures.splice(newPosition,0,Procedures[oldPosition]);
oldPosition=oldPosition + 1;
Procedures.splice(oldPosition,1);
var myDiv=document.getElementById("formMiddle");
var myText = "";
myText = "begin<br>";
for (i=0;i<Procedures.length;i++) {
myText += "<input onChange=changeProcedures(this,"+i+"); type='text' name='"+i+"' value='"+i+"'>"+Procedures+"<br >";
}
myText += "end";
myDiv.innerHTML = myText;
}
</script>
</body>
</html>
I am trying to capture what they input into the field, but it's not passing the value correctly to the javascript function that does the reordering. If I hard code a value rather than saying "this" when I call the changeProcedures function it works. The minute I try and pass "this" for newPosition, it doesn't work. Is something wrong with my syntax? I'm no guru as you can see so I'm trying to figure out how to get the correct value.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Prioritize Procedures</title>
</head>
<body>
<!--- Containers Divs --->
<div id="formStart">
<form action="moveArrayElements.html" method="Post" name="Prioritize">
</div>
<div id="formMiddle">
</div>
<div id="formEnd"><br><br>
<input type="Submit" value="Submit">
</form>
</div>
<!--- Scripts --->
<script type="text/javascript">
// Initialize default array
var Procedures = new Array(5);
Procedures[0] = " Procedure 1";
Procedures[1] = " Procedure 2";
Procedures[2] = " Procedure 3";
Procedures[3] = " Procedure 4";
Procedures[4] = " Procedure 5";
Procedures[5] = " Procedure 6";
var myDiv=document.getElementById("formMiddle");
var myText = "";
myText = "begin<br>";
// Create form field for each array item
for (i=0;i<Procedures.length;i++) {
myText += "<input onChange=changeProcedures(this,"+i+"); type='text' name='"+i+"' value='"+i+"'>"+Procedures+"<br >";
}
myText += "end";
myDiv.innerHTML = myText;
//Reorder array by first inputing item into its new position, then deleting from old position
function changeProcedures(newPosition,oldPosition){
Procedures.splice(newPosition,0,Procedures[oldPosition]);
oldPosition=oldPosition + 1;
Procedures.splice(oldPosition,1);
var myDiv=document.getElementById("formMiddle");
var myText = "";
myText = "begin<br>";
for (i=0;i<Procedures.length;i++) {
myText += "<input onChange=changeProcedures(this,"+i+"); type='text' name='"+i+"' value='"+i+"'>"+Procedures+"<br >";
}
myText += "end";
myDiv.innerHTML = myText;
}
</script>
</body>
</html>
