.click close form - HELP

**maurobros** · 25-03-2015, 13.56.47

Salve buongiorno a tutti.

Ho un problema con un semplice "add/remove Class" applicato ad un form.

http://codepen.io/anon/pen/OPdvvG

In pratica al click nel form aggiunge la classe "focus" ma cliccando sul tasto annulla non rimuove la classe "focus" appena applicata.

Qualcuno può aiutarmi. Grazie

25-03-2015, 16.28.39

Js non capisce bene quale feedback mandarti.

Tu gli dici questo:

- "Ogni volta che #comment-form viene cliccato allora metti la classe focus"
- "Ogni volta che #sf_comment-form-cancel viene cliccato allora togli la classe focus"

Il fatto è che #sf_comment-form-cancel sta dentro #comment-form quindi ogni volta che clicchi sf_comment-form-cancel in contemporanea clicchi anche comment-form e toglie/rimette la classe in una frazione di secondo.

Se vuoi mantenere questa struttura (cosa che sconsiglio con tutti quegli id) puoi fare una cosa del genere.

Codice HTML:

<html dir="ltr" lang="it-IT">
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<style>
#comments_container form textarea{position:relative;display:block;z-index:3;width:97%;height:36px;padding:0 16px;border:1px solid #cecece;}
#comments_container form input[type="button"],#comments_container form input[type="submit"]{position:relative;top:-50px;float:right;z-index:1;}

#comments_container form.focus textarea{height: 100px;}
#comments_container form.focus input[type="button"],#comments_container form.focus input[type="submit"]{top:0px}
</style>

<script>
$(document).ready(function() {
	
	
	$("#comment-form, #id_top-comment, #button").click(function () {
		$("#comment-form").addClass('focus');
	}).children().click(function(e) {
		return false;
	});
 
	$("#sf_comment-form-cancel").click(function () {
		$('#comment-form').removeClass('focus');
	});
	
});
</script>

<body>
	<div id="comments_container">
		<form id="comment-form" class="" method="post" action="">
			
			<!-- textarea -->
			<p>
				<textarea id="id_top-comment" rows="10" cols="40" name="top-body" placeholder="Lascia un messaggio..."></textarea>
			</p>
			<!-- buttons -->
			<div id="message_buttons">
				<input type="submit" id="sf_comment-form-submit" name="post" value="Invia">
				<input type="button" id="sf_comment-form-cancel" value="Annulla">
			</div>

		</form>
	</div>
</body>
</html>

Discussione: .click close form - HELP

LinkBack

Strumenti discussione

Display

.click close form - HELP

Regole di scrittura