Generating random password into input with input length using Javascript - javascript

<form name="pgenerate">
<input type="text" size=18 name="output">
<input type="button" value="Generate Password" ><br />
<b>Password Length:</b> <input type="text" name="thelength" size=3 value="7">
</form>
How can i make a random password generator that will generate password inside an input you can use in you projects or systems

var keylist="abcdefghijklmnopqrstuvwxyz123456789"
var temp=''
function generatepass(plength){
temp=''
for (i=0;i<plength;i++)
temp+=keylist.charAt(Math.floor(Math.random()*keylist.length))
return temp
}
function populateform(enterlength){
document.pgenerate.output.value=generatepass(enterlength)
}
<form name="pgenerate">
<input type="text" size=18 name="output">
<input type="button" value="Generate Password" onClick="populateform(this.form.thelength.value)"><br />
<b>Password Length:</b> <input type="text" name="thelength" size=3 value="7">
</form>

No need to reinvent the wheel. Check out this library: https://www.npmjs.com/package/generate-password which does exactly what you want.

Try this pure JS solution:
function generateRandomPassword (passwordLength) {
var outputPassword = "";
var allPossibleChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < passwordLength; i++) {
outputPassword += allPossibleChars.charAt(Math.floor(Math.random() * allPossibleChars.length));
}
return outputPassword;
}
<form name="pgenerate">
<input type="text" size=18 id="output" name="output">
<input type="button" value="Generate Password" onclick="document.getElementById('output').value = generateRandomPassword(document.getElementById('thelength').value);"><br />
<b>Password Length:</b> <input type="text" id="thelength" name="thelength" size=3 value="7">
</form>
If you want to add more possible chars simply update allPossibleChars.

Related

Why does the recalculation of the form drop the first javascript calculation?

I am trying to recalculate the form based on a payment method. What I have is sort of working. It fails however if the payment method is changed after entering the number of widgets needed. The widget 2 value stays intact but the widget 1 calculation reverts to 0 yet the entered number is still in the number of widgets needed for Widget 1.
function lf(vntAmount) {
vntAmount = parseFloat(vntAmount) || 0; // find number (parseFloat) switch it to 0 if not a number
vntAmount = vntAmount * 100; // cost of widget 1
document.frmConvert.box1.value = vntAmount.toFixed(2)
}
function rf(vntAmount) {
vntAmount = parseFloat(vntAmount) || 0; // find number (parseFloat)
vntAmount = vntAmount * 200; // cost of widget 2
document.frmConvert.box2.value = vntAmount.toFixed(2)
}
function calculate() {
var myBox1 = document.getElementById('box1').value;
var myBox2 = document.getElementById('box2').value;
// var result = document.getElementById('result'); // don't know what this does
if (document.getElementById('visa_checked').checked) {
var myResult = (parseFloat(myBox1) + parseFloat(myBox2)) * .15;
} else {
var myResult = (parseFloat(myBox1) + parseFloat(myBox2)) * .12;
}
var myResult2 = myResult + (parseFloat(myBox1) + parseFloat(myBox2));
result.value = myResult.toFixed(2);
result2.value = '$' + myResult2.toFixed(2);
}
body {
font-family: arial;
font-size: 100%;
color: #aea2a2
}
<html>
<head>
<title>Test Form</title>
<script type="text/javascript">
onload = function() {
location.href = "#";
}
</script>
</head>
<body>
<FORM ACTION="processform.php" METHOD=POST name="frmConvert">
<h4>Widgets For Sale</h4>
Mandatory field *<br><br> Name*
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Address
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> City
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Postal Code<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Email
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Phone*
<br>
<input type="text" name="sheetdata[]" size="42"><br><br> Method of payment<br>
<input type="radio" name="sheetdata[]" value="Visa" id="visa_checked" onChange="lf(this.value);calculate();">Visa<br>
<input type="radio" name="sheetdata[]" value="Cheque" onChange="lf(this.value);calculate();">Cheque<br>
<input type="radio" name="sheetdata[]" value="E-Transfer" onChange="lf(this.value);calculate();" checked>E Transfer<br>
<br><br> Number of Widget One needed:<br>
<input name="sheetdata[]" id="txtAmount" type="text" value="" onchange="lf(this.value);calculate();" size="3" value="0" /> # $100 <input name="sheetdata[]" size="5" readonly="readonly" id="box1" value="0" />
<br><br> Number of Widget Two needed<br>
<input name="sheetdata[]" id="txtAmount2" type="text" value="" onChange="rf(this.value);calculate();" size="3" value="0" /> # $200 <input name="sheetdata[]" size="5" readonly="readonly" id="box2" value="0" />
<br><br> Tax 12% <input name="sheetdata[]" id="result" size="5" readonly="readonly" /> 3 % added for Credit Card
<br><br> Total <input name="sheetdata[]" id="result2" size="5" readonly="readonly" />
<input type="hidden" name="sheet_name" value="Test_Form">
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
<p>Thank You!</p>
</form>
</body>
</html>
Not sure what to try to fix this.

