Hi,

I have a form that I'm using as a top level menu for a web-enabled application. The form allows the user to select from a number of different computer systems by clicking a styled html anchor tag with an onclick event. The onclick calls javascript to set the value of a hidden (via css) submit input and then submit the form using the input's .click() method. This has worked for me in the past, and in this case, works just fine in Firefox, but not in IE 6.

Here is what I have verified:
1) When I click one of the anchor tags, the loadResource function fires.
2) When the .click() method is called, the click event on the submit input fires.
3) When the .click() method of the submit input fires, the PHP on the server does NOT get called.
4) If I unhide the submit input and click it manually, everything works.

At this point, I'm completely stumped. I hope someone can help.

Here's the form:

 <form name="systems" id="systems" action="outage.php" method="post">
  <a id="Jade"
    onclick="loadResource(event);"
    href="javascript:{}">Jade</a>
  <a id="Sapphire"
    onclick="loadResource(event);"
    href="javascript:{}">Sapphire</a>
  <input id="system"
    name="system"
    value=""
    class="sysBtn"
    type="submit" />
  <input type="hidden" 
    value="false" 
    name="write"/>
</form>

Here is the loadResource javascript function:

function loadResource(e) {
  e = (typeof(event) == 'undefined') ? e : event;
  var elem = $(e.target || e.srcElement);
  var system = document.getElementById('system');
  system.value = elem.id;
  system.click();
}

On the server side, this is being handled by PHP. As a sanity check, I inserted the following code to show me what is actually being passed into the _POST array...

printf("<div>");
foreach($_POST as $key => $value){
  printf("%s = %s<br />\n",$key, $value);
}
printf("</div>");

This code never gets called when the page is loaded in IE. It doesn't even generate the <div> tags.

Instead of relying on "system"'s click method, why not rely on the form's submit method itself? That's usually a lot more stable.

I have tried the following:

var system = document.getElementById('system');
var systemForm = document.getElementById('systems');
system.value = elem.id;
systems.submit();

The result was that it broke in Firefox and made no difference in IE.

What's the IE error that you get? That should work.

No error at all. Nothing. nada. It just does nothing.

I added an onsubmit event to the form tag...

onsubmit="alert('hi');"

just to see if the form submit event is firing. It dutifully alerted "hi", but from all appearances, did not negotiate with the server at all.

Try adding "return true;" to the onsubmit handler just to see if it actually submits anything. That's about all I can think of without seeing the page.

I tried that too. I added onsubmit="return true;" to the form tag. No change.

As far as I can tell, IE is not negotiating with the server at all.

I found a workaround.

I'm not sure what makes the difference here, but at least this works....

Instead of this:

<a id="Jade"
    onclick="loadResource(event);"
    href="javascript:{}">Jade</a>

I did this:

<a id="Jade"
 href="javascript:$('system').value='Jade';$('system').click()">Jade</a>

... and everything is happy. (ugly, but happy)