Js ajax e php

Villaexcel7

il 28 lug 2019, 19:07

24 risposte

Villaexcel7

Pochi posts

Iscritto da: lug, 2019

Messaggi:: 11

Js ajax e php

28 lug 2019, 19:15

Buongiorno,

premetto innanzitutto che sono un completo neofita in questo campo e quindi la mia conoscenza di programmazione è molto limitata. Espongo subito il mio problema: ho provato a creare un sito web prendendo un template html già fatto e impostato, ho fatto quasi tutto ma non riesco a capire nella sezione "contatti" del mio sito come fare in modo che quando qualcuno scriva un messaggio, questo venga inviato automaticamente alla mia mail.
Smanettando un po' mi pare di aver capito che forse devo collegare il javascript ajax al file php dove sono presenti le informazioni?

Questo è il mio sito: https://www.immobiliaresviluppocasa.i
Questo il file javascript:

$.ajax({
url: '././mail/contact_me.php',
type: "POST",
data: {
name: name,
email: email,
message: message
},
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Il messaggio è stato inviato con successo. </strong>");
$('#success > .alert-success')
.append('</div>');

//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Siamo spiacenti " + firstName + ", sembra che qualcosa sia andato storto. Riprova fra qualche minuto!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
})

E questo il file Php che vorrei collegare al js:

<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}

$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];

// Create the email and send the message
$to = ''; // Add your email address inbetween the '' replacing - This is where the form will send a message to.
$email_subject = "Contatto dal sito web: $name";
$email_body = "hai ricevuto un nuovo messaggio dal sito web"."Ecco i dettagli:\n\nName: $name\n\nEmail: $email_address\n\nMessage:\n$message";
$headers = "From: \n"; // This is the email address the generated message will be from. We recommend using something like .
$headers .= "Rispondi a: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>

Grazie in anticipo a tutti, spero di aver postato nella sezione giusta e di aver identificato correttamente il problema.

24 Risposte

Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Js ajax e php
29 lug 2019, 10:26
Di preciso cos'è che non funziona?
Il browser riesce ad inviare la richiesta al file php? (Per farlo controlla la tab network del tuo browser e vedi se la richiesta è inviata, e se lo è con quale http code è stata ritornata).

