show/hide the <div> tag is not working

Question

I have a hyperlink which should call 3 JS functions one by one during the onclick event.

<form name = "bulkcontactfrm" method="POST" action="<%= servletPath %>>
    <div id="saveDiv" layoutAlign="top" style="display:block;"> 
        <table id=""  align="left"  border="0" cellpadding="0" cellspacing="0">
        <tr>
             <td>
            <a href="javascript:void(0);" onclick="isAllowedToResubscribe(document.bulkcontactfrm); manipulateDIV(document.bulkcontactfrm); resubscribeCall(document.bulkcontactfrm);">&#160;Re-Subscribe</zoniac:roundrect>&#160;</a>
            </td>
        </tr>                        
        </table>
    </div>
    <div id="loadingDiv" class="cellWhiteBGFont" layoutAlign="top" style="display: block;"><p><img src="<%=ImageMappingManager.getImageName("imgLoading")%>" name = "b1">&nbsp;&nbsp;<font size='3'><b>Please wait...<b></font></p>
    </div>
</form>

Here are the JS functions:

// First function validate the data using ajax call
function isAllowedToResubscribe(form) {
    //Client validation takes here 
    processAjaxRequestPost('ajaxRequestPost','SimpleHandler','getResubscribeEmailValidationDetails',emilIDStr,sourcefromStr);
}

// Second function hide the content in UI and show the Processing image in <DIV> tag
function manipulateDIV(form) {
    hideSaveDiv();
    showLoadingDiv();
}

function hideSaveDiv() {

    //hide the Re-Subscribe hyperlink 
    document.getElementById('saveDiv').style.display='none';
}
function showLoadingDiv() {
    //show the Processing image 
    document.getElementById('loadingDiv').style.display='block';
}

// Third function is for form submit using ajax call
function resubscribeCall(form) {
    //processAjaxRequestPost('ajaxRequestPost','SimpleHandler','getResubscribeEmailDetails',emilIDStr,sourcefromStr);
}

After click the hyperlink validation function calls and get succeed, conformation message appear click OK on the conformation. But the <DIV> tag has not been hide so Progress image not getting loaded.

Answer 1

The code here is a little messy, so it's really hard to tell where the issue is, and whether what you've pasted here is exactly what you're using. But one possibility is that it's not locating the divs correctly because you're missing a " mark in the form tag:

<form name = "bulkcontactfrm" method="POST" action="<%= servletPath %>>

should be:

<form name="bulkcontactfrm" method="POST" action="<%= servletPath %>">

A quick test seems to indicate that the missing " messes up the DOM sufficiently to keep document.getElementById() from working. Compare http://jsfiddle.net/nrabinowitz/n9S33/2/ and http://jsfiddle.net/nrabinowitz/n9S33/3/ to see this in action.