CODEWITHSUNDEEP
javascriptjqueryformshide
Black Bird
Black Bird

Reputation: 797

jQuery Hide & Show Form

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.

Upvotes: 4

Views: 32069

Answers (4)

PbxMan
PbxMan

Reputation: 7625

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");
}

Upvotes: 13

ultranaut
ultranaut

Reputation: 2140

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.

Upvotes: 1

Catalin Sterian
Catalin Sterian

Reputation: 96

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

Upvotes: 0

Todd Horst
Todd Horst

Reputation: 863

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

Upvotes: 3

Related Questions