Contact form sending multiple emails

Using JavaScript with Hype
1

Im using bootstrap for a “modal” contact form and seems to be working fine, but if I do reload the contact scene (which can be triggered by switching languages), the form send as many emails as the scene was re-loaded:

You can find the site here:

This is the form code I am using on the 

<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- Default form contact -->
            <button type="button" class="close_form" data-dismiss="modal">---</button>
            <form id="contact-form" class="text-center border border-light p-5" name="contact-form"
                action="${resourcesFolderName}/mail.php" method="POST">
                <p style="font-family: Montserrat-Regular;display:flex;justify-content:center;align-items:center;width:100%;height:100%;"
                    class="contact-form-header h4 mb-4">Envianos un mensaje</p>
                <!-- Name -->
                <input type="text" style="font-family: Montserrat-Regular;" id="contacto_nombre" name="contacto_nombre"
                    class="form-control mb-4" placeholder="Nombre">
                <!-- Email -->
                <input type="email" style="font-family: Montserrat-Regular;" id="contacto_correo" name="contacto_correo"
                    class="form-control mb-4" placeholder="E-mail">
                <!-- Message -->
                <div class="form-group">
                    <textarea class="form-control rounded-0" style="font-family: Montserrat-Regular;"
                        id="contacto_mensaje" name="contacto_mensaje" rows="5" placeholder="Mensaje"></textarea>
                </div>
                <!-- Send button -->
                <button style="font-family: Montserrat-Bold;" class="contacto_enviar" type="button">---</button>
            </form>
            <!-- Default form contact -->
        </div>
    </div>
</div>

And this is the JS I am using on the contact scene:

$(".contacto_enviar").click(function () {
  //Obtenemos variables
  var nombre = $("#contacto_nombre").val();
  var correo = $("#contacto_correo").val();
  var mensaje = $("#contacto_mensaje").val();
  //Enviamos las variables
  var url = "${resourcesFolderName}/mail.php"; // the script where you handle the form input.
  $.ajax({
    type: "POST",
    url: url,
    data: $("#contact-form").serialize(), // serializes the form's elements.
    success: function (data) {
      //HYPE ANIMATION
      $("#modalContactForm").modal("hide");
      hypeDocument.startTimelineNamed(
        "enviado",
        hypeDocument.kDirectionForward
      );
    },
  });
});

I have noticed that this doesn’t happens if I also attach the JS code to the head, but I’m trying to keep everything as hype as possible since is easier to work that way, but not sure if there is a practical solution to this other than what I have tried already.

2

I ended using the script on the head and its working just fine now, no idea why triggering the code inside Hype scenes creates that behavior but I don’t mind doing it this way:

$(".contacto_enviar").click(function () {
  if ($("#contacto_nombre").val() == "") {
    alert(contactalert_name);
    return;
  }
  if ($("#contacto_correo").val() == "") {
    alert(contactalert_mail);
    return;
  }
  if ($("#contacto_mensaje").val() == "") {
    alert(contactalert_message);
    return;
  }

  //Obtenemos variables
  var nombre = $("#contacto_nombre").val();
  var correo = $("#contacto_correo").val();
  var mensaje = $("#contacto_mensaje").val();
  //Enviamos las variables
  var url = "${resourcesFolderName}/mail.php";
  $.ajax({
    type: "POST",
    url: url,
    data: $("#contact-form").serialize(),
    success: function (data) {
      //HYPE ANIMATION
      $("#modalContactForm").modal("hide");
      HYPE.documents["index"].startTimelineNamed(
        "enviado",
        HYPE.documents["index"].kDirectionForward
      );
    },
  });
});
1 Like