Superscript Calculation Javascript Variables

I'm exercising in calculations with variables using javascript and i can't figure out how to use superscripts in variables. With some help Javascript calculations holding variables i learned how to do calculations in general but my new question is how to use superscripts?
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis*/ + 0.00000055 * parseInt(document.getElementById('ans').value)/*insert ans into a parenthensis and ^2 outside the parenthesis*/ - 0.00028826;
}
</script>
Thanks in advance
There is a function in javascript Math.pow();
Math.pow(2,4) gives you 2^4 = 16.
Math.pow(2,4);
>16
Math.pow(2,4.1);
>17.148375400580687
<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="first" size="35" id="first">+ Second Number:
<input type="text" name="second" size="35" id="second">
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<input type="text" name="ans2" size="35" id="ans2" />
<button type="button" onclick="Calculate();">Calculate</button>
</form>
<script>
function Calculate() {
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
var ans = document.getElementById('ans').value;
var ans2 = document.getElementById('ans2').value;
document.getElementById('ans').value = parseInt(first) + parseInt(second);
document.getElementById('ans2').value = 1.112 - 0.00043499 * parseInt(document.getElementById('ans').value) + 0.00000055 * Math.pow(parseInt(document.getElementById('ans').value), 2) - 0.00028826;
}
</script>
Updated Snippet according to answers works now!

merge textbox values with javascript by element type

I have 3 textboxs.Their names and ids are different.I can merge their values with their names or ids but I need to merge their values with type. How can I do it.
<input type="text" id="txt1" name="textbox1">
<input type="text" id="txt2" name="textbox2">
<input type="text" id="txt3" name="textbox3">
You can get all the textbox elements by their type using document.querySelectorAll("input[type=text]").
If by merge you mean concatenating the values.
var textBoxes= document.querySelectorAll("input[type=text]");
var mergedValue;
for(var i=0;i<textBoxes.length;i++)
{
mergedValue+=textBoxes[i].value;
}
var dataVal=document.querySelectorAll('[type=text]');
var myVal="";
dataVal.forEach(function(entry) {
myVal+=entry.value;
});
console.log(myVal);
<input type="text" id="txt1" name="textbox1" value="2">
<input type="text" id="txt2" name="textbox2" value="2">
<input type="text" id="txt3" name="textbox3" value="2">
Here is another possible solution.
function mergeData() {
var textboxes = document.getElementsByTagName("input");
var mergedText = "";
for (var i = 0; i < textboxes.length; i++) {
if (textboxes[i].type === "text" ) {
mergedText = mergedText + textboxes[i].value;
}
}
document.getElementById("merged").innerHTML = mergedText;
}
<input type="text" id="txt1" name="textbox1">
<input type="text" id="txt2" name="textbox2">
<input type="text" id="txt3" name="textbox3">
<button onclick="mergeData()">Merge</button>
<div id="merged"></div>

