I wont put the whole code, since i think it doesnt matter, because the problem is js related. I have a form and input fields(2 password fields). With css i made a "green tick" next to these fields. I want these green ticks to appear when BOTH fields are equal, and re-appear when i delete one "character" from one of the fields - when they are not equal.
pswd1/pswd2 - my input pass fields
I want the green ticks to show when they are equal and when the length of the second field(the confirmation one) is greater than 6
$('#pswd1').on('change', function(){
pass = $('#pswd1').val();
pass1 = $("#pswd2").val();
if(pass = pass1 && pass1.length > 6){
$("#gtick1").show();``
$("#gtick2").show();
}
});
By using =, you are assigning the value from one variable to another inside the condition, to compare you should use == or ===. Also I will prefer input event instead of change here.
Try the following way:
$('#pswd1, #pswd2').on('input', function(){
var pass = $('#pswd1').val();
var pass1 = $("#pswd2").val();
if(pass == pass1 && pass1.length > 6){
$("#gtick1, #gtick2").show();
}
else{
$("#gtick1, #gtick2").hide();
}
});
span{
color: green;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="pswd1">
<span id="gtick1">✔</span><br>
<input type="password" id="pswd2">
<span id="gtick2">✔</span>
pass = pass1
should be
pass === pass1
You have some wild `` in there too. Throw a console.log('hi') in at the top to make sure the code is actually being run and you should be gucci.
you can play around this code. Though it's not exactly what you want but it will serve your purpose
$('#pswd1, #pswd2').on('keyup', function(){
pass1 = $('#pswd1').val();
pass2 = $("#pswd2").val();
if(pass1 === pass2){
$("#passDiv1").css("background-color", "green");
$("#passDiv2").css("background-color", "green");
}else{
$("#passDiv1").css("background-color", "yellow");
$("#passDiv2").css("background-color", "yellow");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="passDiv1" style="padding: 5px">
<input id="pswd1" type="password"/>
</div>
<div id="passDiv2" style="padding: 5px">
<input id="pswd2" type="password"/>
</div>
Related
In the if statement bellow only the else block executes even when the when the answer is 10!
JavaScript
$("#correctOne").hide();
$("#incorrectOne").hide();
function myFunction() {
var inputOne = $("#inputOne").value;
if (inputOne === 10) {
$("#correctOne").show();
} else {
$("#incorrectOne").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h1>What number am I thinking of?</h1>
<p>Divide me by four and my remainder is two. I am net if you see me through the looking glass.</p>
<form>
<input id="inputOne" type="text" placeholder="Answer Here">
<button onclick="myFunction()">submit</button>
</form>
<h2 id="correctOne">Yes!</h2>
<h3 id="incorrectOne">Nope!</h3>
.value is JavaScript and only works for InputElements, you have $("#inputOne'), a jQuery object, and thus need .val().
Next, if you enter 10 into the field, inputOne is "10", not 10, but === also compares type.
Use == instead.
Here is the modified code with code snippet.
I have change .val() instead of .value().
-- Another change is change 10 to "10"
-- Another change is changing == to ===
$("#correctOne").hide();
$("#incorrectOne").hide();
function myFunction() {
var inputOne = $("#inputOne").val();
if (inputOne == "10") {
$("#correctOne").show();
} else {
$("#incorrectOne").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h1>What number am I thinking of?</h1>
<p>Divide me by four and my remainder is two. I am net if you see me through the looking glass.</p>
<form>
<input id="inputOne" type="text" placeholder="Answer Here">
<button onclick="myFunction()">submit</button>
</form>
<h2 id="correctOne">Yes!</h2>
<h3 id="incorrectOne">Nope!</h3>
The syntax is var inputOne ==$('#inputOne).val();
val() is the method to retrieve the value in an element.
html() method can set the inner HTML content too.
I want the nameVerification() function to throw the alert() message when the user hits submit. For example, if the user enters something like 45 in the name field, I want that alert in nameVerification() function to be called. Right now, when the user does type in a number in the name field, the alert() in the formSubmission() function is being called.
Side note:
formSubmissionfunction works perfectly. In other words, if the user enters a number < 13 in the age field, the functions alert() gets called normally with no problems. If the user enters a number > 13, it works, also, without a problem. Just thought I'd let you guys know that too.
signUp.html
<!DOCTYPE html>
<html>
<head>
<title>Signup Form</title>
<script type="text/javascript" src="signUp.js"></script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="signUp.css">
<body>
<form class="col-md-4 col-md-offset-4" name="formHandler" id="handle">
<div class="moveUsername">
<label for="usr">Name:</label>
<input type="field" class="form-control" id="nameVerify" placeholder="Username" required="required">
</div>
<div class="ageMovement">
<label for="usr" >Age (Must be 13 years or older to play):</label>
<input type="field" class="form-control" id="ageVerify" name="ageChecker" placeholder="Age" required="required">
</div>
<button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button>
</form>
</body>
</html>
signUp.js
function nameVerification() {
var name = document.getElementById("nameVerify").value;
if(typeof name !== 'string') {
alert("That's not a name!");
}
}
function formSubmission() {
var age = document.getElementById("ageVerify").value;
if(age < 13) {
alert("You're too young, you can't play the game");
}
}
age is also a string in this function:
function formSubmission() {
var age = document.getElementById("ageVerify").value;
if(age < 13) {
alert("You're too young, you can't play the game");
}
}
If you want to do a numeric compare, you need to parse first:
function formSubmission() {
var age = document.getElementById("ageVerify").value;
if (age) {
var ageInteger = parseInt(age, 10);
if (ageInteger < 13) {
alert("You're too young, you can't play the game");
}
}
}
You have two onclick attributes on the button
<button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button>
You can only have one
Your typeof test is failing because the value returned from a text input is always of type string. You can test to see if a provided text value is numeric with the following function:
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
The real answer, however, is that you'll need to improve your input validation tests to determine what you want, rather than test for all the things you don't want. For example, testing for a numeric value as above would not work if someone entered "t#^!" in the field, which is likely not a value you would want in a name field. This is where regular expressions, and the built-in validations from HTML5 fields can help.
You can change your nameVerification function as follows:
function nameVerification() {
var name = document.getElementById("nameVerify").value;
if (name) {
var num = parseInt(name) || -1;
if (num >= 0 && num < 13) {
alert("That's not a name!");
}
}
}
and change your onclick values in the html to be:
onclick="formSubmission();nameVerification()"
it's because the javascript is not loaded yet.
Move:
<script type="text/javascript" src="signUp.js"></script>
To just above the </body> tag.
You should use parseInt:
var age = parseInt(document.getElementById("ageVerify").value);
I want to check if an input (name="companyname") has a value and if so, it should check a radio button (id="Zakelijk"). If it does not have any value, it should check the other radio button (id="Particulier").
See my current code:
<script type="text/javascript">
function ShowHideDiv() {
var chkYes = document.getElementById("Zakelijk");
var dvPassport1 = document.getElementById("checkzakelijk");
var dvPassport2 = document.getElementById("checkzakelijk1");
var dvPassport3 = document.getElementById("checkzakelijk2");
var display = chkYes.checked ? "block" : "none";
dvPassport1.style.display = display;
dvPassport2.style.display = display;
dvPassport3.style.display = display;
}
</script>
<div class="col-md-12 check-business">
<div class="form-group form-group-xl">
<label for="Particulier"><input type="radio" id="Particulier"checked="checked" name="checkzakelijk" onclick="ShowHideDiv()" />Particulier</label>
<label for="Zakelijk"><input type="radio" id="Zakelijk" name="checkzakelijk" onclick="ShowHideDiv()" />Bedrijf</label>
</div>
</div>
<div class="col-md-12" id="checkzakelijk" style="display:none;">
<div class="form-group">
<label for="inputCompanyName" class="control-label">{$LANG.clientareacompanyname}</label>
<input type="text" name="companyname" id="inputCompanyName" value="{$clientcompanyname}"{if in_array('companyname', $uneditablefields)} disabled="disabled"{/if} class="form-control" />
</div>
</div>
There are other ways, but this should get you going:
$(function() {
if (($("#inputCompanyName").val() || "") != "")
{
$("#Zakelijk").prop("checked", true)
} else {
$("#Particulier").prop("checked", true)
}
});
This is based on your html where the input name='companyname' also has id 'inputCompanyName' and will clear the other radio because they have the same name=
Edit Working jsfiddle: https://jsfiddle.net/76x42os0/4
change input value in the code box (top left) and click run.
Update: Updated the fiddle to the indicated jquery version 3.1.0 and found the newer version of jquery needs id= to match #, while before it matched on name=
If you want to check it when the input is changed you can do
$("input[name='companyname']").change(function(){
var hasValue = $(this).val() === "";
$("#Zakelijk").prop("checked", hasValue);
$("#Particulier").prop("checked", !hasValue);
})
you can optimize the code, but this is more readable.
In case you need the solution in Javascript
if(document.getElementById("inputCompanyName").value !== ""){
document.getElementById("Zakelijk").checked = true;
document.getElementById("Particulier").checked = false;
}
else{
document.getElementById("Particulier").checked = true;
document.getElementById("Zakelijk").checked = false;
}
Here's a working example of what you're after (albeit without your HTML ids/layout in mind, but you can simply change the IDs within).
$("#text-box").on('change', function(){
if($(this).val() != ""){
$('#rd1').prop("checked", true)
}else{
$('#rd2').prop("checked", true)
}
});
https://jsfiddle.net/bm18hmLa/3/
It hooks into the changed event, so it would occur every time the text-box value has been changed.
After thought:
Changing
$("#text-box").on('change', function(){
to
$("#text-box").on('input', function(){
makes it a little "nicer" in terms of responsiveness.
https://jsfiddle.net/bm18hmLa/5/
and here's a version with your ID names too.
https://jsfiddle.net/bm18hmLa/6/
hi guys i have a html form where i have a textfield which is having capabilities to enter two digits the first digit is autopopulated to be 0 and i donot want users to change that hows that possible using javascript or jQuery or anything else.
Here is another way.
the onKeyUp might not be how you want it to work but at least you have some ideas
<script>
window.onload=function() {
document.getElementById('part2').focus();
}
</script>
<form onSubmit="this.realvalue.value='0'+document.getElementById('part2').value">
<input type="text" name="realvalue" value="">This can be hidden<br />
<input type="text" style="border-right:0; width:12px" value="0" readonly="readonly" size="1"><input type="text" id="part2" style="border-left:0; width:13px" size="1" maxsize="1"
onKeyUp="this.value=(this.value.length>1)?this.value.substring(-1):this.value">
<input type="submit">
You can use the event "keyup" triggered when the user enters text in the field:
$('#my-input').keyup(function() {
var theInputValue = $(this).val();
// Do whatever you want with the value (like check its length,
// append 0 at the beginning, tell the user not to change first
// character
//
// Set the real value
$(this).val(newValue);
});
You may be better off with a '0' as text in front of a textbox that can only accept a single digit and then prepend the '0' programmatically?
I wrote and tested this code, and works exactly as you expect:
$(function (){
$('#input_id').bind('input',function (){
var val = $(this).val();
var r = val.match(/^[0][0-9]$/g);
if (r !== null){
val = r[0];
if (val.length === 1){
val = '0' + val;
}
}else{
val = '0';
}
$(this).val(val);
});
});
And works for copy/paste too =]
I've been looking at this for the last few hours, and can't really achieve what I'm looking for. I currently have the following two inputs:
<input type="text" id="username" value="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" />
<input type="password" id="password" value="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" />
Initially, the inputs text is grey, and I have the following JavaScript functions onfocus and onblur:
var defaultInput = "";
function inputFocused(obj){
defaultInput = obj.value;
obj.value = "";
obj.style.color = "#000";
}
function inputBlurred(obj){
if(obj.value == ""){
obj.style.color = "#AAA";
obj.value = defaultInput;
}
}
I'm trying to devise a way so that once I start typing into a field, leave the field, then return, it will not clear the input again (since it will then contain something the user typed in it). I've thought of achieving this with some kind of variable that I can alternate between 1 and 0 depending on the state, but that seemed sloppy. Any insight for this JS novice is greatly appreciated.
In inputFocused, you are clearing the input field's value regardless of any state. Maybe I am misunderstanding your intention, but why would you ditch the value when focusing the control?
Updated: Adding a 'defaultTextValue' attribute to each element allows you to capture the input's default value on the first focus event. The alternative is to use your document's onLoad event to capture the default values. The snippet below clears the textboxes when they are focused and their value is the same as the default values they were initialized with. You might annoy users that have either a username of 'username' or a password of 'password', but you probably should anyways 8-)
function inputFocused(obj) {
if (obj.defaultTextValue == undefined || obj.value == obj.defaultTextValue) {
obj.defaultTextValue = obj.value;
obj.value = "";
}
}
function inputBlurred(obj) {
if (obj.value == "" && obj.defaultTextValue != undefined) {
obj.value = obj.defaultTextValue;
}
}
Adding to jscharf's code, you can use the title attribute of the input field to store the default value of each input. This has the usability advantage of letting people know what the input field should contain when they hover over it:
<input type="text" id="username" value="USERNAME" title="USERNAME" onfocus="inputFocused(this)" onblur="inputBlurred(this)" />
<input type="password" id="password" value="PASSWORD" title="PASSWORD" onfocus="inputFocused(this)" onblur="inputBlurred(this)" />
And in the js:
function inputFocused(obj){
if(obj.title != obj.value){
obj.value = '';
obj.style.color = '#000';
}
}
function inputBlurred(obj){
if(obj.value == '' || obj.title == obj.value){
obj.value = obj.title;
obj.style.color = '#AAA';
}
}
Also, not sure if you've considered doing it, but you can control the focus colour of the input in CSS if you want (doesn't work in IE6 of course... but you can override in an IE6 only stylesheet):
input {
color: #AAA;
}
input:focus {
color: #000;
}
You can add any customized attributes to your HTML page's DOM as you like, gives you a lot of flexibility.
You could do a check to see if the value in the field currently is the initial value.