Problema form javascript che non funziona

caniegatti · 10 Nov 2013

Ciao ragazzi,

premetto che come Javascript sono piuttosto alle prime armi e partendo da una base di un form che a suo tempo mi aveva realizzato un amico sto cercando di modificarlo per aggiungere una nuova funziona. Ma non funziona correttamente e non capisco dove sbaglio.

Codice:

<form autocomplete="off">

<fieldset>

<legend>Prenota il servizio:</legend>

<table>

<tr>

<td>

<label for="nome">Nome*</label>

</td>

<td>

<input type="text" id="nomexyz" name="nome" autofocus required size="50"/>

</td>

</tr>

<tr>

<td>

<label for="cognome">Cognome*</label>

</td>

<td>

<input type="text" id="cognomexyz" name="cognome" autofocus required size="50" />

</td>

</tr>

<tr>

<td>

<label for="mail">E-Mail*</label>

</td>

<td>

<input type="email" id="emailxyz" name="mail" autofocus required size="50"/>

</td>

</tr>

<tr>

<td>

<label for="telefono">Telefono*</label>

</td>

<td>

<input type="text" id="telefonoxyz" name="telefono" autofocus required size="50"/>

</td>

</tr>

<tr>

<td>

<label for="citta">Paese / Stato</label>

</td>

<td>

<input type="text" id="paesexyz" name="citta" autofocus size="50"/>

</td>

<tr>

<td>

<label for="data">Data Prenotazione*</label>

</td>

<td>

<input type="date" name="date" id="datepicker1" value="" class="date" size="50" required/>

</td>

</tr>

<tr>

<td>

<label for="ora">Ora Prenotazione*</label>

</td>

<td>

<select id="oraxyz" name="ora">

<option value="0">00</option>

<option value="1">01</option>

<option value="2">02</option>

<option value="3">03</option>

<option value="4">04</option>

<option value="5">05</option>

<option value="6">06</option>

<option value="7">07</option>

<option value="8">08</option>

<option value="9">09</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

</select>

<select id="minutixyz" name="minuti">

<option value="0">00</option>

<option value="5">05</option>

<option value="10">10</option>

<option value="15">15</option>

<option value="20">20</option>

<option value="25">25</option>

<option value="30">30</option>

<option value="35">35</option>

<option value="40">40</option>

<option value="45">45</option>

<option value="50">50</option>

<option value="55">55</option>

</select>

</td>

</tr>

<tr><td>

<label for="partenza">Tour</label></td><td>

<select name="partenza" id="partenzaxyz">

<option value="romaora" selected>Tour4</option>

<option value="civitavecchia">Tour3</option>

<option value="roma">Tour2</option>

<option value="romaora">Tour1</option>

</select></td>

</tr>

<tr><td><label for="passeggeri">Passeggeri</label></td>

<td><select name="numero" id="numeroxyz">

<option value="1" selected>1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select></td></tr>

<tr><td><label for="tipoviaggio">Nome Albergo</label></td>

<td><input type="text" class="validate[required] text-input" name="tipoviaggio" id="tipoviaggio" value="" /></td></tr ><tr><td><label for="totalexyz">Totale</label></td>

<td><span style="color:black;font-size:14px" id="totalexyz">65</span><span id="euro" style="color:black;font-size:14px"> &euro;</span></td></tr>

<tr><td><input type="submit" value="Invia" class="inviare"></td></tr>

</table>

</fieldset>

</form>