Display the formula value of 2 textboxes in 3rd - Javascript

This the formula [(min*30)+sec]/500
Where min is textbox value 1 and sec is textbox value 2
Minutes<input type="text" value="" name="min">
Seconds<input type="text" value="" name="sec"><br>
Output<input type="text" value="" name="output"><br>
<input type="Button" value="Calculate" name="Calculate"><br>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="Javascript">
$(function(){
$(".calculate").on("click", function(){
var min = $(".min").val();
var sec= $(".sec").val();
var output =parseInt(parseInt(min)*parseInt(sec) / 500);
});
});
</script>
Have you tried something? Do you have any error?, perhaps you could show some javascript code.
Anyways, if you are not using jquery try something like this:
Minutes<input type="text" id="min" value="" name="min">
Seconds<input type="text" id="sec" value="" name="sec"><br>
Output<input type="text" id="output" value="" name="output"><br>
<input type="Button" value="" onclick="calculate()" name="Calculate"><br>
js:
function calculate() {
var min = parseInt(document.querySelector('#min').value);
var sec = parseInt(document.querySelector('#sec').value);
document.querySelector('#output').value = [(min*30)+sec]/500;
}
Using jQuery it is easy to solve.
Minutes<input type="text" value="" name="min" class="min">
Seconds<input type="text" value="" name="sec" class="sec"><br>
Output<input type="text" value="" name="output" class="output"><br>
<input type="Button" value="" name="Calculate" class="calculate"><br>
Try this, this may help you.
$(function() {
$(".calculate").on("click", function() {
var min = $(".min").val();
var sec = $(".sec").val();
var output = parseFloat(((min*30) + sec) / 500);
$(".output").val(output);
});
});
let me know.

How to count the number of selected elements?

