CODEWITHSUNDEEP
javascriptaws-lambda
Dan
Dan

Reputation: 31

How to call AWS API Gateway in Javascript?

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>

Upvotes: 0

Views: 6912

Answers (2)

muhammad khan
muhammad khan

Reputation: 3

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>

Upvotes: 0

BTL
BTL

Reputation: 4656

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>

Upvotes: 1

Related Questions