Script per far scomparire l'input dopo aver premuto invio?

ppigna

Utente Attivo
23 Dic 2013
63
0
0
Buonasera a tutti :)
Qualcuno può crearmi (o trovare su internet, io ho cercato vanamente) uno script Javascript che fa in modo che un <input type="text"> scompaia (e appaia tipo una scritta) dopo aver premuto il tasto invio della tastiera? La cosa particolare che chiedo, però, è che il tasto invio non deve anche inviare i dati dell'input (che saranno inviati dopo da un button) ma solo far scomparire il campo. E' possibile? Poi il button legge lo stesso il contenuto del campo?
Posto qui il codice della pagina, sperando di farvi capire meglio il contesto (non guardate le parti commentate):
HTML:
<body>
		<div id="ac_background" class="ac_background">
			<img class="ac_bgimage" src="images/galassia1.jpg" alt="Background"/>
			<div class="ac_overlay"></div>
			<div class="ac_loading"></div>
		</div>
		<div id="ac_content" class="ac_content">
			<h1>Oracolo del Web<span><br />Completa i campi e poi premi invio</span></h1>
			<form action="frase.php" method="post">
			<div class="ac_menu"> 
				<ul>
					<li>
						<a href="images/galassia2.jpg">Giorno</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Giorno</h2>
							<ul>
								<li>Che giorno è oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="giorno" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$giorno = htmlspecialchars($_POST['giorno']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia3.jpg">Mese</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Mese</h2>
							<ul>
								<li>In che mese siamo oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="mese" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$mese = htmlspecialchars($_POST['mese']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia4.jpg">Nome</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Nome</h2>
							<ul>
								<li>Da quante lettere è formato il tuo (primo) nome? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="nome" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$nome = htmlspecialchars($_POST['nome']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia5.jpg">Invio</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Invio</h2>
							<ul>
								<li><p>Premi Invia per visualizzare il responso dell'oracolo.</p></li>
								<li><br /></li>
							</ul>
							<input type="submit" name="Invia"  value="  Invia  " size="10" onclick="location.href='frase.php'">
						</div>
					</li>
				</ul>
			</div>
			</form>
		</div>
		<div class="ac_footer">
			<span>Copyright (c) 2013 oracolodelweb.altervista.org | All rights reserved | Template by: <a href="http://www.tympanus.net">tympanus.net</a></span>
			<span style="float:right; padding-right:5px">Created by Giulio Pignatti and Luca Nisidi</span>
		</div>
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    </body>
Grazie mille, ciao :)
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
Il modo più semplice che mi viene in mente è usare jquery che hai già incluso nella pagina e mettere su visible:hidden gli input.
Grazie a questa proprietà css spariscono visivamente ma vengono ancora tenuti in considerazione dal browser come se fossero normalmente visibili.

Prova così:
HTML:
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
        }
    });

});
</script>
"Dato memorizzato!" è il testo che dovrebbe comparire una volta premuto invio.
Il posizionamento assoluto l'ho incluso perché hidden (come ho scritto in precedenza) non cancella l'elemento ma lo nasconde soltanto, l'elemento continua ad occupare lo spazio che occupava prima e quindi, se non facessi così, il testo comparirebbe una riga più in basso.

Forse ci sono soluzioni migliori però, al momento prova a vedere se così funziona ;-)
 

ppigna

Utente Attivo
23 Dic 2013
63
0
0
Il modo più semplice che mi viene in mente è usare jquery che hai già incluso nella pagina e mettere su visible:hidden gli input.
Grazie a questa proprietà css spariscono visivamente ma vengono ancora tenuti in considerazione dal browser come se fossero normalmente visibili.

Prova così:
HTML:
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
        }
    });

});
</script>
"Dato memorizzato!" è il testo che dovrebbe comparire una volta premuto invio.
Il posizionamento assoluto l'ho incluso perché hidden (come ho scritto in precedenza) non cancella l'elemento ma lo nasconde soltanto, l'elemento continua ad occupare lo spazio che occupava prima e quindi, se non facessi così, il testo comparirebbe una riga più in basso.

Forse ci sono soluzioni migliori però, al momento prova a vedere se così funziona ;-)
Grazie mille, sei molto gentile :)
Ma non è che di default il tasto invio (quando sei su un input) è collegato al bottone corrispondente? Si può evitare?
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
Hai perfettamente ragione, per evitare il lancio automatico del form dovrebbe bastare fare così:
HTML:
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>
Tienimi aggiornato ;)
 

ppigna

Utente Attivo
23 Dic 2013
63
0
0
Hai perfettamente ragione, per evitare il lancio automatico del form dovrebbe bastare fare così:
HTML:
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>
Tienimi aggiornato ;)
Ok grazie mille :) ma come si fa ad associare questo codice ai tre form? Dove devo mettere questo codice insomma?
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
Puoi posizionarlo subito sotto le librerie che includi:
HTML:
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>

