Question

I’m pulling my hair out over this. I have this bit of javascript that asynchronously fetches data for an events calendar. Basically when you click on a day of the month a little UI pops up and a text area gets populated with the data that gets retrieved. On this UI are two submit buttons: one to save changes, and one to delete the event if it exists. My goal is to have the delete button disabled unless the text area gets populated with an event. Here is my code:

function editDialog(date,vis)
{
    if(vis == "show")
    {
        var event="Loading...";

        if (window.XMLHttpRequest)
        { 
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function()
        {

            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                event = xmlhttp.responseText;
            }
            document.getElementById('editwrapper').innerHTML="<div id='editdiv'>\
            <div><span class='bold'>"+date+" </span><div style='display: inline; float: right;'><a href='#' onclick=\"return editDialog('"+date+"','hide')\">Close</a></div><hr id='line'> \
            <form method='get' action='' onsubmit=\"return editDialog(this.newdate.value, 'show')\">\
            <label for='newdate'>Jump to: </label>\
            <input type='text' name='newdate' size='10'/>\
            <input type='submit' name='go' value='Go'>\
            </form>\
            <form style='display: inline;' action='' name='saveform' method='get' onsubmit='return instantUpdate(this.date.value,this.event.value)'>\
            <textarea name='event' rows='10' cols='40' onkeypress='saveform.edit.disabled=false'>"+event+"</textarea>\
            <input type='hidden' name='date' value='"+date+"'>\
            <input type='submit' name='edit' value='Save' disabled='disabled'></form> &nbsp; <form name='deleteform' style='display: inline; float: right;' action='' method='get' onsubmit=\"return instantUpdate(saveform.date.value,'')\"> <input name='deletebutton' value='Delete' type='submit'></form>\
            </div>\
            </div>";

            if(event=="" || event=="Loading...") document.deleteform.delete.disabled = true;
        }
        xmlhttp.open("GET","events.php?action=read&date="+date,true);
        xmlhttp.send(); } }

The problem lies with this statement:

if(event=="" || event=="Loading...") document.deleteform.deletebutton.disabled = true;

Firefox handles it just fine but Safari, Chrome, Opera, and IE all throw hissy fits. They revert back to my fallback functionality for users that don’t have javascript enabled. What am I doing wrong?

Answer 1

I just had a thought. Since delete is a keyword you really shouldn’t be using it as a form field name. Some implementations may be more strict than others with regard to using reserved words. Try renaming it to something else.