I have a lot of elements which are used identical class-name. Now I need to calculate the number of selected items.
For e.g. something like this: (however this example doesn't work correctly)
$("#btn").click(function(){
if($(".necessarily").val() == ''){
$(".necessarily").css('border','1px solid red');
}
// also I want the number of input.necessarily which are empty
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<form name="frm" action="#">
<input name="first-name" class="necessarily" type="text" /><br><br>
<input name="last-name" class="necessarily" type="text" /><br><br>
<input name="email" class="necessarily" type="email" /><br><br>
<input name="password" class="necessarily" type="password" /><br><br>
<input name="address" class="anything" type="text" /><br><br>
<input name="btn" id="btn" type="submit" value="Register" />
</form>
Now I want the number of those inputs which are empty ..., How can I calculate that?
.val() method returns .value property of the first element in the collection. You can filter the empty inputs using the .filter() method and read the .length property of the filtered collection:
var $empty = $(".necessarily").filter(function() {
// you can use the `$.trim` method for trimming whitespaces
// return $.trim(this.value).length === 0;
return this.value.length === 0;
});
if ( $empty.length > 0 ) {
}
If you want to add a border to the empty fields you can declare a CSS class and use the .removeClass and .addClass methods:
CSS:
.red_border {
border: 1px solid red;
}
JavaScript:
var $empty = $(".necessarily").removeClass('red_border').filter(function() {
return this.value.length === 0;
}).addClass('red_border');
You'd do better looking at the HTML5 Contraint API rather than doing what you're currently doing, which is a more manual and time-consuming way.
Instead of giving each field a class 'necessarily' (sidenote: the word you need is 'necessary', not 'necessarily', or, better still, 'required') use the required attribute. So:
<input name="last-name" required type="text" />
Then in your jQuery you can target empty fields with:
$('input:invalid').css('border', 'solid 1px red');
If all you're doing is highlighting bad fields, you don't even need JavaScript for this. You can do the same thing via CSS:
input:invalid { border: solid 1px red; }
The only problem with that is the styling will be showed even before the user has filled out the form, which is almost never desirable. You could get round this by logging, via JS, when the form is submitted, and only then activating the styles:
JS:
$('form').on('submit', function() { $(this).addClass('show-errors'); });
CSS:
.show-errors input:invalid { border: solid 1px red; }
Try this code:
$("#btn").click(function(){
var selectedcount = $(".necessarily").length; //no. of elements with necessarily class name
var emptyInputCount=0;
$(".necessarily").each(function(){
if($(this).val() == ''){
emptyInputCount++;
}
});
Try with each loop on the target elements.
$(function() {
$("#btn").click(function() {
var i = 0;
$(".necessarily").each(function() {
if ($(this).val() == "") {
$(this).css('border', '1px solid red');
i++;
}
});
alert(i); //Number of input element with no value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form name="frm" action="#">
<input name="first-name" class="necessarily" type="text" />
<br>
<br>
<input name="last-name" class="necessarily" type="text" />
<br>
<br>
<input name="email" class="necessarily" type="email" />
<br>
<br>
<input name="password" class="necessarily" type="password" />
<br>
<br>
<input name="address" class="anything" type="text" />
<br>
<br>
<input name="btn" id="btn" type="submit" value="Register" />
</form>
Hope this helps!
You can use filter() like following example bellow.
var empty_inputs = $('.necessarily').filter(function(){
return $(this).val()=='';
});
empty_inputs.length will return 3 in my example.
Hope this helps.
var empty_inputs = $('.necessarily').filter(function(){
return $(this).val()=='';
});
console.log(empty_inputs.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="first-name" class="necessarily" type="text" /><br><br>
<input name="last-name" class="necessarily" type="text" /><br><br>
<input name="email" class="necessarily" type="email" value="Register"/><br><br>
<input name="password" class="necessarily" type="password" /><br><br>
<input name="address" class="anything" type="text" value="Register"/><br><br>
<input name="btn" id="btn" type="submit" value="Register" />
Hope this helps.
You need to:
query all elements by className
filter the jQuery Collection in order to keep only the elements that have no value
doSomethingElse
so, this maybe could help you:
function CheckEmptyCtrl($) {
'use strict';
var self = this;
self.target = $('.necessarily');
self.empty = self.target.filter(function(index, item) {
return !($(item).val().trim());
});
$('#result').append(self.empty.length + ' elements have no values.');
console.log(self.empty.length, self.empty);
}
jQuery(document).ready(CheckEmptyCtrl);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="result"></div>
<form name="frm" action="#">
<input name="first-name" class="necessarily" type="text" value="notEmpty" /><br><br>
<input name="last-name" class="necessarily" type="text" /><br><br>
<input name="email" class="necessarily" type="email" /><br><br>
<input name="password" class="necessarily" type="password" /><br><br>
<input name="address" class="anything" type="text" /><br><br>
<input name="btn" id="btn" type="submit" value="Register" />
</form>
You need to loop over the all of the inputs and count how many are empty. In the same loop you can also count the number of .necessarily inputs which are empty.
This example will output the result to the .result span.
$("#btn").click(function() {
var inputs = $("form input");
var emptyNecessarilyCount = 0;
var totalEmpty = 0
inputs.each(function() {
if ($(this).val() == "") {
totalEmpty++;
if ($(this).hasClass('necessarily')) {
emptyNecessarilyCount++;
}
}
});
$('.result').append("Total: " + totalEmpty);
$('.result2').append("Necessarily: " + emptyNecessarilyCount);
});
span {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="frm" action="#">
<input name="first-name" class="necessarily" type="text" />
<br>
<input name="last-name" class="necessarily" type="text" />
<br>
<input name="email" class="necessarily" type="email" />
<br>
<input name="password" class="necessarily" type="password" />
<br>
<input name="address" class="anything" type="text" />
<br>
<input name="btn" id="btn" type="submit" value="Register" />
<span class="result"></span>
<span class="result2"></span>
</form>

Categories

Resources