<script>

	jQuery(function(){jQuery('#partenzaxyz').change(function(){var check=jQuery('#partenzaxyz').val();if(check=="romaora")jQuery("label[for='tipoviaggio']").text("Nome Albergo");else if(check=="fiumicino")jQuery("label[for='tipoviaggio']").text("Nome Albergo");else if(check=="roma")jQuery("label[for='tipoviaggio']").text("Nome Albergo");else if(check=="civitavecchia")jQuery("label[for='tipoviaggio']").text("Nome Nave");var tipo=jQuery('#partenzaxyz').val();var numero=jQuery('#numeroxyz').val();console.log(tipo);console.log(numero);if(tipo=='civitavecchia'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("1050")}else if(numero==4){jQuery('#totalexyz').text("1400")}else if(numero==5){jQuery('#totalexyz').text("1750")}}else if(tipo=='roma'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("1050")}else if(numero==4){jQuery('#totalexyz').text("1400")}else if(numero==5){jQuery('#totalexyz').text("1750")}}else if(tipo=='navetta'){if(numero==1){jQuery('#totalexyz').text("10")}else if(numero==2){jQuery('#totalexyz').text("20")}else if(numero==3){jQuery('#totalexyz').text("30")}else if(numero==4){jQuery('#totalexyz').text("40")}else if(numero==5){jQuery('#totalexyz').text("50")}}});jQuery('#numeroxyz').change(function(){var tipo=jQuery('#tiposervizioxyz').val();var numero=jQuery('#numeroxyz').val();console.log(tipo);console.log(numero);if(tipo=='civitavecchia'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("1050")}else if(numero==4){jQuery('#totalexyz').text("1400")}else if(numero==5){jQuery('#totalexyz').text("1750")}}else if(tipo=='roma'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("1050")}else if(numero==4){jQuery('#totalexyz').text("1400")}else if(numero==5){jQuery('#totalexyz').text("1750")}}else if(tipo=='navetta'){if(numero==1){jQuery('#totalexyz').text("10")}else if(numero==2){jQuery('#totalexyz').text("20")}else if(numero==3){jQuery('#totalexyz').text("30")}else if(numero==4){jQuery('#totalexyz').text("40")}else if(numero==5){jQuery('#totalexyz').text("50")}}});jQuery('#partenzaxyz').change(function(){var tipo=jQuery('#partenzaxyz').val();var numero=jQuery('#numeroxyz').val();console.log(tipo);console.log(numero);if(tipo=='civitavecchia'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("195")}else if(numero==4){jQuery('#totalexyz').text("260")}else if(numero==5){jQuery('#totalexyz').text("325")}}else if(tipo=='roma'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("60")}else if(numero==4){jQuery('#totalexyz').text("80")}else if(numero==5){jQuery('#totalexyz').text("100")}}else if(tipo=='navetta'){if(numero==1){jQuery('#totalexyz').text("10")}else if(numero==2){jQuery('#totalexyz').text("20")}else if(numero==3){jQuery('#totalexyz').text("30")}else if(numero==4){jQuery('#totalexyz').text("40")}else if(numero==5){jQuery('#totalexyz').text("50")}}});jQuery('#tiposervizioxyz').change(function(){var tipo=jQuery('#partenzaxyz').val();var numero=jQuery('#numeroxyz').val();console.log(tipo);console.log(numero);if(tipo=='civitavecchia'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("195")}else if(numero==4){jQuery('#totalexyz').text("260")}else if(numero==5){jQuery('#totalexyz').text("325")}}else if(tipo=='roma'){if(numero==1){jQuery('#totalexyz').text("350")}else if(numero==2){jQuery('#totalexyz').text("700")}else if(numero==3){jQuery('#totalexyz').text("60")}else if(numero==4){jQuery('#totalexyz').text("80")}else if(numero==5){jQuery('#totalexyz').text("100")}}else if(tipo=='navetta'){if(numero==1){jQuery('#totalexyz').text("10")}else if(numero==2){jQuery('#totalexyz').text("20")}else if(numero==3){jQuery('#totalexyz').text("30")}else if(numero==4){jQuery('#totalexyz').text("40")}else if(numero==5){jQuery('#totalexyz').text("50")}}});jQuery(".inviare").click(function(){var nome=jQuery('#nomexyz').val();var cognome=jQuery('#cognomexyz').val();var email=jQuery('#emailxyz').val();var telefono=jQuery('#telefonoxyz').val();var paese=jQuery('#paesexyz').val();var data=jQuery('#datepicker1').val();var partenza=jQuery('#partenzaxyz').val();var servizio=jQuery('#tiposervizioxyz').val();var passeggeri=jQuery('#numeroxyz').val();var tiposervizioval=jQuery('#tipoviaggio').val();var ora=jQuery('#oraxyz').val()+':'+jQuery('#minutixyz').val();var tiposervizio=jQuery("label[for='tipoviaggio']").text();var totale=jQuery('#totalexyz').text();jQuery.ajax({type:"POST",url:"http://www.consorziotrasportopersone.it/wp-content/index.php",data:{nome:nome,cognome:cognome,email:email,telefono:telefono,paese:paese,data:data,partenza:partenza,arrivo:arrivo,servizio:servizio,passeggeri:passeggeri,tiposervizioval:tiposervizioval,ora:ora,tiposervizio:tiposervizio,totale:totale},success:function(data){console.log(data);if(data=='ok'){alert('mail invia correttamente')}else{alert("Error: Controlla di aver compilato tutti i campi");return false}}});return false})});

