How to call AWS API Gateway in Javascript?

Question

I'd like to ask for help in creating a javascript function to call an AWS API gateway. This is essentially for a serverless contact form for a website hosted on AWS. I created and tested the lambda function and i created and tested an API gateway. All work as intended. I'm having trouble figuring out what a JS function would look like to call the API. I'm providing the HTML code for the form but essentially it's a button that links to a function, taht I haven't created, called submitToAPI(event). I found functions online for jQuery but my knowledge in this area is basically null.

Not trying to use nodejs or jQuery if possible (not trying to be difficult but I don't know how to use these).

<form id="contact-form" method="post">
  <h4>Name:</h4>
  <input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/>
  <h4>Phone:</h4>
  <input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/>
  <h4>Email:</h4>
  <input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/>
  <h4>How can we help you?</h4>
  <textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/>
  <div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div>
  <button type="button" onClick="submitToAPI(event)" class="btn btn-primary">Submit</button>
</form>

you could just do a standard form post.

Daniel A. White
– Daniel A. White

2019-04-17 20:13:20 +00:00
Commented Apr 17, 2019 at 20:13 — Daniel A. White
– Daniel A. White, Commented Apr 17, 2019 at 20:13

BTL · Accepted Answer · 2019-04-17 20:34:20Z

You can use the action attribute : <form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post">...</form>

and use a button of type submit : <button type="submit" class="btn btn-primary">Submit</button>

Here is a link to the docs : https://www.w3schools.com/tags/att_form_action.asp

And here is a example :

<form id="contact-form" action="https://example.execute-api.eu-central-1.amazonaws.com/default/api" method="post">
  <h4>Name:</h4>
  <input type="text" style="height:35px;" id="name-input" placeholder="Enter name..." class="form-control"/><br/>
  <h4>Phone:</h4>
  <input type="phone" style="height:35px;" id="phone-input" placeholder="Enter phone number..." class="form-control"/><br/>
  <h4>Email:</h4>
  <input type="email" style="height:35px;" id="email-input" placeholder="Enter email..." class="form-control"/><br/>
  <h4>How can we help you?</h4>
  <textarea id="description-input" rows="3" placeholder="Enter your message…" class="form-control"></textarea><br/>
  <div class="g-recaptcha" data-sitekey="6Lc7cVMUAAAAAM1yxf64wrmO8gvi8A1oQ_ead1ys" class="form-control"></div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

muhammad khan · Accepted Answer · 2021-04-06 05:45:57Z

0

Just paste this script tag above your current script so it is the first one..

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

answered Apr 6, 2021 at 5:45

muhammad khan

32 bronze badges

Collectives™ on Stack Overflow

How to call AWS API Gateway in Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest