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 :) :)
 
Discussioni simili
Autore Titolo Forum Risposte Data
D script per far funzionare l'animazione Javascript 4
D script per far funzionare l'animazione Presentati al Forum 1
S urgentissimo necessità di script per evitare di far visualizzare immagini "rubate" Javascript 12
E Script per far caricare pagine diverse Javascript 5
A Script per far hostare forum.. e file.. PHP 0
G Comando per far partire l'esecuzione di script se c'è settato un coocky. Javascript 2
P Passare solo alcuni parametri a script per CSV PHP 0
felino Script PHP per leggere un file JSON. autenticazione? PHP 4
romeocharly [PHP] Script per rinominare in automatico le immagini inviate da ftp PHP 0
A [PHP] Script con array con numeri che iniziano per 00 PHP 2
TpD [PHP] Script per organizzazione presenza eventi PHP 3
webmachine [PHP] Script per censurare parole PHP 4
otto9due GDPR 25 Maggio - script per attivare analytics, facebook ecc.. dopo il consenso. jQuery 14
M [PHP] Script per controllo disponibilitá negozio in citta PHP 4
G Inserzione script nella pagina html per jquery jQuery 8
K Script PHP per leggere array.txt Presentati al Forum 3
N [Javascript] script demo preloader per video Javascript 0
Mauro Guardiani [PHP] script per caricamento video PHP 0
P [Javascript] Aiuto per recupero variabili da script Javascript 10
romeocharly Creare un script/codice in php per collegare un id mysql con un file PHP 0
xone [Vendo] Script php+mysql autocostruito per gestione giacenze magazzino Offerte e Richieste di Lavoro e/o Collaborazione 0
F Script php per IP camera PHP 12
M Script per convertire video youtube in mp3 PHP 1
M Comportamento strano di questo script per caricamento file sql in database PHP 7
D Creare script per calcolo ore PHP 11
L Script per aggiornare pagina html Javascript 2
Y script per upload file PHP 9
G Script per sincronizzare EBay PHP 0
Tommi Script per menù Javascript 16
G Cerco script per importare file .xml e .csv. Lavoro retribuito Offerte e Richieste di Lavoro e/o Collaborazione 2
F Spiegazione script java per randomizzare Javascript 0
IImanuII Licenza per script in PHP PHP 2
S Consigli per script javascript per creare videogiochi Javascript 2
G Script per chat sito adulti PHP 1
S aiuto per script PHP/OOP PHP 2
A Script per download non legge stensione file PHP 1
Z Script per aprire video youtube sia apre a schermo intero e poi ridimensionare in automatico Javascript 1
P Supporto per creare uno script "Add Cart" Offerte e Richieste di Lavoro e/o Collaborazione 7
D Script per email pubblicitarie PHP 2
filippino Script PHP per estrarre dati estrazioni da sito "10 e lotto" PHP 0
M Script Google Maps per ricavare coordinate di un indirizzo PHP 0
andry79fi PLUGIN (o script) per Pagina Facebook con INTERVENTI degli utenti WordPress 0
M Dove sbaglio con questo script per inserimento record? PHP 1
M [risolto] Script ajax per form e mappe Ajax 6
A Sito per presentazione di plugin e script Presenta il tuo Sito 0
H Script per visualizzare ip mi dà errori! PHP 0
A [RISOLTO] Script per il login PHP 8
P script per avviare webcam Javascript 0
C VENDO-SCRIPT ADDMEFAST per incremento FANS su FACEBOOK Annunci servizi di Social Media Marketing 0
D script per querystring Javascript 2

Discussioni simili