This question already has answers here:
Using PUT method in HTML form
(10 answers)
Closed 7 years ago.
Sorry I have been a backend developer and my question may look dump; my apologies; I want to have a from and submit to an API endpoint which uses PUT method and based on that if the result is 200 or 400 I want to redirect to different pages; so what I have done so far:
<form class="form-signin" method="PUT" action="MY_API">
<h2 class="form-signin-heading">Please sign in</h2>
<input class="form-control" type="text" required name="email" placeholder="Email address">
<input class="form-control" type="password" required name="password" placeholder="Password">
<input class="form-control" type="text" required name="name" placeholder="name">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
But after submitting it goes to the url from action as GET data, why is that?!
When I submit the page to the API endpoint I want to check the HTTP status code and based on that redirect to different pages.
Also, it is worth mentioning I'm open to any solution which is the fastest(in terms of implementation) and easiest one either pure javascript, JQuery,...
Thanks
The HTML form spec only allows GET and POST, any unknown methods go through GET. What you're going to need to do is create an XMLHttpRequest through javascript programmatically, and set it to PUT with a request body.
Related
Origin of the problem: In our flying club we are sharing an account to view different approach charts on a third party website. To access them, you have to login with your credentials and then click a button that will forward to a created link. I tried using that link directly, but it contains an MD5-Hash that will be newly created at every visit and I couldn't recreate the values that are used to generate it.
My idea: Since I have the login data for the third party website and I know under which ID I can find the according href-Link, I would like the user to able to click a button on my website which causes an auto-login on the third-party side, grabs the href-Link and forwards the user to the page.
Unfortunately I can`t seem to find an appropriate way to achieve that, as the login-form also creates and uses a CSRF-Token (see example below):
<form name="sLogin" method="post" action="https://www.example.com/sTarget/downloads" id="login--form">
<input name="sTarget" type="hidden" value="account">
<div class="register--login-description">Einloggen mit Ihrer E-Mail-Adresse und Ihrem Passwort</div>
<div class="register--login-email">
<input name="email" placeholder="Ihre E-Mail-Adresse" type="email" autocomplete="email" tabindex="1" value="" id="email" class="register--login-field">
</div>
<div class="register--login-password">
<input name="password" placeholder="Ihr Passwort" type="password" autocomplete="current-password" tabindex="2" id="passwort" class="register--login-field">
</div>
<div class="register--login-lostpassword">
<a href="https://example.com/passwordreset" title="Passwort vergessen?">
Passwort vergessen?
</a>
</div>
<div class="register--login-action">
<button type="submit" class="register--login-btn btn is--primary is--large is--icon-right" name="Submit">Anmelden <i class="icon--arrow-right"></i></button>
</div>
<input type="hidden" name="__csrf_token" value="j0LpIt1lwL4ya3UEc4C0ayDE3ZpJhd"></form>
Do you guys have an idea how to approach this problem? Can I somehow auto-login via PHP or JavaScript?
So I have a registration table in my website that has fields that need to be filled before submission. As far as I know, I have two options to make sure of that. First one is to use the 'required' attribute for each input or to check them at PHP level and using js. Which one is the better practice? Is there a better way to do it? And why?
Here is the way that I do it using HTML:
<form role="form" action="registration.php" method="post" id="login-form" autocomplete="off">
<div class="form-group">
<label for="username" class="sr-only">username*</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter Desired Username" required>
</div>
<div class="form-group">
<label for="email" class="sr-only">Email*</label>
<input type="email" name="email" id="email" class="form-control" placeholder="somebody#example.com" required>
</div>
<div class="form-group">
<label for="password" class="sr-only">Password*</label>
<input type="password" name="password" id="key" class="form-control" placeholder="Password" required>
</div>
<input type="submit" name="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Register">
</form>
In the PHP/JS version the code should look like this:
if (empty($username) || empty($email) || empty($password)){
echo "<script>alert('Fields cannot be empty')</script>";
}
I appreciate your help.
My suggestions is to have both, client & server side validation. That way you reduce server load & it's good if you later turn it into the API for eg. Hope this helps.
Client-side validation is the faster way to deal with the validation process than on the server-side because all the tasks happens on the webpage there itself and the network time form client to server is saved.
But in only doing client-side validation there is a risk of attacks clients which can easily bypass the client-side so here it is need to validate the strings submitted by the cilent on the server-side which will save your data from the dangerous inputs.
Note : In short, in terms of faster validation client-side is better and in terms of the security of the data server-side is a better option.
The truth is the server is always out a limitation on every website so as all we can we have to reduce the computing and programs from server to Client-side and to lend the render to user's computer. so if you can use js to do that never interfere PHP on this. just use js and if your problem is going to handle with pure CSS too is going to be very better.
In my polymer 2 app I have something like this:
<form class="styling" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email">
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password">
</div>
<div class="styling">
<a class="styling" on-tap="doRequestFunction">Login<a>
</div>
</form>
My issue is there are a lot of sources saying what works and what doesn't and I've tried removing the outer div, I've tried changing the email to a username, I've tried to change the <a> to an <input type="submit">. I've also tried to add an invisible username input below the email input. I have a database element that does my ajax calls so ideally I'd like to just call the request function on a form submit, but there doesn't appear to be a way to do this because it wants me to perform the action with a file or something like that.
TL;DR is there a way to do this:
<form class="styling" onSubmit="doTheRequestFunction" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email"/>
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password"/>
</div>
<div class="styling">
<input class="styling" type="submit">Login</input>
</div>
</form>
There doesn't appear to be a way to do this in polymer and the ways that do don't request for the users password and are depreciated anyways. Using Chrome primarily.
EDIT: Please, no JQuery, only Javascript. I don't know what JQuery is doing half the time and it's sloppy.
autocomplete is an HTML attribute (https://www.w3schools.com/tags/att_input_autocomplete.asp). It's either on or off. It's designed to tell the browser whether it should attempt to autocomplete a field or not. The default is on so you shouldn't have to set it unless you're trying to prevent the browser from autocompleting.
Try to remove all your autocomplete attributes, and submit your form. The browser should ask you if you want to save your username and password at which point it should be populated next time you come to your form.
Also, you have an bad tag on the end of your submit button: </inoput>
<input type="submit" value="Send Request"> should be fine.
Boys, I found it.
paper-input autocomplete fails to fill
This is a polymer specific issue I was having. Currently polymer requested support for their auto-fill apparently and it's still not there. This is the solution for now. Pop that bad boy into you index.html and weep tears of joy.
Just make it
<input name="password" type="password"/>
So if input field has attribute type as password it will trigger browser to remember.
This question already has answers here:
How to Prevent SPAM without CAPTCHAs or a Centrally managed system (e.g. akismet)
(10 answers)
Closed 5 years ago.
<form action="newsletter" method="POST">
<div class="input-group">
<input type="email" class="form-control box-style-1" size="50" name="email" placeholder="Your email" required>
<input type="hidden" name="code" value="<?php echo $code; ?>" >
<div class="input-group-btn">
<button type="submit" class="btn subscribe-btn">Subscribe</button>
</div>
</div>
</form>
I have tried to send a hidden code (randomly generated) through form but i am not able to prevent the spam.
Random code has to be a part of JavaScript, otherwise it'll be simply parsed by bots
Use reCapcha for that; or extra-header for each request (that will be a part of JS); or check RELATIVE_URL to validate that submit was done from your site.
I have a simple form on my website where it ask the user for their email and the city they're located in like this:
I'm using EmailJS (emailjs.com) and MailJet (mailjet.com) services and while EmailJS and MailJet are doing their jobs, I'm ultimately not able to view the actual form data such as the email and city that was enter anywhere on MailJet, EmailJS or emails that are sent to me. I'm new to web development.
Here's my html code:
<form class="form-inline" type="text" onsubmit="emailjs.sendForm('mailjet', 'myTempNameFromEmailJS', this); return true;" method="get">
<div class="form-group">
<input type="email" class="contactUsEmail" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="contactUsEmail" placeholder="City">
</div>
<button type="submit" class="btn btn-primary contactUsButton">Signup</button>
</form>
What in the world am I doing wrong? I've essentially been working on this since yesterday and can't figure out what I'm doing wrong.
According to the emailjs docs at https://www.emailjs.com/docs/api-reference/emailjs-sendform/ the third parameter of the sendForm method should be "form_id", the id of the form used to collect the parameters. Currently you're sending "this", but that's the variable which (in that particular context) holds the JavaScript representation of the whole form element.
I think you should change it to this.id:
emailjs.sendForm('mailjet', 'myTempNameFromEmailJS', this.id);
Im not familiar with mail jet, however, usually to gain the values out of your forms you need to add the name attribute, for example
<input type="email" class="contactUsEmail" placeholder="Enter email" name="contactUsEmail"/>
name="contactUsEmail"/>