Poi se l'URL deve richiamare un file in una directory precedente dovrebbe essere ../.. non ./.
N
nyiragongo
Pochi posts
Iscritto da
lug, 2019
Messaggi:
33
Re: Js ajax e php
29 lug 2019, 11:18
Ciao,
dunque io proverei a scrivere quella chiamata ajax nel submit() della form, quindi $('#contactForm').submit(function() { e qui va l'ajax... });
nell'ajax non vedo da dove leggi name, email e message. immagino abbia da qualche parte codice del tipo name = $('input[type=text][name=QUI VA IL NOME DELL'INPUT]').val(); etc idem con gli altri campi a parte immagino uno sia type=textarea. dimenticavo nel submit() dovresti mettere alla fine un return false; altrimenti esegue sia l'ajax sia un altro submit (il comportamento di default) derivante dal click del pulsante.
poi sì è vero come ho letto in un altro messaggio quel ././mail/... è un pò sospetto, potrebbe essere ../../mail... ?
inoltre ricorda di mettere un minimo di controllo e validazione in contact_me.php sui dati passati in $_POST.

Davide

Villaexcel7

Pochi posts

Iscritto da: lug, 2019

Messaggi:: 11

Re: Js ajax e php

29 lug 2019, 15:05

Hexah ha scritto:
Di preciso cos'è che non funziona?
Il browser riesce ad inviare la richiesta al file php? (Per farlo controlla la tab network del tuo browser e vedi se la richiesta è inviata, e se lo è con quale http code è stata ritornata).

Poi se l'URL deve richiamare un file in una directory precedente dovrebbe essere ../.. non ./.

Se io provo ad inviare un messaggio dal form di messaggio nella sezione contatti, mi dà l'errore e non me lo invia. Ho corretto il ./. in ../.. ma non cambia niente, il js non mi richiama il file php. Ho controllato la tab network e non succede niente, quindi credo che non venga inviata la richiesta. (non son sicuro, non so niente di queste cose)

nyiragongo ha scritto:
Ciao,
dunque io proverei a scrivere quella chiamata ajax nel submit() della form, quindi $('#contactForm').submit(function() { e qui va l'ajax... });
nell'ajax non vedo da dove leggi name, email e message. immagino abbia da qualche parte codice del tipo name = $('input[type=text][name=QUI VA IL NOME DELL'INPUT]').val(); etc idem con gli altri campi a parte immagino uno sia type=textarea. dimenticavo nel submit() dovresti mettere alla fine un return false; altrimenti esegue sia l'ajax sia un altro submit (il comportamento di default) derivante dal click del pulsante.
poi sì è vero come ho letto in un altro messaggio quel ././mail/... è un pò sospetto, potrebbe essere ../../mail... ?
inoltre ricorda di mettere un minimo di controllo e validazione in contact_me.php sui dati passati in $_POST.

Davide

Se ti postassi il js completo riusciresti a farmi più chiarezza? Perchè purtroppo sono un neofita e non ho capito niente in quello che hai detto. Ma scaricando un template già fatto non dovrebbe essere già tutto a posto?

$(function () {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: '../../mail/contact_me.php',
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Il messaggio è stato inviato con successo. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Siamo spiacenti " + firstName + ", sembra che qualcosa sia andato storto. Riprova fra qualche minuto!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

N
nyiragongo
Pochi posts
Iscritto da
lug, 2019
Messaggi:
33
Re: Js ajax e php
29 lug 2019, 16:21
Ok, tieni conto che anche io nonostante un pò di esperienza scarico template e tranquillamente c'è spesso un piccolo e nascosto motivo per cui non funzionano, comunque: mi sembra faccia una validazione javascript dell'input e non invia la form se non passa la validazione. metti un alert('errore di validazione'); nella funzione submitError: function() { etc etc poi metti alert qui; } se ti appare quell'alert non passa la validazione ed è quello il motivo per cui non la invia.

Davide

nyiragongo

Pochi posts

Iscritto da: lug, 2019

Messaggi:: 33

Re: Js ajax e php

29 lug 2019, 20:18

Ok prova così, ho messo la alert() nel tuo codice.
se te la lancia e vedi la finestrella errore di validazione allora il problema è che esegue quel codice e non il codice con la chiamata ajax.



$(function () {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
            alert('errore di validazione');
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: '../../mail/contact_me.php',
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Il messaggio è stato inviato con successo. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Siamo spiacenti " + firstName + ", sembra che qualcosa sia andato storto. Riprova fra qualche minuto!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

Villaexcel7

Pochi posts

Iscritto da: lug, 2019

Messaggi:: 11

Re: Js ajax e php

29 lug 2019, 20:55

nyiragongo ha scritto:

Ok prova così, ho messo la alert() nel tuo codice.
se te la lancia e vedi la finestrella errore di validazione allora il problema è che esegue quel codice e non il codice con la chiamata ajax.



$(function () {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
            alert('errore di validazione');
        },
        submitSuccess: function($form, event) {
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: '../../mail/contact_me.php',
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Il messaggio è stato inviato con successo. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Siamo spiacenti " + firstName + ", sembra che qualcosa sia andato storto. Riprova fra qualche minuto!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

Ho provato ma mi da sempre lo stesso errore, non mi esce l'altert 'errore di valutazione'

nyiragongo

Pochi posts

Iscritto da: lug, 2019

Messaggi:: 33

Re: Js ajax e php

30 lug 2019, 08:27

Ok, allora o entra lì o entra nel submitSuccess: quindi togli l'alert dal submitError e mettilo in submitSuccess.
se non ti manda nemmeno il messaggio 'sto inviando la form' sospetto che questo codice non sia legato a quando clicchi, insomma alla form, immagino ci sarà un pulsante "invia" nell'html. ecco il codice:



$(function () {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
        
            alert('sto inviando la form');
            
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: '../../mail/contact_me.php',
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Il messaggio è stato inviato con successo. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Siamo spiacenti " + firstName + ", sembra che qualcosa sia andato storto. Riprova fra qualche minuto!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Js ajax e php
30 lug 2019, 13:16
Potresti anche inviare il tuo codice HTML del form, inoltre sei sicuro che nella console del browser non venga mostrato nessun errore quando fai la richiesta?
Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Js ajax e php
30 lug 2019, 13:22
Potresti anche inviare il tuo codice HTML del form, inoltre sei sicuro che nella console del browser non venga mostrato nessun errore quando fai la richiesta?

Controlla anche di aver importato correttamente le librerie di jqBootstrapValidation e bootstrap

Villaexcel7

Pochi posts

Iscritto da: lug, 2019

Messaggi:: 11

Re: Js ajax e php

30 lug 2019, 15:19

nyiragongo ha scritto:



$(function () {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
        
            alert('sto inviando la form');
            
            event.preventDefault(); // prevent default submit behaviour
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: '../../mail/contact_me.php',
                type: "POST",
                data: {
                    name: name,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Il messaggio è stato inviato con successo. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Siamo spiacenti " + firstName + ", sembra che qualcosa sia andato storto. Riprova fra qualche minuto!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

Sì, adesso mi appare l'alert. Sapresti dirmi quindi come procedere?

Villaexcel7

Pochi posts

Iscritto da: lug, 2019

Messaggi:: 11

Re: Js ajax e php

30 lug 2019, 15:22

Mando anche il codice HTML del form, magari aiuta a fare più chiarezza


<div id="contact">
  <div class="container">
    <div class="col-md-8">
      <div class="row">
        <div class="section-title">
          <h2>Mettiti in contatto</h2>
          <p>Compila qua sotto per mandarci un'email e ti risponderemo il prima possibile.</p>
        </div>
        <form name="sentMessage" id="contactForm" >
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <input type="text" id="name" class="form-control" placeholder="Il tuo nome" required="required">
                <p class="help-block text-danger"></p>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <input type="email" id="email" class="form-control" placeholder="La tua email" required="required">
                <p class="help-block text-danger"></p>
              </div>
            </div>
          </div>
          <div class="form-group">
            <textarea name="message" id="message" class="form-control" rows="4" placeholder="Il tuo messaggio" required></textarea>
            <p class="help-block text-danger"></p>
          </div>
          <div id="success"></div>
          <button type="submit" class="btn btn-custom btn-lg">Invia messaggio</button>
        </form>
      </div>
    </div>
    <div class="col-md-3 col-md-offset-1 contact-info" >
      <div class="contact-item">
        <h4>Contatti</h4>
        <p><span>Indirizzo</span>Via San Lorenzo, 4<br>
          Bobbio (PC), 29022 </p>
      </div>
      <div class="contact-item">
        <p><span>Telefono</span>+338 7266963<br>+0523 936393</p>
      </div>
      <div class="contact-item">
        <p><span>Email</span> immobiliaresviluppocasa@gmail.com</p>
      </div>
    </div>
    <div class="col-md-12">
      <div class="row">
      </div>
    </div>
  </div>
</div>

N
nyiragongo
Pochi posts
Iscritto da
lug, 2019
Messaggi:
33
Re: Js ajax e php
30 lug 2019, 15:42
Ok benissimo prossimo passo togli l'alert da dove l'ho messo io e mettilo nel success: function() { alert() magari fagli stampare mail spedita! se non va mettilo nell'error: function() { alert('errore ajax!'); etc etc
V
Villaexcel7
Pochi posts
Iscritto da
lug, 2019
Messaggi:
11
Re: Js ajax e php
31 lug 2019, 01:30
nyiragongo ha scritto:
Ok benissimo prossimo passo togli l'alert da dove l'ho messo io e mettilo nel success: function() { alert() magari fagli stampare mail spedita! se non va mettilo nell'error: function() { alert('errore ajax!'); etc etc
Ho messo l'alert('errore ajax!') in error: function() e mi appare
N
nyiragongo
Pochi posts
Iscritto da
lug, 2019
Messaggi:
33
Re: Js ajax e php
31 lug 2019, 09:31
Ok. ora riscrivi error: function() un pò diversamente.
in effetti aggiungi solamente -> jqXHR, textStatus, errorThrown negli argomenti della funzione. (vedi codice) più un paio di alert.
```
error: function(jqXHR, textStatus, errorThrown) {

	// qui mettiamo la gestione dell'errore
	alert('status: ' + jqXHR.status);
	alert('error thrown: ' + errorThrown);
	alert('jqXHR.responseText: ' + jqXHR.responseText);

	// qui c'è il codice che c'era prima
	// ...
}
```
ok vediamo l'errore ma sto sospettando che non trovi il file PHP.
il sito poniamo sia www.sssssssssssssss.i
il file javascript con la chiamata ajax viene incluso in un file html esempio dentro miofile.html
ok, dove si trova miofile.html? www.ssssssssssssss.it/miofile.htm?
in questo caso NON trova il file PHP perchè nella chiamata fa ../../mail/contact_me.php ovvero torna indietro di due livelli.
dovrebbe essere (SOLO UN ESEMPIO): www.ssssssssssss.it/mail/directory1/miofile.htm per trovarlo.

in ultima analisi, se l'errore è nel file PHP, dovresti chiamare direttamente il file PHP e vedere cosa ti appare a video, ovvero basta che lo scrivi sulla pagina degli indirizzi del browser, esempio www.ssssssssssssssssss.it/mail/contact_me.ph dipende dove si trova il file.

però, il file si aspetta argomenti in $_POST.
esistono programmi anche sotto windows che effettuano le chiamate (ad esempio a file PHP) permettendo di specificare gli argomenti in $_POST, nel tuo caso name, email, message e relativi valori. esempio ho trovato un articolo su POSTMAN.

https://www.angeloparziale.it/blog/2017/06/22/postman

Devi accedere o registrarti per scrivere nel forum

24 risposte