send email using javascript, html and ajax

Question

I have my form in HTML:

<form name="form" class="form" role="form" action="index.php" method="post">
  <div class="container">
    <div class="row" id="row1">

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-2 col-lg-offset-2 text-center">
        <!--<img class="map-class" src="imgs/primaudine_mappa.svg">-->

      </div>

      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-2 form-class">
        <div class="row">
          <div class="col-sm-12">

            <div class="form-group">
              <!-- drop down menu -->
              <label for="sel1">Seleziona Area:</label>
              <span class="error">* <!--<?php echo $nameErr;?> --> </span>
              <select class="form-control" id="sel1" name="region" required>
                                            <option selected="selected" disabled="disabled" value="">Seleziona la tua zona</option>
                                            <option value="region1">1 - Udine Centro</option>
                                            <option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option> 
                                            <option value="region3">3 - Laipacco / San Gottardo</option>
                                            <option value="region4">4 - Udine sud</option>
                                            <option value="region5">5 - Cussignacco</option>
                                            <option value="region6">6 - S. Paolo / S. Osvaldo</option>
                                            <option value="region7">7 - Chiavris / Paderno</option>
                                    </select>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
              <label for="usr">Mail personale</label>
              <span class="error">* <!-- <?php echo $nameErr;?></span> -->
              <input name="mail" type="email" class="form-control" id="usr" placeholder="es. mariorossi@gmail.com" required>
            </div>
          </div>
        </div>

        <div class="row">

          <div class="col-xs-8 col-sm-8 col-md-8 form-group">
            <label for="usr">Nome e Cognome</label>
            <span class="error">* <!-- <?php echo $nameErr;?></span> -->
            <!-- codice per nomi e cognomi ^([ \u00c0-\u01ffa-zA-Z'\-])+$ -->
            <input pattern="^([ \u00c0-\u01ffa-zA-Z'\-])+$" title="Solo caratteri es. Mario Rossi" name="nome" type="text" class="form-control" id="usr" placeholder="es. Mario Rossi" required>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 form-group">
            <label for="usr">Età</label>
            <span class="error">* <!-- <?php echo $nameErr;?></span> -->
            <input name="eta" type="number" min="16" max="99" class="form-control" id="usr" placeholder="es. 35" required>
          </div>
        </div>

        <div class="row">
          <div class="cols-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
              <label for="comment">Inserisci la tua segnalazione o i tuoi spunti</label>
              <span class="error">* <!-- <?php echo $nameErr;?></span> -->
              <textarea name="commento" class="form-control" rows="7" id="comment" placeholder="Scrivi in questo campo" required></textarea>
              <p><span class="error">* campi richiesti</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="cols-xs-12 col-sm-12 col-md-12 button-class" style="text-align: center"><button name="submit" type="submit" class="btn" value="submit">Invia Segnalazione</button>

      </div>
    </div>
  </div>
</form>

Then, I have connected my form in HTML with my email sender code in PHP:

<?php 

            // L'INDIRIZZO DEL DESTINATARIO DELLA MAIL 
            $to = "my@email.com";

            // IL SOGGETTO DELLA MAIL 
            $subject = "Segnalazione da " . $_POST["nome"]; 

            // COSTRUIAMO IL CORPO DEL MESSAGGIO 
            $body = "Contenuto della segnalazione:\n\n"; 

            $body .= "Mail: " . trim(stripslashes($_POST["mail"])) . "\n"; 

            $body .= "Nome: " . trim(stripslashes($_POST["nome"])) . "\n"; 

            $body .= "Età: " . trim(stripslashes($_POST["eta"])) . "\n"; 

            $val_select = trim(stripslashes($_POST["region"]));
            if ($val_select == "region1") {
                $val_select = "Udine Centro";
            } else if ($val_select == "region2") {
                $val_select = "Rizzi / S. Domenico / Cormor / S. Rocco";
            } else if ($val_select == "region3") {
                $val_select = "Laipacco / San Gottardo";
            } else if ($val_select == "region4") {
                $val_select = "Udine sud";
            } else if ($val_select == "region5") {
                $val_select = "Cussignacco";
            } else if ($val_select == "region6") {
                $val_select = "S. Paolo / S. Osvaldo";
            } else if ($val_select == "region7") {
                $val_select = "Chiavris / Paderno";
            }

            $body .= "Area: " . $val_select . "\n"; 

            $body .= "Messaggio: " . trim(stripslashes($_POST["commento"])) . "\n";

            // INTESTAZIONI SUPPLEMENTARI 
            $header_from = "From: " . trim(stripslashes($_POST["nome"])) . " " . trim(stripslashes($_POST["mail"])) . " "; 

            // INVIO DELLA MAIL 
            if( $_POST["nome"] != "" && $_POST["commento"] != "" && $_POST["eta"] != "" && $_POST["region"] != ""){
                //echo "ciao!";
                //mail($to, $subject, $body, $header_from);
                mail($to, $subject, $body, 'Mail dal sito Prima Udine');
                //header("Location:https://www.google.com/");
                header( "Location: redirect.php");


            }
        ?>

But this method dont work. so I would like to change method. I would like to connect my form in HTML with a JavaScript code using Ajax to send the email. How I can do that? If you need more info ask me, thanks. ps. i'm newbie but I can code something ;)

UPDATE: I have tried to fix the php problem, check my answer.

Answer 1

I have tried to fix my php. For now, this works. I have redirect to another page after submit:

code edited:

 if(count($_POST) == 0) { // L'INDIRIZZO DEL DESTINATARIO DELLA MAIL $to = "llluca3.0@gmail.com"; // IL SOGGETTO DELLA MAIL $subject = "Segnalazione da " . $_POST["nome"]; // COSTRUIAMO IL CORPO DEL MESSAGGIO $body = "Contenuto della segnalazione:\\n\\n"; $body .= "Mail: " . trim(stripslashes($_POST["mail"])) . "\\n"; $body .= "Nome: " . trim(stripslashes($_POST["nome"])) . "\\n"; $body .= "Età: " . trim(stripslashes($_POST["eta"])) . "\\n"; $val_select = trim(stripslashes($_POST["region"])); if ($val_select == "region1") { $val_select = "Udine Centro"; } else if ($val_select == "region2") { $val_select = "Rizzi / S. Domenico / Cormor / S. Rocco"; } else if ($val_select == "region3") { $val_select = "Laipacco / San Gottardo"; } else if ($val_select == "region4") { $val_select = "Udine sud"; } else if ($val_select == "region5") { $val_select = "Cussignacco"; } else if ($val_select == "region6") { $val_select = "S. Paolo / S. Osvaldo"; } else if ($val_select == "region7") { $val_select = "Chiavris / Paderno"; } $body .= "Area: " . $val_select . "\\n"; $body .= "Messaggio: " . trim(stripslashes($_POST["commento"])) . "\\n"; // INTESTAZIONI SUPPLEMENTARI $header_from = "From: " . trim(stripslashes($_POST["nome"])) . " " . trim(stripslashes($_POST["mail"])) . " "; // INVIO DELLA MAIL if( $_POST["nome"] != "" && $_POST["commento"] != "" && $_POST["eta"] != "" && $_POST["region"] != ""){ //echo "ciao!"; //mail($to, $subject, $body, $header_from); mail($to, $subject, $body, 'Mail dal sito Prima Udine'); //header("Location:https://www.google.com/"); //header( "Location: redirect.php"); } } else ( count($_POST) > 1 ) { /* ... process form here ... */ /* prevent re-posting prompt by redirecting to same url with a 303 status */ header("Location: redirect.php"); exit; } 

the new code is:

 <?php if(count($_POST) == 0) { /* my old code */ } } else ( count($_POST) > 1 ) { /* ... process form here ... */ /* prevent re-posting prompt by redirecting to same url with a 303 status */ header("Location: redirect.php"); exit; } ?>