Editing a select list

Need help in editing a select list

[zephed]

I have a problem that I am working on. I am trying to edit a list with the OnChange handler. What I am trying to do is highlight an option from a select list, hit an edit button and change the field in a new text box. I want it to show the changes while I am typing the changes in the field. Can anyone help me?

[DrDoc]

I can help you ..
I'll post the reply on here soon ..

[DrDoc]

Ok, here's the answer you need :)

In the first file (where you have the select list), put the following code:

<script language="JavaScript" type="text/javascript">
function ShowEdit() {
if(document.all) {
document.MyForm.Edit.style.visibility="visible";
}
else {
document.MyForm.Edit.visibility="visible";
}
}
function EditList() {
TheValue = document.MyForm.TheList.options[document.MyForm.TheList.selectedIndex].value;
TheText = document.MyForm.TheList.options[document.MyForm.TheList.selectedIndex].text;
TheIndex = document.MyForm.TheList.selectedIndex;
window.open("edit.html?" + TheValue + "&" + TheText + "&" + TheIndex,
"EditWin",
"dependent=yes, directories=no, height=100, hotkeys=no, location=no, menubar=no, personalbar=no, resizable=no, scrollbars=no, status=no, titlebar=no, toolbar=no, width=450");
}
</script>

<form name="MyForm">
Select from the list: <select name="TheList" onchange="ShowEdit()">
<option value=""></option>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
<option value="Test4">Test4</option>
</select>
<input type="Button" id="Edit" name="Edit" value="Edit" style="visibility:hidden;" onclick="EditList();">
</form>

In the pop-up document (edit.html), put the following code:

<form name="MyForm">
<input type="Text" name="NewValue" onkeyup="UpdateList()">
<input type="Button" id="Reset" name="Reset" value="Reset" onclick="ResetValues();">
<input type="Button" value="Close window" onclick="self.close()">
</form>

<script language="JavaScript" type="text/javascript">
if(document.all) {
window.opener.document.MyForm.Edit.style.visibility="hidden";
}
else {
window.opener.document.MyForm.Edit.visibility="hidden";
}
QueryString = location.search.substring(1);
values = QueryString.split(/&/);
TheValue = values[0];
TheText = values[1];
TheIndex = values[2];
document.MyForm.NewValue.value = TheText;
function UpdateList() {
ChangedValue = document.MyForm.NewValue.value;
window.opener.document.MyForm.TheList.options[TheIndex].value = ChangedValue;
window.opener.document.MyForm.TheList.options[TheIndex].text = ChangedValue;
}
function ResetValues() {
window.opener.document.MyForm.TheList.options[TheIndex].value = TheValue;
window.opener.document.MyForm.TheList.options[TheIndex].text = TheText;
document.MyForm.NewValue.value = TheText;
}
</script>

[zephed]

Thank you very much.

But can you make it so it does not pop up in a new window? I need it to be on the same page. I apprecaite your help.

[DrDoc]

