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>
Related
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.
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
How can I have a form submission open a new website and sign in to that site? I'd like to have a user be able to click a dropdown on a website, then enter their email and password to sign in to a different website, and upon submission, have it open the website with them signed in.
For example, with an email, password, and website like this.
<form method="post" class="signin" action="https://www.walmart.com/account/login?tid=0&returnUrl=%2F">
<input type="hidden" name="form_posted" value="true">
<input type="hidden" name="action" value="true">
<fieldset class="textbox">
<label class="username">
<span>Email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" required>
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" required>
</label>
</fieldset>
<fieldset class="remb">
<button class="submit button" type="submit button" value="Log in">Sign in</button>
</fieldset>
</form>
Do I need to have the action="" some php file with a script?
Any ideas would be much appreciated. Thank you in advance for all your help!
*** Note: I know how to have a form open to a new page by adding the attribute target="_blank".
This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.
No error is also showing in the console; only a warning is showing saying:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
My form and the JS code is given below.
<form id="login-form" method="post" action="#" novalidate>
<label for="login-email" class="control-label">Email : </label>
<input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
<label for="login-password" class="control-label">Password : </label>
<input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
<input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>
$("#login-form input").not("[type=submit]").jqBootstrapValidation();
You must use proper controls in your markup for this to work.
Ex.
<form ...>
<div class="control-group">
<label ...>Email</label>
<div class="controls">
<input ... />
<p class="help-block"></p>
</div>
</div>
</form>
And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.
Ex.
/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});
/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});
Then simply add your "validated" class to anything you need validated:
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
Hope this helps!
I'm trying to develop a local registration procedure in my app, so the user will be able to register locally, and login with his personal user and password.
Can someone give me a simple example how can i accomplish this? Meaning how do i store the local username and password input in registration, and later login with this data?
For example this will be my Login and Registarion html pages:
<body onload="init()">
<div id="loginPage" data-role="page">
<div data-role="header">
<h1>Registration/Login Demo</h1>
</div>
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Re-enter Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
How do i construct my js file?
Thanks.
You can use Storage API of Cordova,which Provides access to the devices storage options as you like to keep process locally,
Two options you can use for achieving this goal; one is database and the other one is local storage. Look here for storage API docs