generating a alphanumeric code using javascript in code generation, by clicking a button in form
Question
Hi I was wondering if it is possible to pass the alphanumeric code (generated by javascript) in to the html textbox by clicking a html button?
So what I mean is, I have a textbox and a button, if I clicked the button it will get the generated code from a java script code and it will be displayed in the textbox...
Here's my code (if you can edit this, please edit the whole code...):
<html>
<head><title> Untitled Document </title></head>
<body>
<script type="text/javascript">
function randomString(length, chars) {
var mask = '';
if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (chars.indexOf('#') > -1) mask += '0123456789';
var result = '';
for (var i = length; i > 0; --i) {
result += mask[Math.round(Math.random() * (mask.length - 1))];
}
return result;
}
document.write(randomString(16, 'aA#'));
</script>
<form>
<label for="gencode"> Generated Code: </label>
<!-- here is the problem I don't know what am I -->
<input type="text" id="gencode" name="gencode">
<!-- going to put on he onclick and on the value -->
<input type="button" value="generate now">
</form>
</body>
</html>
1 answers
solution1
0 2012-09-16 03:42:30
I have to admit, what you're trying to do with the masking and whatnot, I'm just taking your word for it. That's not my area of specialty. However, I think this works out the problem you were having.
Note, IE8 and 7 support node.attachEvent instead of node.addEventListener . IE9 does support node.addEventListener , though. If you need support for those older IE versions, you'll need to do some checking:
if (addEventListener) {
document.addEventListener('click', myClickHandler);
} else if (attachEvent) {
document.attachEvent('onclick', myClickHandler);
}
Note the click and onclick differences.
HTML
<h1>Generate Code</h1>
<form>
<label for="length">Length: </label>
<input type="text" id="length" name="length" value="10">
<label for="characters">Characters: </label>
<input type="text" id="chars" name="chars" value="akdie">
<label for="gencode"> Generated Code: </label>
<input type="text" id="gencode" name="gencode">
<button type="button" id="generate">Generate Now</button>
</form>
Javascript
function randomString() {
var gencode = document.getElementById('gencode'),
length = document.getElementById('length').value,
chars = document.getElementById('chars').value,
mask = '',
result = '';
console.log(length, chars);
if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (chars.indexOf('#') > -1) mask += '0123456789';
for (var i = length; i > 0; --i) {
result += mask[Math.round(Math.random() * (mask.length - 1))];
}
console.log(result);
gencode.value = result;
}
window.addEventListener('load', function load(){
document.getElementById('generate').addEventListener('click', randomString);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.