PDA

View Full Version : [HTML] Pulsante che reindirizza su una pagina tramite text area

franksisca
10-03-2015, 09:21
Allora vi spiego cosa mi serve e magari mi aiutate:

io ho una pagina di ricerca nel mio sito del tipo HOME_PATH/AREA/TERMINE

dove homepath è la url del sito
Area è una keyword che uso io
Termine è un termine che deve inserire l'utente in una area di testo.

Sto provando ad implementarlo così, ma non ci riesco...chi mi può aiutare?
<!DOCTYPE html>
<html>
<body>


<form action=URL>
<input type="text" name="nome">
<button type=”submit”>

<img src="cerca.png" width="23" height="67" title="Cerca" border="1" vspace="5" alt=”Cerca ” align=”middle”>

</button>
</form>

</body>
</html>
M@Rk0
10-03-2015, 16:00
io lascerei stare il form.
terrei solo il tag input e userei il tag img per l'immagine del tasto e userei onClick e una funzione javascript che mi rimpiazza l'url con quello che c'è nel tag input

PS: gli attributi dell'immagine come le dimensioni eccetera mettili in un file css
Tuvok-LuR-
10-03-2015, 16:09
se hai un'immagine come submit puoi usare input type="image", https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/%3Cinput_type=_image_%3E

Puoi usare diverse strategie impiegando javascript ma quando si tratta di redirect io preferisco sempre utilizzare il server.
Fai il submit ad un url generale e da lì invia i risultati su un redirect 301
franksisca
10-03-2015, 16:19
io lascerei stare il form.
terrei solo il tag input e userei il tag img per l'immagine del tasto e userei onClick e una funzione javascript che mi rimpiazza l'url con quello che c'è nel tag input

PS: gli attributi dell'immagine come le dimensioni eccetera mettili in un file css
giusto...non ci avevo pensato!
se hai un'immagine come submit puoi usare input type="image", https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/%3Cinput_type=_image_%3E

Puoi usare diverse strategie impiegando javascript ma quando si tratta di redirect io preferisco sempre utilizzare il server.
Fai il submit ad un url generale e da lì invia i risultati su un redirect 301
in realtà sto facendo un widget che deve essere usato su portali esterni.
franksisca
10-03-2015, 23:25
Questo è il risultato che ho ottenuto:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function redirect(){
window.location="http://www.xxxxxxxxxxxxxxx.com/xxxxx/" + document.getElementById('search').value;
}
</script>
</head>

<body>
<input id="search" type="text" name="nome">
<a href="#" onClick='redirect()'>
<img src="cerca.png" title="Cerca" /> </a>
</body>
</html>

Sono consapevole che non è "bello" e probabilmente nemmeno ottimale.

Quello che mi preoccupa di più, dovendo lavorare questo pezzo di codice in altri siti (chiamiamolo widget), è quel document.getElementById('search').value che se ho altri "search" nella pagina mi scapoccia.

come risolvo (escludo di inventarmi un id ...CREaTINvO...)?
Tuvok-LuR-
11-03-2015, 08:30
giusto...non ci avevo pensato!

in realtà sto facendo un widget che deve essere usato su portali esterni.

e quindi? niente ti impedisce di inviare un form in POST al tuo sito anche se sei altrove...ripeto, non ti serve javascript
franksisca
11-03-2015, 09:47
e quindi? niente ti impedisce di inviare un form in POST al tuo sito anche se sei altrove...ripeto, non ti serve javascript

ok, il problema è che io non conosco nulla a livello di frontend...quindi non saprei come farlo.
<form method="POST" action="http://www.xxxx.com/yyyy/" target="_blank" accept-charset="UTF-8" enctype="text/plain" autocomplete="off" novalidate>
<input type="text" name="nome" />
<input type="image" src="cerca.png" />
</form>


come faccio a fargli accodare la stringa dell'input-text all'url della action?

Perdonami ma sto lavorando parallelamente su 4 aspetti diversi e sinceramente quello web è quello che mi preoccupa di meno e quindi quello che ci sto anche mettendo meno risorse, però per deformazione mentale una volta completato vorrei migliorare il risultato...e quindi apprezzo tantissimo il tuo suggerimento e vorrei metterlo in pratica.
tomminno
12-03-2015, 13:39
Ma perchè vuoi mettere il parametro proprio nella url?
Cosa c'è di male nel semplice post?
franksisca
12-03-2015, 14:10
Ma perchè vuoi mettere il parametro proprio nella url?
Cosa c'è di male nel semplice post?

perchè il servizio di ricerca è sulla url.
tomminno
13-03-2015, 08:26
perchè il servizio di ricerca è sulla url.

Scusa ma non ho capito cosa intendi dire. :confused:
franksisca
13-03-2015, 09:19
Scusa ma non ho capito cosa intendi dire. :confused:

la pagina sulla quale atterro è una pagina di ricerca, che trova la keyword di ricerca nella URL stessa.

Quindi devo appendere alla URL la keyword che metto nell'input text <3
tomminno
13-03-2015, 11:43
Dato che la soluzione javascript l'hai già trovata, se il problema è solo l'id "creativo" o usi un guid o alla java invertendo il nome dominio a cui stai puntando, o usando direttamente il nome dominio. Difficilmente incontrerai un id uguale.
franksisca
13-03-2015, 17:17
Dato che la soluzione javascript l'hai già trovata, se il problema è solo l'id "creativo" o usi un guid o alla java invertendo il nome dominio a cui stai puntando, o usando direttamente il nome dominio. Difficilmente incontrerai un id uguale.

10x