Il selettore che ti ho scritto:
Codice:
$('input[type="text"]')
Fa si che lo script agisca automaticamente su tutti gli input di tipo text che hai in quella pagina.
Se vuoi una frase diversa per ogni input si deve modificare script in questa maniera:
HTML:
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>input giorno!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>input mese!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>input nome!</p>');
                    break;
            }
            return false;
        }
    });

});
 

ppigna

Utente Attivo
23 Dic 2013
63
0
0
Puoi posizionarlo subito sotto le librerie che includi:
HTML:
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            $(this).parent().append('<p>Dato memorizzato!</p>');
            return false;
        }
    });

});
</script>

Il selettore che ti ho scritto:
Codice:
$('input[type="text"]')
Fa si che lo script agisca automaticamente su tutti gli input di tipo text che hai in quella pagina.
Se vuoi una frase diversa per ogni input si deve modificare script in questa maniera:
HTML:
(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>input giorno!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>input mese!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>input nome!</p>');
                    break;
            }
            return false;
        }
    });

});
Grazie mille, veramente, credo tu sia la persona più gentile che io abbia mai trovato su un forum ahahah
Però purtroppo premendo invio sul form mi fa ancora come se premessi sul pulsante. Ti riposto il codice, magari ho sbagliato qualcosa io...
HTML:
<body>
		<div id="ac_background" class="ac_background">
			<img class="ac_bgimage" src="images/galassia1.jpg" alt="Background"/>
			<div class="ac_overlay"></div>
			<div class="ac_loading"></div>
		</div>
		<div id="ac_content" class="ac_content">
			<h1>Oracolo del Web<span><br />Completa i campi e poi premi invio</span></h1>
			<form action="frase.php" method="post">
			<div class="ac_menu"> 
				<ul>
					<li>
						<a href="images/galassia2.jpg">Giorno</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Giorno</h2>
							<ul>
								<li>Che giorno è oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="giorno" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$giorno = htmlspecialchars($_POST['giorno']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia3.jpg">Mese</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Mese</h2>
							<ul>
								<li>In che mese siamo oggi? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="mese" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$mese = htmlspecialchars($_POST['mese']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia4.jpg">Nome</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Nome</h2>
							<ul>
								<li>Da quante lettere è formato il tuo (primo) nome? Inserisci il numero qui sotto.</li>
								<li><br /></li>
							</ul>
							<input type="text" name="nome" size="15"><!-- <input type="button" name="Invia" value="  Invia  " size="10"> -->
							<?php //$nome = htmlspecialchars($_POST['nome']); ?>
						</div>
					</li>
					<li>
						<a href="images/galassia5.jpg">Invio</a>
						<div class="ac_subitem">
							<span class="ac_close"></span>
							<h2>Invio</h2>
							<ul>
								<li><p>Premi Invia per visualizzare il responso dell'oracolo.</p></li>
								<li><br /></li>
							</ul>
							<input type="submit" name="Invia"  value="  Invia  " size="10" onclick="location.href='frase.php'">
						</div>
					</li>
				</ul>
			</div>
			</form>
		</div>
		<div class="ac_footer">
			<span>Copyright (c) 2013 oracolodelweb.altervista.org | All rights reserved | Template by: <a href="http://www.tympanus.net">tympanus.net</a></span>
			<span style="float:right; padding-right:5px">Created by Giulio Pignatti and Luca Nisidi</span>
		</div>
		<!-- JavaScript -->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript">
		(function($) {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visible':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>Giorno inserito!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>Mese inserito!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>Nome inserito!</p>');
                    break;
            }
            return false;
        }
    });

});
		</script>
    </body>
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
No, è che non mi sono accorto che usi una versione vecchia di jquery.
Prova così:

HTML:
$(document).ready(function() {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visibility':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>Giorno inserito!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>Mese inserito!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>Nome inserito!</p>');
                    break;
            }
            return false;
        }
    });

});
 

ppigna

Utente Attivo
23 Dic 2013
63
0
0
No, è che non mi sono accorto che usi una versione vecchia di jquery.
Prova così:

HTML:
$(document).ready(function() {

    $('input[type="text"]').keypress(function(e) {
        if(e.which == 13) {
            $(this).css({'visibility':'hidden', 'position':'absolute'});
            
            switch ($(this).attr('name')) {
                case 'giorno':
                    $(this).parent().append('<p>Giorno inserito!</p>');
                    break;
                case 'mese':
                    $(this).parent().append('<p>Mese inserito!</p>');
                    break;
                case 'nome':
                    $(this).parent().append('<p>Nome inserito!</p>');
                    break;
            }
            return false;
        }
    });

});
Funziona!!! Grazie veramente tanto :) :)