</script>

Il problema è essenzialmente nella funzione di generazione del prezzo. Se io seleziono il Tour 1 e sono in 5 mi deve comparire il totale del costo (non ci deve essere nessun pagamento collegato ma solo l'invio di un amail). Sinceramente non capisco dove possa essere l'errore (per inesperienza ed essere ancora alle prime armi).

Grazie a chi vorrà darmi un mano.

criric · 10 Nov 2013

Ciao, lo script è molto confuso, inoltre cosi come lo hai postato ( su una sola riga ) è difficile anche da leggere. tanto che non ho capito che valore hanno i tour
in ogni caso per fare una semplice moltiplicazione non c'è bisogno di tutto quel codice
prova questo esempio

HTML:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<table>
    <tr>
        <td>
            <label for="partenza">Tour</label>
        </td>
        <td>
            <select name="partenza" id="partenzaxyz">
                <option value="romaora" selected>Tour4</option>
                <option value="civitavecchia">Tour3</option>
                <option value="roma">Tour2</option>
                <option value="romaora">Tour1</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <label for="passeggeri">Passeggeri</label>
        </td>
        <td>
            <select name="numero" id="numeroxyz">
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <label for="totalexyz">Totale</label>
        </td>
        <td>
            <span style="color:black;font-size:14px" id="totalexyz">65</span>
            <span id="euro" style="color:black;font-size:14px"> &euro;</span>
        </td>
    </tr>
</table>
<script>
    
    var tour = new Array();
    tour["romaora"] = 350;
    tour["civitavecchia"] = 250;
    tour["roma"] = 150;
    
    $('#partenzaxyz').change(function(){   
        $("#totalexyz").text(tour[$(this).val()] * parseInt($("#numeroxyz").val()));
    });
    $('#numeroxyz').change(function(){   
        $("#totalexyz").text(tour[$('#partenzaxyz').val()] * parseInt($(this).val()));
    });
</script>

caniegatti · 14 Nov 2013

Ciao e grazie della risposta,

perdonami ma come scritto sono proprio alle prime armi con il javascript e quel tipo di funzione non l'ho mai utilizzata. Ma come faccio a fargli variare il prezzo in funzione del numero di persone?

Grazie e buona giornata

criric · 16 Nov 2013

L'esempio che ti ho postato è funzionante l'ahi provato? in pratica moltiplica il valore delle due select al cambio di una di esse e lo scrive nel totale

caniegatti · 17 Nov 2013

criric ha scritto:
L'esempio che ti ho postato è funzionante l'ahi provato? in pratica moltiplica il valore delle due select al cambio di una di esse e lo scrive nel totale

Si funziona e adesso ho capito il suo meccanismo. Davvero molto interessante e più pulito di tutto quel codice che avevo utilizzato io.

Ora ho "assemblato" tutto con il mio codice ma...non mi funzionano un paio di cose, il datapicker, la funzione per mostrare il nome albergo o nome nave e cosa importante..l'invio e il controllo sui campi obbligatori. Sono una frana ma, dove sbaglio? Ho riguardato tutto.

PHP:

<?php



/*



Template Name: Prenota Tour



*/







global $tpl;



gk_load('header');


$a2 = 'mail inviata!';



$r3 = 'errore riprovare';



gk_load('before');



if($_REQUEST['mail']){



$madmn = 'prova@prova.it';



$ogg = 'Prenotazione ctp';



$a3 = 'Questa mail &egrave; la conferma della corretta prenotazione del servizio di trasporto privato con CTP. Vi preghiamo di  conservare ed esibire questa mail per usufruire del servizio. Il pagamento dovr&agrave; essere effettuato al conducente';


$f2 = $_REQUEST['mail'];



$f = $_REQUEST['tiposervizio'];



$g3 = $_REQUEST['tipo'];



$k1 = 'Prenotazione ricevuta:<br>Nome:'.$_REQUEST['nome'].' '.$_REQUEST['cognome'].'<br>Email: '.$_REQUEST['mail'].'<br>Telefono: '.$_REQUEST['telefono'].'<br>Citta\': '.$_REQUEST['citta'].'<br>Data Prenotazione: '.$_REQUEST['date'].' '.$_REQUEST['ora'].':'.$_REQUEST['minuti'].'<br>Tipo servizio: '.$f.'<br>Tipo: '.$g3.' <br> <br><br>'.$a3.'';



$x0  = 'MIME-Version: 1.0' . "\r\n";



$x0 .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";


$x0 .= 'To: <'.$f2.'>' . "\r\n";



$x0 .= 'From: <'.$madmn.'>' . "\r\n";



$x0 .= 'Bcc: '.$madmn.'' . "\r\n";



$x12 = mail($f2, $ogg, $k1, $x0);



if($x12)



echo $a2 ;



else



echo $r3;



}



?>







<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css" />


 <script>


  $(function() {



    $( "#datepicker1" ).datepicker();



  });



  </script>



<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>



<p align="justify">Puoi prenotare il servizio di trasporto privato utilizzando il form di prenotazione che vedi qui di seguito. CTP | Consorzio Trasporto Persone non chiede il pagamento anticipato ai suoi clienti. </p>

<p align="justify">Potrete pagare il servizio acquistato direttametne al conducente, al momento del trasporto, o direttamente al box terminal 3 presso l'aereopoto di Fiumicino. </p>


<form autocomplete="off">

<fieldset>

<legend>Prenota il servizio:</legend>

<table>

<tr>

<td>

<label for="nome">Nome*</label>

</td>

<td>

<input type="text" id="nomexyz" name="nome" autofocus required size="50"/>

</td>

</tr>

<tr>

<td>

<label for="cognome">Cognome*</label>

</td>

<td>

<input type="text" id="cognomexyz" name="cognome" autofocus required size="50" />

</td>

</tr>

<tr>

<td>

<label for="mail">E-Mail*</label>

</td>

<td>

<input type="email" id="emailxyz" name="mail" autofocus required size="50"/>

</td>

</tr>

<tr>

<td>

<label for="telefono">Telefono*</label>

</td>

<td>

<input type="text" id="telefonoxyz" name="telefono" autofocus required size="50"/>

</td>

</tr>

<tr>

<td>

<label for="citta">Paese / Stato</label>

</td>

<td>

<input type="text" id="paesexyz" name="citta" autofocus size="50"/>

</td>

<tr>

<td>

<label for="data">Data Prenotazione*</label>

</td>

<td>

<input type="date" name="date" id="datepicker1" value="" class="date" size="50" required/>

</td>

</tr>

<tr>

<td>

<label for="ora">Ora Prenotazione*</label>

</td>

<td>

<select id="oraxyz" name="ora">

<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>

</select>

<select id="minutixyz" name="minuti">
<option value="0">00</option>
<option value="5">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>

</select>

</td>

</tr>

<tr>
<td>
<label for="partenza">Tour</label>
</td>
<td>
<select name="partenza" id="partenzaxyz">
<option value="romaora" selected>Tour di Roma</option>
<option value="civitavecchia">Tour di Roma da Civitavecchia</option>
<option value="roma">Angeli e Demoni a Roma</option>
<option value="romaora">Fontana di Trevi e Storia</option>
</select></td>

</tr>

<tr>
<td>
<label for="passeggeri">Passeggeri</label>
</td>
<td>
<select name="numero" id="numeroxyz">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td></tr>

<tr>
<td>
<label for="tipoviaggio">Nome Albergo</label>
</td>

<tr>
        <td>
            <label for="totalexyz">Totale</label>
        </td>
        <td>
            <span style="color:black;font-size:14px" id="totalexyz">65</span>
            <span id="euro" style="color:black;font-size:14px"> &euro;</span>
        </td>
    </tr>
    <tr><td><input type="submit" value="Invia" class="inviare"></td></tr>
</table>

</fieldset>

</form>

<script>
    
    var tour = new Array();
    tour["romaora"] = 350;
    tour["civitavecchia"] = 250;
    tour["roma"] = 150;
    
    $('#partenzaxyz').change(function(){   
        $("#totalexyz").text(tour[$(this).val()] * parseInt($("#numeroxyz").val()));
    });
    $('#numeroxyz').change(function(){   
        $("#totalexyz").text(tour[$('#partenzaxyz').val()] * parseInt($(this).val()));
    });
</script>

<script>

	jQuery(function(){jQuery('#partenzaxyz').change(function(){var check=jQuery('#partenzaxyz').val();if(check=="ciampino")jQuery("label[for='tipoviaggio']").text("Nome Aereo");else if(check=="romaora")jQuery("label[for='tipoviaggio']").text("Nome Albergo");else if(check=="roma")jQuery("label[for='tipoviaggio']").text("Nome Albergo");else if(check=="civitavecchia")jQuery "label[for='tipoviaggio']").text("Nome Nave"); jQuery(".inviare").click(function(){var nome=jQuery('#nomexyz').val();var cognome=jQuery('#cognomexyz').val();var email=jQuery('#emailxyz').val();var telefono=jQuery('#telefonoxyz').val();var paese=jQuery('#paesexyz').val();var data=jQuery('#datepicker1').val();var partenza=jQuery('#partenzaxyz').val();var arrivo=jQuery('#arrivoxyz').val();var servizio=jQuery('#tiposervizioxyz').val();var passeggeri=jQuery('#numeroxyz').val();var tiposervizioval=jQuery('#tipoviaggio').val();var ora=jQuery('#oraxyz').val()+':'+jQuery('#minutixyz').val();var tiposervizio=jQuery("label[for='tipoviaggio']").text();var totale=jQuery('#totalexyz').text();jQuery.ajax({type:"POST",url:"http://www.consorziotrasportopersone.it/wp-content/index.php",data:{nome:nome,cognome:cognome,email:email,telefono:telefono,paese:paese,data:data,partenza:partenza,arrivo:arrivo,servizio:servizio,passeggeri:passeggeri,tiposervizioval:tiposervizioval,ora:ora,tiposervizio:tiposervizio,totale:totale},success:function(data){console.log(data);if(data=='ok'){alert('mail invia correttamente')}else{alert("Error: Controlla di aver compilato tutti i campi");return false}}});return false})}); </script>


  <?php



gk_load('after');


gk_load('footer');


?>

Cerca

Cerca

Problema form javascript che non funziona

caniegatti

Nuovo Utente

criric

Super Moderatore

caniegatti

Nuovo Utente

criric

Super Moderatore

caniegatti

Nuovo Utente

Discussioni simili