4

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.

Black Bird
  • 797
  • 1
  • 10
  • 34
  • use a browser console to find then fix the errors that are being thrown – charlietfl Oct 13 '12 at 00: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 Oct 13 '12 at 00:50

4 Answers4

13

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");
}
PbxMan
  • 7,525
  • 1
  • 36
  • 40
  • 3
    surely `.hide()` would be better – mk_89 Oct 13 '12 at 00:51
  • 1
    as the first comment suggest you should do $("#blanket").hide(); and since you are using jquery you should use the other answer's way to write the click handler and remove the onclick from the html – Huangism Oct 13 '12 at 00:54
  • i prefer functions written this way. maybe you needed a var? var myfunc = function () {} – Todd Horst Oct 13 '12 at 01:09
3
$("#close").click(function() {
 $("#blanket").hide();
});
Todd Horst
  • 853
  • 10
  • 22
1

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.

ultranaut
  • 2,132
  • 1
  • 17
  • 22
  • Exactly, there's no difference between `myFunction = function() { }` and `function myFunction() { }` in this case, they should both work. But due to the error in `onResize` setting the function as a variable was ignored, while the other way of writing it is less brittle I guess. – Jan Oct 13 '12 at 01:44
  • http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname Should make no difference in this case. – Jan Oct 13 '12 at 01:45
  • In this case it actually does make a difference due to hoisting, see the addition to my answer. – ultranaut Oct 13 '12 at 01:54
  • What I meant was "it should make no difference with your code, if you fix the errors which break your code". Fix the error with onresize and both ways of declaring the function will work fine. – Jan Oct 13 '12 at 02:06
  • Yeah, I understood ;) It was just a somewhat interesting, real-life case of not-immediately-evident consequences of the difference between the two. – ultranaut Oct 13 '12 at 02:13
0
$('#close').click(
function(abc){
    $("#blanket").css("display","none");
abc.preventDefault(); // this will cancel the default action for href
}
Catalin Sterian
  • 96
  • 1
  • 10