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
Related
I am trying to validate some text-fields using the required keyword, yet nothing is working?
How do I create validation using the required keyword.
Here is my code:
<div id="Name" class="tabcontent">
<form>
<div class="nameDiv">
Title: <input type="text" name="Title" title="Title" id="TitleTransfer">
</div>
<br>
<div class="addressDiv">
Name: <input type="text" name="name" id="NameTransfer" required />
<span class="asterisk"></span>
</div>
<br>
<div class="emailDiv">
Surname:
<input type="text" name="surname" id="LastNameTransfer" required />
<span class="asterisk"></span>
</div>
<br>
<div class="numberDiv">
Email Address:
<input type="text" name="email Address" id="EmailTransfer" required />
<span class="asterisk"></span>
</div>
<br>
<div class="numberDiv">
Phone number:
<input type="text" name="Phone number" id="NumberTransfer">
</div>
<button id="save-btnOne" onclick="moveContentOne()">Save</button>
</form>
</div>
the required attributes tells the browser that the form field must contain something, this is a weak validation and can be supressed when hooking the form submit through javascript (keep in mind that you do not have delivered any kind of javascript source here that might be in the orbit of the form).
I assume that the moveContentOne() hooking the onclick-event is the only javascript attached. Considering this the onSubmit-event remains untouched and will be also fired alongside of your onClick intervention. You should prefer to hook onSubmit for forms of that kind to apply custom validation, but that might detach the browser's default behavior for form validation (including the required-attachment to fields).
You might take a look at this guide: Form data validation
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
Use this type of validation.
This works for
<form name="myForm" onsubmit="validateForm()">
<input type="text" name="fname" />
</form>
Some browsers do not support required field.
Change the code to your need.
I hope it helps you.
Chrome's "Save Password" feature apparently makes a simple choice when offering to remember passwords: It looks at the value of the previous input field in the DOM and offers to key the password to that value. So if you have this username/password combo:
<form>
<input value="myname" />
<input value="mypassword" />
</form>
the browser will offer to save the password "mypassword" under the key "myname".
This presents a problem when using Dojo ValidationTextBox however, because the Dojo parser inserts an invisible INPUT control that contains a character "X" used as a validation icon (simplified HTML view):
<form>
<div>
<input value="X" />
<input value="myname" />
</div>
<div>
<input value="X" />
<input value="mypassword" />
</div>
</form>
Under this circumstance Chrome offers to remember "mypassword" under the name of "X", which is awkward.
Is it possible to override this behavior in Chrome? Or do we need to rewrite this functionality in Dojo?
Add name properties to the validation widgets:
this.username = new ValidationTextBox({ name: 'username' });
this.password = new ValidationTextBox({ name: 'password' });
Or declaratively:
<input type="text" name="username" data-dojo-type="dijit/form/ValidationTextBox" />
<input type="text" name="password" data-dojo-type="dijit/form/ValidationTextBox" />
This will produce nodes with name attributes which Chrome will be able to use to associate the value with a key. Your simplified HTML view would then look like this:
<form>
<div>
<input value="X" />
<input name="username" value="myname" />
</div>
<div>
<input value="X" />
<input name="password" value="mypassword" />
</div>
</form>
I've figured out how you can make this to work. When you use the name attribute with the appropiate values(username, password) the username value will be the input value above the password input.
1. Surround your fields with a form
<form method="post">
<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
</form>
2. Add an autocomplete to your input field with the value 'username' and 'password'
<input type="text" autocomplete="username" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
<input type="password" autocomplete="password" data-dojo-props="selectOnClick: true, uppercase: true" data-dojo-type="dijit/form/ValidationTextBox" required="required" />
3. Add a button to submit or just a regular button
<input type="submit" value="send" />
See the fiddle
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..... >');
.....
});
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.
I'm using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.
Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.
I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.
If the sole purpose is to encode simple text into URL format then use encodeURIComponent().