Develop Reference

How to enable autocomplete in <input > with <label ><input ><button >

I am not web developer, but I have a task to add autocomplete function for an input box. Please treat me as a very beginner.
<div>
<label id="email_label" for="send_email" style="padding-right:5px">
Send Email:
</label>
<input id="send_email" type="text" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">
Request
</button>
</div>
requestAck() is a javascript function sending a email to address given by user (i.e. address in <input >). I am trying to add a flag in <input autocomplete="on" ...>, but it doesn't work. Perhaps because it's not in a <form></form> environment.
Could you help me to modify this code adding autocomplete (from cache) without changing other functions. Many thanks!

Try setting the property name="email" on the input tag, without that set the browser doesn't know what's supposed to autocomplete the field with :)
protip: I warmly suggest you to set the type of the input to email with type="email" instead of text, it's not required but it will help validating the input!
check this code:
<div>
<label id="email_label" for="send_email" style="paddingright:5px">Send Email:</label>
<input id="send_email" type="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" onclick="requestAck()">Request</button>
</div>
EDIT: Final solution discussed in comments
<form onsubmit="submitForm(event)">
<label id="email_label" for="send_email" style="padding-right:5px">Send Email:</label>
<input id="send_email" type="email" autocomplete="email" name="email" placeholder="e.g. xx.yy#zz.com" />
<button id="ack" type="submit">Request</button>
</form>
<script>
function submitForm(e) {
e.preventDefault(); // this prevents the page from reloading
requestAck();
}
//dummy function so the javascript won't crash:
function requestAck() {}
</script>
Working example: https://codesandbox.io/s/focused-cray-ubkw4

required field not working in Javascript

Hello,
I am trying to implement "required" on my input fields in a form and onclick- submit, it goes to a function that calls a 3rd party function and passes the form to it.
I understand that "required" doesn't work with "onclick" but is there a way to go around it?
EDIT: I do not have any php or backend which is why Im calling a client to pass the form data.
Code:
<form id="signupform">
<label for="name"> Name </label>
<input type= "text" id="name" name="name" required>
<label for="emailaddr"> Email </label>
<input type= "email" id="emailaddr" name="emailaddr" required>
<button type="submit" onclick="callclient()">Submit</button>
</form>

You can also capture the submit event with jQuery and execute your function that way.
Here is a jsFiddle.
$(document).ready(function(){
$('#signupform').on('submit', function(e){
// Stop the form submission
e.preventDefault();
callClient();
})
})
function callClient(){
alert('client called.');
}

Here is a snippet, using the onsubmit.
I'm returning false so the default submit is not called, this is likely why you think it's not working in your version.
function callclient() {
console.log('Client Called');
return false;
}
<form id="signupform" onsubmit="return callclient();">
<label for="name"> Name </label>
<input type= "text" id="name" name="name" required>
<label for="emailaddr"> Email </label>
<input type= "email" id="emailaddr" name="emailaddr" required>
<button type="submit">Submit</button>
</form>

Google spreadsheet website form jQuery script block the sending of

I have my form in html. I copied action, entry keys and hidden inputs from orginal Google Form.
<form id="Gform" role="form" action="https://docs.google.com/forms/d/MY-FORM-KEY/formResponse" method="POST" target="_self" onsubmit="">
<input type="text" pattern="^[a-zA-Z][a-zA-ZążźćśęółbńĄŻŹĆŃŚĘÓŁ ]{4,40}$" name="entry.1028663680" value="" id="entry.1028663680" dir="auto" title="What is Your city" class="form-control" placeholder="City" required>
<input type="text" pattern="^[a-zA-Z][a-zA-ZążźćśęółbńĄŻŹĆŃŚĘÓŁ ]{5,40}$" name="entry.1220908348" value="" id="entry.1220908348" dir="auto" title="Your complete name" class="form-control" placeholder="Your name" required>
<input type="tel" name="entry.623688995" value="" id="entry.623688995" dir="auto" title="" class="form-control" placeholder="phone" required>
<input type="email" name="entry.1564973803" value="" id="entry.1564973803" dir="auto" title="" class="form-control" placeholder="email" required>
<input type="hidden" name="entry.383122401" value="WEBSITE" id="entry.383122401" dir="auto" title="" class="form-control" placeholder="E-mail" required>
<input type="hidden" name="draftResponse" value="[,,"-9139933475238999509"]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fbzx" value="-9139933475238999509">
<button type="submit" name="submit" id="sendData" class="btn btn-default">Submit</button>
</form>
I have te jQuery script, which display confirm:
<script type="text/javascript">
function sendContactForm(){
$("#Gform").fadeOut();
$("#form-container").append('<p class="confirmer">Thanks!<br>Your email was sent.</p>');
};
$('#Gform').submit(function () {
sendContactForm();
return false;
});
</script>
When i delete this script, form is sending, and save to google, but after click submit, I am redirecting to google "Thank You" page. I want to no redirect and display confirm just like in script. How to fix this problem ?

