contact from on aws with jquery and lambda

Question

I have a static website, hosted via an aws S3 bucket and using cloudfront.

I have been trying to set up a contact form, using jquery to turn the form into python and submit to my aws API gateway (which in turn calls a lambda function to send the form as an email via SES).

I have followed some tutorials, and though I can run a working test on the AWS test function (in both the API gateway and lambda), it never works on the site.

When I click the submit button on the website, the page just refreshes - there is no error or success message, and no email sent.

As it works in the aws console (it sends an email as expected) but not in the site, and particularly that i get a page refresh and not an error, leads me to believe the issue is in the js or html

The html for the form is:

<div class="form contact-form">
          <div id="sendmessage">Your message has been sent. Thank you!</div>
          <div id="errormessage"></div>
          <form method="post" role="form" class="contactForm">
            <div class="form-group">
              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
              <div class="validation"></div>
            </div>
            <div class="form-group">
              <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
              <div class="validation"></div>
            </div>
            <div class="text-center"><button name="submit" id="submit" class="ready-btn right-btn" onclick="">Contact Us</button></div>
          </form>
        </div>
<script src="contactform/contactform.js"></script>

The javascript at contactform/contactform.js is

$(document).ready(function() {

  $("#submit").click(function(e) {
  e.preventDefault();

  var name = $("#name").val(),
      email = $("#email").val(),
      subject = $("#subject").val(),
      message = $("#message").val();

  $.ajax({
      type: "POST",
      url: 'APIGATEWAY_URL',
      contentType: 'application/json',
      data: JSON.stringify({
          'name': name,
          'email': email,
          'subject': subject,
          'message': message
      }),
      success: function(res){
          $('#form-response').text('Thank you for your message, we will respond soon..');
      },
      error: function(){
          $('#form-response').text('Error sending message.');
      }
  });
   })
    });

Is anyone able to shed light on why this is just resulting in a page refresh and not doing anything?

steven35 steven35 · Accepted Answer · 2018-08-13T11:38:58

In your <form>'s onclick attribute do this:

onlclick="return false;"

You should also add a console.log() or alert() call in your button's event handler just to make sure the function is actually called. If it isn't, check if you have included the javascript file correctly.

contact from on aws with jquery and lambda

1 Answers