I've created a link, which when clicked on pops open and shows a "Contact Form". It opens, validates, submits & emails fine. I'm running into problems when I try to close the form.

HTML

<div id="blanket"><div id="myForm">
    <p style="text-align:right; margin: 0; padding: 0;"><a href="#" id="close" onClick="onClickClose();">Close</a></p>
    <table width="400" border="0" cellspacing="0" cellpadding="5"><tr><td>
    <form name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
    <input name="fieldnm_1" type="radio" value="M." /> M. 
    <input name="fieldnm_1" type="radio" value="Mme" /> Mme. 
</td></tr><tr><td width="400">
    <input name="fieldnm_2" type="text" id="left_form" placeholder="Pr&eacute;nom *" tabindex="1"/><input name="fieldnm_4" type="text" id="right_form" placeholder="Courriel *" tabindex="3"/>
</td></tr><tr><td width="400">
    <input name="fieldnm_3" type="text" id="left_form" placeholder="Nom *" tabindex="2"/>
    <input name="fieldnm_5" type="text" id="right_form" placeholder="T&eacute;l&eacute;phone *" tabindex="4"/>
</td></tr><tr><td width="400">
    <select name="fieldnm_7" id="left_list" >
    <option value="">Nombre de chambres *</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
    <select name="fieldnm_8" id="right_list">
    <option value="">Nombre de pieds carr&eacute;s</option>
    <option value="600-800">600-800</option>
    <option value="800-1000">800-1000</option>
    <option value="1000-1250">1000-1250</option>
    <option value="Plus de 1250">Plus de 1250</option>
    </select>
</td></tr><tr><td>
    <textarea name="fieldnm_9" id="comment" placeholder="Commentaire*" tabindex="5"></textarea>
</td></tr><tr><td>
    <input type="submit" name="Submit" value="Soumettre" tabindex="6">
<input type="reset" name="Submit2" value="Reset">
</td></tr></table></form></div>
</div>

JS

<script type="text/javascript">
onClickRegister = function(){
    b = $("#blanket");
    b.css("display","block");
    b.css("position","fixed");
    b.css("width", window.innerWidth);
    b.css("height", window.innerHeight);
    b.css("background-color", "rgba(0, 0, 0, 0.7)");
    f=$("#myForm");
    f.css("position", "fixed");
    f.css("top", "33%");
    f.css("left", "33%");
}
window.onResize(function(){
    if($("#blanket").length>0){
        b.css("width", window.innerWidth);
        b.css("height", window.innerHeight);
    }
});
onClickClose = function(){
    $("#blanket").css("display","none");
}
</script>

I've tried even just adding an alert to the onClickClose and nothing happens.

I've created a link, which when clicked on pops open and shows a "Contact Form". It opens, validates, submits & emails fine. I'm running into problems when I try to close the form.

HTML

<div id="blanket"><div id="myForm">
    <p style="text-align:right; margin: 0; padding: 0;"><a href="#" id="close" onClick="onClickClose();">Close</a></p>
    <table width="400" border="0" cellspacing="0" cellpadding="5"><tr><td>
    <form name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
    <input name="fieldnm_1" type="radio" value="M." /> M. 
    <input name="fieldnm_1" type="radio" value="Mme" /> Mme. 
</td></tr><tr><td width="400">
    <input name="fieldnm_2" type="text" id="left_form" placeholder="Pr&eacute;nom *" tabindex="1"/><input name="fieldnm_4" type="text" id="right_form" placeholder="Courriel *" tabindex="3"/>
</td></tr><tr><td width="400">
    <input name="fieldnm_3" type="text" id="left_form" placeholder="Nom *" tabindex="2"/>
    <input name="fieldnm_5" type="text" id="right_form" placeholder="T&eacute;l&eacute;phone *" tabindex="4"/>
</td></tr><tr><td width="400">
    <select name="fieldnm_7" id="left_list" >
    <option value="">Nombre de chambres *</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
    <select name="fieldnm_8" id="right_list">
    <option value="">Nombre de pieds carr&eacute;s</option>
    <option value="600-800">600-800</option>
    <option value="800-1000">800-1000</option>
    <option value="1000-1250">1000-1250</option>
    <option value="Plus de 1250">Plus de 1250</option>
    </select>
</td></tr><tr><td>
    <textarea name="fieldnm_9" id="comment" placeholder="Commentaire*" tabindex="5"></textarea>
</td></tr><tr><td>
    <input type="submit" name="Submit" value="Soumettre" tabindex="6">
<input type="reset" name="Submit2" value="Reset">
</td></tr></table></form></div>
</div>

JS

<script type="text/javascript">
onClickRegister = function(){
    b = $("#blanket");
    b.css("display","block");
    b.css("position","fixed");
    b.css("width", window.innerWidth);
    b.css("height", window.innerHeight);
    b.css("background-color", "rgba(0, 0, 0, 0.7)");
    f=$("#myForm");
    f.css("position", "fixed");
    f.css("top", "33%");
    f.css("left", "33%");
}
window.onResize(function(){
    if($("#blanket").length>0){
        b.css("width", window.innerWidth);
        b.css("height", window.innerHeight);
    }
});
onClickClose = function(){
    $("#blanket").css("display","none");
}
</script>

I've tried even just adding an alert to the onClickClose and nothing happens.

• javascript
• jquery
• forms
• hide

• use a browser console to find then fix the errors that are being thrown – charlietfl Commented Oct 13, 2012 at 0:44
• When I click on the close button the console says : onClickClose is not defined. So my guess is that it's not finding the function. – VVV Commented Oct 13, 2012 at 0:50

4 Answers 4

You can use:

function onClickClose(){
    $("#blanket").hide();
}

*if you don't want JQuery to save in its cache the value of the display property to be restored later (as documented here) you could use just:

function onClickClose(){
    $("#blanket").css("display","none");
}

$("#close").click(function() {
 $("#blanket").hide();
});

Actually, your problem isn't with onClickClose, it's the window.onResize() directly before that. It should be window.onresize, no camel-case, and it isn't a function but an event handler. What you should have there is

window.onresize = function () {
    if ($("#blanket").length > 0) {
        b.css("width", window.innerWidth);
        b.css("height", window.innerHeight);
    }
};

The way you had it was causing an error, and subsequently the onClickClose function wasn't getting parsed. Read all about it on MDN.

The reason PbxMan's answer works is because of hoisting. By changing it from a function expression to a function declaration, that function gets hoisted to the top of the scope, and so does get parsed before the error. So while it works, it's actually side-stepping the actual issue.

Angus Croll has a good post on function declarations vs. function expressions and hoisting.

$('#close').click(
function(abc){
    $("#blanket").css("display","none");
abc.preventDefault(); // this will cancel the default action for href
}