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. [email protected]" 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 = "[email protected]";

            // 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.

Do you have to use your own code? If no, then you can give swiftmailer.org a try.. — lu5er
– lu5er, Commented May 16, 2017 at 15:06
@ScottMarcus Well the only thing don't work is when I submit the email and I refresh the page the form submit again the email. I have tried all the codes and the soluctions on the web.... it continue to re-send the email when I refresh the page again. — Luca
– Luca, Commented May 16, 2017 at 15:13
@j08691 I was reading this... it is connected to the "PRG pattern" but I don't know the right code for me. — Luca
– Luca, Commented May 16, 2017 at 15:22

Luca · Accepted Answer · 2017-05-17 07:41:12Z

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 = "[email protected]";

			// 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;
        }

		?>

Collectives™ on Stack Overflow

send email using javascript, html and ajax

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related