Develop Reference

How to send a pre-defined text of a <form> element into action page, without having the user to type

As you know, the <input type="text" name = "input_field"> element creates a space for the user to type in an HTML form. But in this case, I know what the user is going to enter.
For instance, the user wants to send 'hello' to the action page. It isn't a particular piece of information like his/her name, email id, etc. It will be the same for everyone. Then why not just create a button like this:
<input type="submit" value="click to send 'hello'">
When the user will click on the button, 'hello' will be sent to the action page specified in the action attribute of the <form> element.
How do I do it? Also, I need to mention that I am not much experienced in HTML or JS, so I would appreciate a beginner-like solution.
I apologize if this question already exists somewhere.
Thanks in advance!

You can include predefined information when submitting a form by using a type="hidden" field:
<input type="hidden" name="input_field" value="hello">
That doesn't appear visibly on the page, but is submitted just like any other field when you submit the form.

As far as I understand your problem, you want to create a form where few fields will have predefined information
I would suggest not to hide the input according to the UI/UX perspective but instead, you can show those fields as read-only.
In this way, the user will have an idea of predefined values
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="number" disabled readonly id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>

My login passwords won't autocomplete when I enter my email in polymer 2

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.

On registration form , form fields are not getting saved in browser auto fill on submit .(ReactJs)

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.

Remember input password dialog box, without reloading the page

I am searching a way to make the browser ask the user if he wants to remenber his password, when a form is submited without changing the current page (using the submit event for example).
I made a jsfiddle to show this: http://jsfiddle.net/HeFFh/2.
<form action="javascript:">
<input type="text" value="user" />
<input type="password" value="pass" />
<input type="submit" />
</form>
When you press the submit button, the browser should ask you if the password have to be remembered.
It only works with Firefox. Am I doing something wrong ?

It is based on browser settings and not on the code.
For chrome: goto -> settings -> show advanced settings -> Passwords and Forum -> Select "Offer to save passwords I enter on the web"
For more help visit this link

I believe you have to have the action attribute set to something other than "javascript:" and the inputs should have a name attribute.
Try this:
<form action="/" >
<input type="text" value="user" name="username" />
<input type="password" value="pass" name="password" />
<input type="submit" />
</form>
This will not override the browser setting, but will allow the feature to be used if it's not turned off by the user

Form Submit taking to a new page

I have a simple form. On submit (the submit action is a google docs form submission), it takes to a new page with focus on that page. I want to keep the focus on the current page.
What are my options?
This is the code (also present here )
<html><body>
<form action="https://docs.google.com/a/rangde.org/spreadsheet/formResponse?formkey=dFlSZkt0TzZTWHJyblBiQlNrcmZvZGc6MQ" method="POST" id="ss-form" target="_blank" onsubmit="submitted=true;">
<br>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" placeholder="Your Name">
<br>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" placeholder="E-mail Address">
<br>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" placeholder="Pledge Amount">
<br>
<input type="submit" name="submit" value="Submit"></form>
</body>
</html>

Depending on what you're trying to do with the resulting form, (and if you're not comfortable relying js do all the lifting) you could also create a hidden iframe on the page, give it a name, and set the form target to the name of the iframe. This is only if you have no interest in having the user ever see the google page itself.

Try AjaxForm, as found at http://jquery.malsup.com/form/, if you're using jQuery

A form's action parameter will always take you to that page.
Here is an example:
POST without Form Method (PHP)