I have a basic html form which contains contact information fields. Like this,
<form method="post" action="https://MYAPIPATHISHERE.us-east-2.amazonaws.com/dev/contact">
<input name="website" placeholder="Website URL" type="text">
<input name="name" class="email input-standard-grey" placeholder="Your Name" type="text">
<input name="email" placeholder="Email Address" type="email">
<input name="phone" class="email input-standard-grey" placeholder="Phone" type="text">
<textarea name="message" class="email input-standard-grey" placeholder="Message"></textarea>
<button>Submit Now</button>
</form>
I have a working AWS Lambda API endpoint like this
https://MYAPIPATHISHERE.us-east-2.amazonaws.com/dev/contact
I tried to submit the form. But it's not working. Sometimes showing an Internal server error as the response and sometimes Cross Origin error. My site is hosted in Github pages. This API endpoint works well in Postman and Curl. Lambda function is coded in NodeJS.
Related
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 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>
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>
I want form value to be replace with xml value while submit and match the user and pass for login ..
XML Data hosted
in place of GlobalID i have user and languageid i have pass
Form Body :-
<input type="text" value="username" placeholder="enter user name"><br>
<input type="password" value="password" placeholder="enter password"><br>
<input type="text" value="macid" placeholder="Mac ID"><br>
<input type="text" value="version" placeholder="Version"><br>
<button class="actionSubmit" onclick="loginValidation()" type="submit">Login </button>
Help me to fix this. i need to do with js or jquery
I have one registration form in my site in which I am saving fields and after saving the form when user again come back to that registration form I want previous field values to be saved in browser auto-fill.
below is my code snippet -
<form class="clearfix">
<input autocomplete="given-name" name="firstName" type="text" placeholder="Enter First Name" class="form-control" value="">
<input autocomplete="family-name" name="lastName" type="text" placeholder="Enter Last Name" class="form-control" value="">
<input autocomplete="email" name="email" type="text" placeholder="Enter Email" class="form-control" value="">
<input autocomplete="tel" name="phoneNumber" type="text" placeholder="Enter Number" class="form-control contactMask" value="">
<input autocomplete="address-line1" name="addressLine1" type="text" placeholder="Street 1" class="form-control">
<input autocomplete="address-line2" name="addressLine2" type="text" placeholder="Street 2" class="form-control" value="">
<a href="javascript:void(0);" className="btn baseBtn primeBtn" onClick={this.signupUser}>Sign Up</a>
</form>
In this code onClick of anchor tag I am doing ajax call via signup user function.
and after that i want that users data to be auto filled in browsers autofill address in chrome.
I have tried below ways : -
1.Few people suggested to use form "submit" button functionality to save data in autofill rather than having ajax call form anchor tag onClick event.
but that is also not working in my case.
2.I have gone through few post in which they told to use proper name and autocomplete attribute for field. but by using that browser can only guess proper field values .
I am answering my own question.
Actually,I just ignored that I am not directly submitting my form.
On backend we are using grails and using it just for REST API's.
on frontEnd we have react.js but request and response are getting served from Nginx .
So form is not getting submitted to grails that's why on form submit data was not getting saved in browser autofill.
I want to send a popup to a user if the user is not logged into my forum.
So far it works as far as appending the HTMl form to the new window created in Javascript; however, when I press the actual submit forms via the new window I get the basic 404 even though I use absolute URLs.
Here's the basic Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var myWindow = window.open("", "MsgWindow", "width=500, height=500");
myWindow.document.write('<h1>Already have an account? Login here!</h1><br> <form method="post" action="sportsboard.netai.net/page.php?page=login&&do=login&&formdisplay=false"> <label for="username">Username:</label><input type="text" id="username" name="username" size="35"><br> <label for="password">Password:</label> <input type="password" name="password" id="password" size="35"><br> <input type="submit" name="login" value="Login ≫"> </form> <hr><br> <h1> or Signup and get started talking!</h1> <form method="post" action="sportsboard.netai.net/page.php?page=register&&do=register&&formdisplay=false"> <label for="username">Username:</label><input type="text" id="username" name="username" size="35"><br> <label for="password">Password:</label> <input type="password" name="password" id="password" size="35"><br> <label for="email">E-mail: </label> <input type="email" name="email" id="email" size="35"><br> <input type="submit" name="register" value="Register ≫"> </form>');
});</script>
...and here's a basic link to a test page http://www.sportsboard.netai.net/Scripts/login.php?test=yes
If you press the submit buttons on there you'll be redirected to my testing free host's 404 page not found.
How do I make the form submit as if it were on a regular page?
My guess would be you are using absolute urls incorrectly. Since, you didn't prefix your form post action with http://www. it is attempting to post it to the local relative path. Try this:
action="http://www.sportsboard.netai.net/page.php?page=register&&do=register&&formdisplay=false"
The answer is as sctskw said! The action tried to search for the URL locally, so I added the http://www. to correctly direct the URL.
I am trying to redirect the user to a new page on the current website once the form is submitted to another url.
I've looked at so many boards to figure out the best way. I cannot modify the destination URL for posting so I was thinking that the onsubmit function would work best to redirect the user to another page. But for some reason I can't figure out how to get the redirect to work.
Here is the code that I have right now:
<form method=post onSubmit="window.location.href='https://thankyoupage.com/'action="https: //urltopostto.com?encoding=UTF-8"><input type="hidden" name="inquiry_from" value="website" />
<fieldset><legend style="display: inline !important;">We Can't Wait to Hear from You</legend>
<div><label for="first_name">First Name*</label>
<input id="first_name" type="text" maxlength="40" name="first_name" required="" size="20" /></div>
<div><label for="last_name">Last Name*</label>
<input id="last_name" type="text" maxlength="80" name="last_name" required="" size="20" /></div>
<div><label for="email">Email*</label>
<input id="email" type="email" name="email" required="" size="20" /></div>
<div><label for="phone">Phone*</label>
<input id="phone" type="tel" name="phone" placeholder="(111) 111-1111" required="" size="20" /></div>
</fieldset>
<fieldset><legend>Company Information</legend>
<div><label for="company">Organization Name*</label>
<input id="organization" type="text" maxlength="40" name="organization" required="" size="20" /></div>
<div>
</fieldset>
<fieldset>
<div><label for="Inquiry">Can you provide us additional information?</label>
<textarea id="inquiry" maxlength=""256" name="inquiry" rows="6" wrap="soft"></textarea> </div>
<section><input type="submit" value="Submit" /></section></fieldset>
</form>
So, you are trying to redirect to another page (for example, "/page1"), when a user submits a form which will be posting the form data to a page (for example, "/page2"). Is this correct?
If you own the page2 meaning your server is serving up the page, then you can basically handle the redirect to page1 there.
However, if you don't own the page, you can use AJAX to post the form data to the page2 AND THEN redirect to page1 within your page using jQUery
$(document).ready(function () {
$('#submit_button_for_the_form').click(function (e) {
// Don't do the regular form POST
e.preventDefault();
// Get form variables...
var first_name = $('#first_name').val();
var last_name = $('#last_name').val();
...
// Post the form variables to page2
$.post('/page2', {
first_name : first_name,
last_name : last_name,
...
});
// redirect to page1
window.location = '/page1';
});
});
I'm not certain that I understand the question correctly. Wouldn't that be done rather easily, and better from the file you're posting to? (https://urltopostto.com)
You say you cannot modify the destination url. Does it mean that you cannot add anything to the destination file as well?
You could send the user directly to the thank you page and then submit the form data from behind the scenes. This would be a$$-backward and you'll have to be very careful to warn the user if things don't work (which would be some funky UX) but it would work.
There are many questions here. The best would be to do work with the file you're posting to.