<script language="JavaScript" type="text/javascript">
function ShowEdit() {
if(document.all) {
document.MyForm.Edit.style.visibility = "visible";
}
else {
document.MyForm.Edit.visibility = "visible";
}
}
function EditList() {
if(document.all) {
document.MyForm.Edit.style.visibility = "hidden";
document.MyForm.NewValue.style.visibility = "visible";
document.MyForm.Done.style.visibility = "visible";
document.MyForm.Reset.style.visibility = "visible";
}
else {
document.MyForm.Edit.visibility = "hidden";
document.MyForm.NewValue.visibility = "visible";
document.MyForm.Done.visibility = "visible";
document.MyForm.Reset.visibility = "visible";
}
document.MyForm.TheList.disabled = true;
TheIndex = document.MyForm.TheList.selectedIndex;
TheValue = document.MyForm.TheList.options[TheIndex].value;
TheText = document.MyForm.TheList.options[TheIndex].text;
document.MyForm.NewValue.value = TheValue;
}
function UpdateList() {
ChangedValue = document.MyForm.NewValue.value;
document.MyForm.TheList.options[TheIndex].value = ChangedValue;
document.MyForm.TheList.options[TheIndex].text = ChangedValue;
}
function DoneEditing() {
UpdateList();
if(document.all) {
document.MyForm.NewValue.style.visibility = "hidden";
document.MyForm.Done.style.visibility = "hidden";
document.MyForm.Reset.style.visibility = "hidden";
}
else {
document.MyForm.NewValue.visibility = "hidden";
document.MyForm.Done.visibility = "hidden";
document.MyForm.Reset.visibility = "hidden";
}
TheIndex = null;
TheValue = null;
TheText = null;
document.MyForm.NewValue.value = "";
document.MyForm.TheList.disabled = false;
}
function ResetValues() {
document.MyForm.TheList.options[TheIndex].value = TheValue;
document.MyForm.TheList.options[TheIndex].text = TheText;
document.MyForm.NewValue.value = TheText;
}
</script>

<form name="MyForm">
Select from the list:<br>
<select name="TheList" onchange="ShowEdit()">
<option value=""></option>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
<option value="Test4">Test4</option>
</select>
<input type="Button" id="Edit" name="Edit" value="Edit" style="visibility:hidden;" onclick="EditList();"><br>
<input type="Text" name="NewValue" style="visibility:hidden;" onkeyup="UpdateList()">
<input type="Button" id="Done" name="Done" value="Done" style="visibility:hidden;" onclick="DoneEditing()">
<input type="Button" id="Reset" name="Reset" value="Reset" style="visibility:hidden;" onclick="ResetValues();">
</form>

[zephed]

Thank you once again for your help.

Is it possible to modify this so all the text fields and edit buttons are displayed at once and not just when you select on option from the dropdown menu?

Thanks again.

[DrDoc]

Well, the reason why I made it so that the fields are hidden and made visible is just so you will always know which option you're editing. That way you can't edit anything by mistake.

But, here's another version:

<script language="JavaScript" type="text/javascript">
function EditList() {
TheIndex = document.MyForm.TheList.selectedIndex;
TheValue = document.MyForm.TheList.options[TheIndex].value;
TheText = document.MyForm.TheList.options[TheIndex].text;
document.MyForm.NewValue.value = TheValue;
}
function UpdateList() {
ChangedValue = document.MyForm.NewValue.value;
document.MyForm.TheList.options[TheIndex].value = ChangedValue;
document.MyForm.TheList.options[TheIndex].text = ChangedValue;
}
function ResetValues() {
document.MyForm.TheList.options[TheIndex].value = TheValue;
document.MyForm.TheList.options[TheIndex].text = TheText;
document.MyForm.NewValue.value = TheText;
}
</script>

<form name="MyForm">
Select from the list:<br>
<select name="TheList" onchange="EditList()">
<option value=""></option>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
<option value="Test4">Test4</option>
</select><br>
<input type="Text" name="NewValue" onkeyup="UpdateList()">
<input type="Button" id="Reset" name="Reset" value="Reset" onclick="ResetValues();">
</form>

[zephed]

That is perfect. But could you add in one more thing for me...

Can you add the edit button in there so that when you click it it will send the highlighted field to the input area to be changed.

Thanks

[DrDoc]

You don't need the edit button.

The selected field is automatically displayed in the edit field .. :)

[zephed]

But I wanted to give the option of editing it or deleting it. So I would like to add it by way of an Edit button if you can help me out. Thanks.

[DrDoc]

So, wait, what do you mean?

You want to be able to add and delete options in the list, is that what you mean?

[zephed]

let me rephrase that. I want to be able to highlight an option from the menu, then either click an edit or delete button. If I click on delete, it will remove it from the menu and if I click on edit, it will let me correct the option (like your script does now)

Thanks.