Calcolo di un preventivo senza aggiornare la pagina... ajax?

[allin81]

Salve a tutti
vorrei far fare un preventivo, pescando i dati da un database mysql tramite php, ma non vorrei far aggiornare la pagina, vorrei che il prezzo uscisse direttamente nella stessa pagina.

Dovrei farlo con ajax?

Nel caso, conoscete qualche script semplice da modificare che possa fare al caso mio?
Grazie

[alka]

Dovrei farlo con ajax?

Direi che è l'unica tecnologia viabile se vuoi visualizzare nella pagina valori che provengono da un server remoto senza aggiornare l'intera pagina.

Nel caso, conoscete qualche script semplice da modificare che possa fare al caso mio?

Uno script che fa magicamente tutto è difficile trovarlo. Parti eventualmente dalla parte server restituendo l'informazione che vorresti vedere nella pagina e testala in un browser, poi si potrà vedere come recuperare quel dato usando AJAX e magari una libreria di supporto, e mostrarla su un elemento della pagina stessa.

Ciao!

[allin81]

ciao, scusa, mi sono espresso male.
Il calcolo riesco a farlo senza problemi in una pagina che chiamo calcola-preventivo.php

Adesso questo risultato vorrei mostrarlo subito sotto al form di ricerca appena viene cliccato il pulsante "mostra preventivo"

In questo caso, esiste una funzione semplice per mostrarmi questo prezzo?
Grazie

[KillerWorm]

Ciao, domanda: nella tua pagina è incluso, o hai possibilità di includere, jQuery? (vedi consiglio di alka riguardo "libreria di supporto")

In tal caso il metodo load() può essere una soluzione. In sostanza si tratta di un metodo semplificato per eseguire una richiesta AJAX e applicarne il risultato dentro l'elemento specificato.

Metti il caso che vuoi mostrare i risultati dentro un div con id "prezzo_calcolato", ti basterà quindi una cosa del genere:

$('#prezzo_calcolato').load('calcola-preventivo.php');

Vedi se può andare.

Buon proseguimento

[allin81]

ciao,
si ho sia jquery che bootstrap5 quindi potrei seguire questa strada

Basta solo questo codice? Non l'ho mai fatto prima d'ora

In pratica questa è parte del mio modulo:

<form name="preventivo" action="calcola-preventivo.php?id_hotel=<?=$id_hotel?>" method="post">
<input type="text" name="data-partenza">
<input type="text" name="aeroporto">
<input type="text" name="persone">
<input type="hidden" name="id_hotel" value="<?=$id_hotel?>">
 <button type="submit" class="btn btn-cerca">CALCOLA PREVENTIVO</button>
<script type="text/javascript">
$('#prezzo_calcolato').load('calcola-preventivo.php?id_hotel=<?=$id_hotel?>');
</script>
<div id="prezzo_calcolato"></div>
</form>

Mi sa che devo cambiare il method del form, giusto?
Grazie

[Dascos]

Se alla tua paginetta/classe che calcola il preventivo non passi TUTTO il form, non ricavi nulla di utile....
Hai due strade quindi. Usi qualcosa di un pelino più efficace di load() (efficace rispetto a ciò che ti serve) o cambi tecnologia di base.
Se vuoi usare qualcosa di più modulabile di load(), usi ajax "puro", agganciando un onclick al pulsante di "calcola preventivo" verso una pagina/url apposita a cui passi in POST i dati del form.
Oppure, sebbene poco mantenuta, usi la libreria xajax

A te la scelta

[allin81]

In che senso non passo tutto il form?
Passo tutti i dati che poi devono farmi il prezzo. Infatti facendo il submit vado alla pagina successiva col preventivo calcolato.

Non ho capito come mostrarlo nella pagina del form nel div che indico.

Non ci sono esempi in giro?

[Dascos]

In che senso non passo tutto il form?
Passo tutti i dati che poi devono farmi il prezzo. Infatti facendo il submit vado alla pagina successiva col preventivo calcolato.

Non ho capito come mostrarlo nella pagina del form nel div che indico.

Non ci sono esempi in giro?

Eh appunto....la parte di javascript che hai nel codice non serve a nulla, visto che il form ha il suo target sul submit.
Dovresti fare in modo che onsubmit torni null (o void, o false, cioè NON deve fare il submit del form) e aggiungi onclick sul pulsante di conferma. onclick deve rimandare a una funzione javascript che sfrutta ajax (o xajax) per fare la chiamata a calcola-preventivo.php passandogli i valori del form (con apposito metodino ajax/xajax preesistente). Come return dalla chiamata ajax devi impostare un ulteriore funzione js che elabora il risultato (quale che sia) e lo mostra nel modo che preferisci.

L'unico modo per evitare il "cambio pagina" è usare ajax/xajax, in pratica

[Dascos]

Personalmente preferisco limitare al massimo scrittura di codice javascript in file js da includere nelle pagine e opto quindi per sfruttare xajax. E' molto potente e, sebbene "vecchiotto", ti permette di fare un sacco di belle cosine come quella che cerchi di fare tu....
Puoi fare chiamate dinamiche ad altri script php e, all'interno di questi script, puoi manipolare ogni aspetto della pagina chiamante, aggiungere pezzi, nasconderli, rimuoverli, modificare il contenuto o il valore di un elemento, aggiungere interi css o js ecc ecc.
Inglobando xajax dentro un framework pulito di CodeIgniter, per esempio, sono riuscito a creare delle applicazioni web che non eseguono MAI un cambio pagina e il contenuto è totalmente dinamico, con una struttura portante html molto basica....a seconda di cosa devo mostrare manipolo direttamente il codice html tramite le varie chiamate xajax.

https://github.com/Xajax

[allin81]

ma dico, un esempio online di un file che richiama un'altra pagina, esiste? Non vorrei andarmi ad infilare in cose più complesse.

Vorrei vedere la soluzione più semplice per fare quello che cerco.
Magari un esempio sul campo sarebbe semplice da "copiare"