try to use AJAX to acomplish your task, when you will use asynchronous function, there won't be reloading page and you will send data behind the scene. In data object enter all input values, in done() and fail() functions define what to do when you recieve response. Good Luck:)
$('#formID').submit(function(e){
e.preventDefault();
$.ajax({
url: "https://docs.google.com/forms/d/1PrgHQALlz0WrvwjhGpLrtIgD5aQ1x-8HrOubkxTLNKs/formResponse",
type: "POST",
data: {
'entry.111': $('#entry_111').val(),
'entry.222': $('#entry_222').val(),
// all data from form
}
}).done(function(data){
yourAction(data);
}).fail(function(data){
failAction(data);
});
});

Comment the return false in the code above:
$('#Gform').submit(function () {
sendContactForm();
//return false;
});
Or just delete this line.
What this is script is doing is: subscribing to the submit event and canceling it.
Do you want to do something else?

HTML Form Box Field Won't Stay Clicked

I'm working on a project that requires a login form for the user to access the page. When the login button is clicked, I call the following function:
$(document).ready(function() {
$("#login").click(function(){
$("#login").html('<form name="login" action="login" method="post" accept-charset="utf-8"><ul><li><label for="usermail">Email</label><input type="email" name="usermail" placeholder="yourname#email.com" required></li><li><label for="password">Password</label><input type="password" name="password" placeholder="password" required></li> <li> <input type="submit" value="Login"></li> </ul> </form> <form name="register" action="register" method="post" accept-charset="utf-8"> <ul> <li><label for="username">Username</label> <input type="username" name="username" placeholder="username" required></li> <li><label for="usermail">Email</label> <input type="email" name="usermail" placeholder="yourname#email.com" required></li> <li><label for="password">Password</label> <input type="password" name="password" placeholder="password" required></li> <li> <input type="submit" value="Register"></li> </ul> </form> ');
});});
The div for the login button looks like this:
<div class="row row1" id="login"><button>Login</br><p class="glyphicon glyphicon-user"></p></button>
</row>
The current issue I'm having is that when you click into one of the boxes of the form, it won't let you stay clicked into that box. It immediately unclicks the box, making it impossible to login. Does anyone have any idea why this is happening? Any help would be appreciated.

With this code
$("#login").click(function(){
$("#login").html('<form ... (very long string) ');
});});
You are effectively saying "when a user clicks on any part of the form, replace the contents of the form entirely". So the form gets overwritten with new contents every time you click on it. And the new contents are not "clicked" (you mean focused).

Another way i found out is to unbind click event: Use it for reference jsFiddle. It might give you better idea, so posting it too
$("#login").click(function(){
$("#login").unbind('click');
$("#login").html('<form..... >');
.....
});

Uncaught type error cannot read property 'event' of undefined

I am trying to create a simple app that writes the values entered in a form on the console:
HTML:
<input type="email" name="email-address" value="" id="email-address" />
<label for="password">Password</label>
<input type="password" name="password" value="" id="password" />
<input type="submit" name="submit" class="btn" value="Login" onclick="login_existing_submit()" id="register-submit" />
Javascript:
function login_existing_submit() {
console.log(document.getElementById("email-address").value);
}

Try with this
onclick="login_existing_submit();"
and also give this onclick event better to an button rather than submit(not sure but its gud)

If this is form you are in trouble. Because in this case onclick handler called but form also get submitted. From your code it seems no trouble.
Also I've made a fiddle.

You can't use hyphen in IDs.
<input type="email" name="email-address" value="" id="emailaddress" />
function login_existing_submit()
{
console.log(document.getElementById("emailaddress").value);
}
Working fiddle.