If any form element is changed - update ddl value...Help????

[fiorano]

Hi,

If any form element is changed/updated is it possible to change the value of one ddl?

What I would like to do is if the user changes any value on the form then change a dropdownlist (ddl_status) to a value of "Being Worked On"

Im working in Asp 2.0

Thanks



Fiorano

[Old Pedant]

The ASP 2.0 (and I assume you *really* mean ASP.NET 2.0) is irrelevant.

This would be completely a client-side javascript solution.

It's not hard, just tedious. You have to put an onchange="this.form.ddl_status.selectedIndex=0;" into each form field.

For form field types that don't support onchange (e.g., a set of radio buttons) you'd put the same JS code into their onclick handlers. I can't think of any form field types offhand that you couldn't manage with one or the other of those.

<form ...>
<input type=text name=xxx onchange="this.form.ddl_status.selectedIndex=0;"/>
<input type=radio name=yyy onclick="this.form.ddl_status.selectedIndex=0;"/>
<textarea name=zzz onchange="this.form.ddl_status.selectedIndex=0;"></textarea>
...
<select name="ddl_status">
<option>Being Worked On</option>
<option>Finished</option>
</select>
</form>

Naturally, if "Being Worked On" is not the first <option> in the <select> then change the 0 for selectedIndex as appropriate.

And naturally you could make a function that would do the same thing and invoke the function from each place. Might make it look neater, but wouldn't change the work or the effect.

[Philip M]

There is a slight problem in that although changing a form element will change the dll selected index, the user can immediately alter it back again. Perhaps the following is what is wanted, although in truth I am finding it hard to see the purpose. But of course the dll could be re-enabled by something if required.

<select id = "fruits">
<option value = "1"> Apple<br>
<option value = "2"> Pear<br>
<option value = "3"> Being Worked On<br>
</select>
<br><br>
<input type = "button" value = "change" onclick = "changeSel()">

<script type = "text/javascript">
function changeSel() {
document.getElementById("fruits").selectedIndex = 2;
document.getElementById("fruits").disabled = true;
}

</script>

As you say, the button should be replaced in evey form field instance by a call to the function.

[Old Pedant]

I was assuming that the purpose of the DDL was that the user is *REQUIRED* to change it from "Being Worked On" to "Form Completed" as confirmation that he/she really did check that all the needed changes had been applied.

If the user is presented with an already filled out (or partially filled out) <form>, then this kind of makes sense. He/she can't hit the SUBMIT button until confirming that he/she had checked everything twice.

Seems to me, though, that there would be better things to use than a <SELECT> for this purpose. For example, maybe just a checkbox that says "I certify that I have double checked all the stuff in this form and it's all correct and you can fire me immediately if I screwed up." And every time there is a change, the code unchecks the box. Oh...and the submit button is of course disabled until the box is checked.

[fiorano]

Originally Posted by Philip M

There is a slight problem in that although changing a form element will change the dll selected index, the user can immediately alter it back again. Perhaps the following is what is wanted, although in truth I am finding it hard to see the purpose. But of course the dll could be re-enabled by something if required.

<select id = "fruits">
<option value = "1"> Apple<br>
<option value = "2"> Pear<br>
<option value = "3"> Being Worked On<br>
</select>
<br><br>
<input type = "button" value = "change" onclick = "changeSel()">

<script type = "text/javascript">
function changeSel() {
document.getElementById("fruits").selectedIndex = 2;
document.getElementById("fruits").disabled = true;
}

</script>

As you say, the button should be replaced in evey form field instance by a call to the function.

Hi, Ive gone for this option - many thanks for your help.

Just one question - Ive tried using W as the selected value eg;

<select id = "list_status">
<option value = "P">Pending<br>
<option value = "W">Worked On<br>
<option value = "C">Closed<br>
</select>
<br><br>
<input type = "button" value = "change" onclick = "changeSel()">

<script type = "text/javascript">
function changeSel() {
document.getElementById("list_status").selectedIndex = "W";
document.getElementById("list_status").disabled = true;
}

</script>

But it doesnt seem to like using Letters instead of numbers - any idea why?

Fiorano

[Philip M]

Originally Posted by fiorano

But it doesnt seem to like using Letters instead of numbers - any idea why?

Because selectedIndex is by definition a numeric value.

Change it to:-

document.getElementById("list_status").value = "W";

[fiorano]

Originally Posted by Philip M

Because selectedIndex is by definition a numeric value.

Change it to:-

document.getElementById("list_status").value = "W";

Excellent - many many thanks for your help on this!!!!!!!!!!!!!!!!!!!!!

Best Regards,
Fiorano

[adios]

http://www.codingforums.com/showthread.php?p=819380

[fiorano]

Hi again,

ive had a little problem with this. I need to reference the list in the vb code file behind the aspx page. To due this I have to set the run="server" attribute :

<SELECT id="list_status" name="list_status" runat="server">

however now the function isnt changing the select list to the required value - if I take out the runat server attribute - it works.

Please help.........!

Fiorano

[adios]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function form_is_dirty(oForm)
{
   var el, opt, hasDefault, i = 1, j;
   while (el = oForm.elements[i++]) 
   {
      switch (el.type)
      {
         case 'text' :
         case 'textarea' :
         case 'hidden' :
            if (!/^\s*$/.test(el.value) && el.value != el.defaultValue)
            {
               return true;
            }
            break;
         case 'checkbox' :
         case 'radio' :
            if (el.checked != el.defaultChecked)
            {
               return true;
            }
            break;
         case 'select-one' :
         case 'select-multiple' :
            j = 0, hasDefault = false;
            while (opt = el.options[j++])
            {
               if (opt.defaultSelected)
               {
                  hasDefault = true;
               }
            }
            j = hasDefault ? 0 : 1;
            while (opt = el.options[j++])
            {
               if (opt.selected != opt.defaultSelected)
               {
                  return true;
               }
            }
            break;
         default :
            break;
      }
   }
   return false;
}

function trackChgs()
{
   var f = document.getElementById('f1');
   f.list_status.value = (form_is_dirty(f)) ?
     'Being Worked On' : 'done';
}

window.onload = function()
{
   var f = document.getElementById('f1');
   f.onclick =  trackChgs;
   f.onkeyup =  trackChgs;
   f.onmouseup =  trackChgs;
}

</script>
</head>
<body>
<form id="f1">
<input type="text" name="list_status" value="done" runat="server" readonly="readonly" style="font:bold 12px monospace;border:none;">
<br />
<br />
<input type="text" /><br /><br />
<textarea rows="3" cols="8">feh!</textarea><br /><br />
<input type="hidden" value="foo" />
<input type="checkbox" checked="checked" />
<input type="checkbox" /><br /><br />
<input type="radio" name="r1" checked="checked" />
<input type="radio" name="r1" /><br /><br />
<select>
<option value="1">blah 1</option>
<option value="2">blah 2</option>
<option value="3">blah 3</option>
</select><br /><br />
<select multiple="multiple">
<option value="4">blah 1</option>
<option value="5" selected="selected">blah 2</option>
<option value="6" selected="selected">blah 3</option>
</select>
<br /><br /><br />
<input type="reset" value="RESET" onclick="return confirm('Reset all fields?')" />
<input type="submit" value="SUBMIT" />
</form>
</body>
</html>

Not entirely sure what you need here, but adding event handlers to every form input is pointless. That's why there are default value properties.