[PHP] Come far funzionare un form di selezione

[webMood]

Ciao a tutti, chiedo supporto in quanto ho creato un form di selezione (http://www.vip-fan.it/homepage-new/selezione-prodotto-serie-se/?) che però non è funzionante. So di dover inserire l'action.php, ma non conoscende php, non saprei cosa inserire. Vi spiego la funzionalità che deve avere: selezionando "motore 1, motore 2..." e cliccando cerca, deve aprirsi il file pdf di riferimento in una nuova finestra del browser.
Qualcuno può aiutarmi?
Grazie in anticipo!

 

[bubino8]

Ciao
la selezione deve essere una <select>, 2<button> o come vuoi impostarli?
Basterebbe fare un normale <a>

<a target="_blank" href="url-1">Motore 1</a>
<a target="_blank" href="url-2">Motore 2</a>

In alternativa fai una cosa del genere.

<select id="tipo_motore">
  <option value="url_pdf1">Motore 1</option>
  <option value="url_pdf2">Motore 2</option>
</select>
<script>
    $(function(){
      $('#tipo_motore').on('change', function () {
          var url = $(this).val();
          if(url) {
              window.open(url);
          }
          return false;
      });
    });
    </script>

 

[webMood]

se dovessi inserire come nel tuo suggerimento, mi resterebbe un'elenco di motore1, motore2...etc..cliccabili, ma in realtà ho ma necessita di fare un select con pulsante cerca, ma non so come collegare i singoli pdf alle voci motore 1, motore 2 etc...
attualmente la struttura è questa:
<form action="/action_page.php">
<table cellpadding="0" cellspacing="0" style="border:0;">
<tr>
<td style="border:0;">
<select id="motori">
<option value="Motore 1">
<option value="Motore 2">
<option value="Motore 3">
<option value="Motore 4">
<option value="Motore 5">
</select>
</td>
<td style="border:0;">
<input type="submit" value="cerca">
</td>
</tr>
</table>
</form>


la tabella mi serve solo per renderla poi graficamente più presentabile.

 

[bubino8]

Scusa ho aggiornato tardi il post .
Comunque una cosa del genere

<select id="tipo_motore"> <option value="url_pdf1">Motore 1</option> <option value="url_pdf2">Motore 2</option> </select> <script> $(function(){ $('#tipo_motore').on('change', function () { var url = $(this).val(); if(url) { window.open(url); } return false; }); }); </script>

 

[webMood]

Ho provato ad inserirlo ma non funziona, sicuramente sbaglio qualche cosa io..così mi rimane le due scritte sopra cliccabili e il menu a tendina che non clicca da nessuna parte

 

[webMood]

rettifico, con lo script sembra meglio, ma se inserisco l'url del mio pdf in "value" comunque non funziona. Mi apre una pagina di errore 404.

 

[webMood]

scusa se scrivo a "pizzichi e bocconi", ma sto testando ora il form. Ho scoperto che quello che faceva apparire la pagina era un action che avevo lasciato per errore le tag <form>. Ora che l'ho eliminato non apre nulla. Fai conto che sto lavorando su Wordpress. Ho il timore che l'aver inserito lo script assieme al codice html nel widget non sia la cosa giusta.

 

[bubino8]

Ciao
ti condivido la mia soluzione ma molte volte mi complico anche io la vita anche per piccolezze, quindi resta a te valutare se utilizzarla o trovare un altro sistema.

Form:

<form name="select_motore">
    <select name="motore" onchange="selezioneMotore(this)">
        <option value="" selected disabled> Seleziona Motore </option>
        <option value="http://url1.com"> Motore 1 </option>
        <option value="http://url2.it"> Motore 2 </option>
    </select>
    <input type="hidden" name="set_value" id="set_value">
    <input type="hidden" name="set_text">
</form>
<button onclick="sendMotore()">Ricerca</button>

nel file function.php del tema vai ad aggiungere le 2 funzioni.
PRIMA DI FARE MODIFICHE E' SEMPRE BENE FARE UN BACKUP DEL FILE

function selezioneMotore(valori){
    var f = document.select_motore;
    f.set_value.value = valori.options[valori.selectedIndex].value;
    f.set_text.value = valori.options[valori.selectedIndex].text;
}
function sendMotore(){
    var element_selected = document.getElementById('set_value').value;
    if(element_selected != ''){
        window.open(element_selected);
    }else{
        alert('Devi prima selezionare un motore!');
    }   
}

Fammi sapere

 

[macus_adi]

Se utilizzi Wordpress, potresti utilizzare select2 (plugin js) ed effettui quando cambia il valore una chiamata in ajax e recuperi i dati da visualizzare!
https://select2.org/

 

[bubino8]

Ciao @macus_adi
io sono dell'idea che meno plugin si installano meglio è, anche se pur leggeri. In ajax sarebbe anche una soluzione ma andrei comunque a farmi solo la funzione specifica comunque senza dover installare plugin.

 

[macus_adi]

Scusa, ma select2 serve ad avere metodi già pronti, poi naturalmente viene bindata una chiamata in ajax con qualsiasi framework...
Si può fare anche senza, ma senza framewok sotto bisogna scrivere un pò di più, e gestire bene .on("change")...
Per la cronaca invece di usare Jquery, si potrebbe utilizzare Vue, più leggero!

 

[webMood]

Ed io invece non ci sto capendo più nulla, perdonatemi ma le mie conoscenze oltre html sono proprio limitate. Seguendo ciò che mi aveva consigliato Bubino8 sembrerebbe che l'unica cosa che manca sia il file php action che faccia funzionare la selezione e mi permetta di aprire i pdf. Mi sapete dire che codice devo inserire?

 

[macus_adi]

Riprendendo ciò che ha scritto @bubino8 , già dovrebbe essere funzionante, se invece non vuoi il pulsante potresti scrivere la logica al cambiamento del valore della select.

WP- Utilizza jQuery, quindi senza inventarci la ruota:

<select name="motore" id="motore">
<option >Seleziona Motore</option>
<option value="http://url1.com" data-url='url'> Motore 1 </option>
<option value="http://url2.it" data-url='url'> Motore 2 </option>
</select>

Utilizzando senza form uscirebbe una cosa del genere:

$(document).ready(function(){
    var select=$('#motore');
   select.on('change',function(e){
        var current=$( "#motore option:selected" ).data('url');
        window.open(current);
       e.stopImmediatePropagation();
    });
});