/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Contact form on S3 Bucket AWS static server

I am using S3 server to host my website , and I launched Lambda function with API gate way to send my contact form information from my site to my email, the contact form is performing well and it sends the info to the destined email without triggering errors on web console from my Firefox, however the jQuery does not trigger the “successful” argument and jumps to the “unsuccessful” argument without refreshing the page and resetting the filled contact form, if anyone directs me to what am I missing :
HTML:
`<form id=”contact-form” method=”post”>
<h4>Name:</h4>
<input type=”text” style=”height:35px;” id=”name-input” placeholder=”Enter name here…” class=”form-control” style=”width:100%;” /><br/>
<h4>Phone:</h4>
<input type=”phone” style=”height:35px;” id=”phone-input” placeholder=”Enter phone number” class=”form-control” style=”width:100%;”/><br/>
<h4>Email:</h4>
<input type=”email” style=”height:35px;” id=”email-input” placeholder=”Enter email here…” class=”form-control” style=”width:100%;”/><br/>
<h4>How can we help you?</h4>
<textarea id=”description-input” rows=”3″ placeholder=”Enter your message…” class=”form-control” style=”width:100%;”></textarea><br/>
<div class=”g-recaptcha” data-sitekey=”6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys” class=”form-control” style=”width:100%;”></div>
<button type=”button” onClick=”submitToAPI(event)” class=”btn btn-lg” style=”margin-top:20px;”>Submit</button>
</form>`

jQuery:

`function submitToAPI(e) {
e.preventDefault();
var URL = “https://abc1234.execute-api.us-east-1.amazonaws.com/01/contact“;

var Namere = /[A-Za-z]{1}[A-Za-z]/;
if (!Namere.test($(“#name-input”).val())) {
alert (“Name can not less than 2 char”);
return;
}
var mobilere = /[0-9]{10}/;
if (!mobilere.test($(“#phone-input”).val())) {
alert (“Please enter valid mobile number”);
return;
}
if ($(“#email-input”).val()==””) {
alert (“Please enter your email id”);
return;
}

var reeamil = /^([w-.]+@([w-]+.)+[w-]{2,6})?$/;
if (!reeamil.test($(“#email-input”).val())) {
alert (“Please enter valid email address”);
return;
}

var name = $(“#name-input”).val();
var phone = $(“#phone-input”).val();
var email = $(“#email-input”).val();
var desc = $(“#description-input”).val();
var data = {
name : name,
phone : phone,
email : email,
desc : desc
};

$.ajax({
type: “POST”,
url : “https://abc1234.execute-api.us-east-1.amazonaws.com/01/contact”,
dataType: “json”,
crossDomain: “true”,
contentType: “application/json; charset=utf-8”,
data: JSON.stringify(data),


success: function () {
// clear form and show a success message
alert(“Successfull”);
document.getElementById(“contact-form”).reset();
location.reload();
},
error: function () {
// show an error message
alert(“UnSuccessfull”);
}});
}`

to post a comment
Java

2 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMay 17.2020 — You specifyed `dataType: "json",` for the response from the server. If the server's response is not valid JSON jQuery will run into the error function. In order to be sure you can output the parameters of the error function, as described in the manual.
Copy linkTweet thisAlerts:
@SilverEagleauthorMay 17.2020 — This is the Lambda Json:

var AWS = require('aws-sdk');<br/>
var ses = new AWS.SES();

var RECEIVER = '<EMAIL email="[email protected]">[email protected]</EMAIL>';<br/>
var SENDER = '<EMAIL email="[email protected]">[email protected]</EMAIL>';

var response = {<br/>
"isBase64Encoded": false,<br/>
"headers": { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'example.com'},<br/>
"statusCode": 200,<br/>
"body": "{"result": "Success."}"<br/>
};

exports.handler = function (event, context) {<br/>
console.log('Received event:', event);<br/>
sendEmail(event, function (err, data) {<br/>
context.done(err, null);<br/>
});<br/>
};

function sendEmail (event, done) {<br/>
var params = {<br/>
Destination: {<br/>
ToAddresses: [<br/>
RECEIVER<br/>
]<br/>
},<br/>
Message: {<br/>
Body: {<br/>
Text: {<br/>
Data: 'name: ' + event.name + 'nphone: ' + event.phone + 'nemail: ' + event.email + 'ndesc: ' + event.desc,<br/>
Charset: 'UTF-8'<br/>
}<br/>
},<br/>
Subject: {<br/>
Data: 'Website Referral Form: ' + event.name,<br/>
Charset: 'UTF-8'<br/>
}<br/>
},<br/>
Source: SENDER<br/>
};<br/>
ses.sendEmail(params, done);<br/>
}


Any suggestions to how to capture the error code wise?
×

Success!

Help @SilverEagle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...