I want to be able to type a word into the text box and then click a button underneath which will issue an alert if the number of letters is below 5.
Type in words to see how long they are: <input type="text" id="txtBox" name="txtBox" value="banter"/>
<button onclick="myFunction()">Try It</button>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById['txtBox'];
if (x.length < 5) {
alert('please enter at least 5 characters');
return false;
}
}
</script>
Here x is an element not a value
So change the x.length to x.value.length
Type in words to see how long they are: <input type="text" id="txtBox" name="txtBox" value="banter"/>
<button onclick="myFunction()">Try It</button>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById('txtBox');
if (x.value.length < 5) {
console.log(x.length);
alert('please enter at least 5 characters');
}
}
</script>
Make your var x = document.getElementById['txtBox']; to var x = document.getElementById('txtbox');
Two things: functions are called with (), not [], and you need to check the length of the element's value rather that of the element itself.
function myFunction() {
var element = document.getElementById('txtBox');
if (x.value.length < 5) {
alert('please enter at least 5 characters');
return false;
}
}
Please, make the following change in your code and it will work:
var x = document.getElementById('txtBox').value;
Related
How do I enable input2 if enable 1 has input within it (basically re-enabling it), I'm still a beginner and have no idea to do this.
<form id="form1">
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2" disabled="disabled">
<script language="javascript">
function valid() {
var firstTag = document.getElementById("text1").length;
var min = 1;
if (firstTag > min)
//if the text entered is longer than 1 alert to screen
{
//enable the text2 tag
}
}
//once input from text1 is entered launch this function
</script>
</form>
if i understand your question correctly, you want to enable the second input as long as the first input have value in it?
then use dom to change the disabled state of that input
if(firstTag > min)
//if the text entered is longer than 1 alert to screen
{
//enable the text2 tag
document.getElementById("text2").disabled = false;
}
Please try this code :
var text1 = document.getElementById("text1");
text1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("text2").disabled = false;
} else {
document.getElementById("text2").disabled = true;
}
}
<input type="text" id="text1">
<input type="text" id="text2" disabled="disabled">
I think you should use .value to get the value. And, then test its .length. That is firstTag should be:
var firstTag = document.getElementById("text1").value.length;
And, the complete function should be:
function valid() {
var min = 1;
var firstTag = document.getElementById("text1");
var secondTag = document.getElementById("text2");
if (firstTag.length > min) {
secondTag.disabled = false
} else {
secondTag.disabled = true
}
}
Let me know if that works.
You can use the .disabled property of the second element. It is a boolean property (true/false).
Also note that you need to use .value to retrieve the text of an input element.
Demo:
function valid() {
var text = document.getElementById("text1").value;
var minLength = 1;
document.getElementById("text2").disabled = text.length < minLength;
}
valid(); // run it at least once on start
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2">
I would just change #Korat code event to keyup like this:
<div>
<input type="text" id="in1" onkeyup="enablesecond()";/>
<input type="text" id="in2" disabled="true"/>
</div>
<script>
var text1 = document.getElementById("in1");
text1.onkeyup = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("in2").disabled = false;
} else {
document.getElementById("in2").disabled = true;
}
}
</script>
I tried to create my own so that I could automate this for more than just two inputs although the output is always set to null, is it that I cannot give text2's id from text1?
<div id="content">
<form id="form1">
<input type="text" id="text1" onkeyup="valid(this.id,text2)">
<input type="text" id="text2" disabled="disabled">
<script language ="javascript">
function valid(firstID,secondID){
var firstTag = document.getElementById(firstID).value.length;
var min = 0;
if(firstTag > min)
//if the text entered is longer than 1 alert to screen
{
document.getElementById(secondID).disabled = false;
}
if(firstTag == 0){
document.getElementById(secondID).disabled = true;
}
}
//once input from text1 is entered launch this function
</script>
</form>
First, you have to correct your code "document.getElementById("text1").length" to "document.getElementById("text1").value.length".
Second, there are two ways you can remove disabled property.
1) Jquery - $('#text2').prop('disabled', false);
2) Javascript - document.getElementById("text2").disabled = false;
Below is the example using javascript,
function valid() {
var firstTag = document.getElementById("text1").value.length;
var min = 1;
if (firstTag > min) {
document.getElementById("text2").disabled = false;
}
else
{
document.getElementById("text2").disabled = true;
}
}
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2" disabled="disabled">
If I understand you correctly, what you are asking is how to remove the disabled attribute (enable) from the second input when more than 1 character has been entered into the first input field.
You can to use the oninput event. This will call your function every time a new character is added to the first input field. Then you just need to set the second input field's disabled attribute to false.
Here is a working example.
Run this example at Repl.it
<!DOCTYPE html>
<html>
<body>
<!-- Call enableInput2 on input event -->
<input id="input1" oninput="enableInput2()">
<input id="input2" disabled>
<script>
function enableInput2() {
// get the text from the input1 field
var input1 = document.getElementById("input1").value;
if (input1.length > 1) {
// enable input2 by setting disabled attribute to 'false'
document.getElementById("input2").disabled = false;
} else {
// disable input2 once there is 1 or less characters in input1
document.getElementById("input2").disabled = true;
}
}
</script>
</body>
</html>
NOTE: It is better practice to use addEventListener instead of putting event handlers (e.g. onclick, oninput, etc.) directly into HTML.
I have set up a user input box to enter a number (1 through 3) to show that many FAQS on my site. I also would like to use a form validation to inform the user that they have left the input box empty. The array prints just fine with the user input, but the form validation does not throw an alert when the input box is left empty.
Here is the HTML:
<div id="block3"><br/><br/>
<a name="FAQs"><img id="img2" src="pic2.JPG" alt="Computer" />
<h2>FAQs</h2></a>
<p id="p01">
Enter a number (up to 3):
<input type="text" id="FAQS_list" placeholder="Enter Number Here" />, and
<button value="Click" onclick="listFAQS()" onSubmit="return validateForm()">Click</button> to see that many Frequently Asked Questions.<br/><br/><br/></p>
<p id="FAQS"></p>
<script src="expExternal.js" type="text/javascript"></script>
and here is the Javascript
function listFAQS() {var arrayFAQ = ["FAQ1", "FAQ2", "FAQ3"];
var n = document.getElementById('FAQS_list').value;
var x = 0;
var text = "";
while (x < n) {
text += arrayFAQ[x] + "<br>";
x++;}
document.getElementById('FAQS').innerHTML = text;
}
// Form Validation
function validateForm() {
var y = document.getElementById("FAQS_list").value;
if (y == "") {
alert("Please enter a number.");
return false;
}
}
Any help would be greatly appreciated!
First, you have to control size of your arrayFAQ before or in while loop statment, otherwise your list contain additional n-3 number of undefined.
while ( n <= arrayFAQ.length && x < n ) {
text += arrayFAQ[x] + "<br>";
x++;
}
If you want add new elements to the array arrayFAQ and display them all,
add one if block after
var n = document.getElementById('FAQS_list').value;
like this
if (isNaN(n)) {
arrayFAQ.push(n);
n = arrayFAQ.length;
}
You need to use the form tag and onsubmit event handler.
Modify the type of the button to submit.
Please see the code below for reference:
function listFAQS() {
var arrayFAQ = ["FAQ1", "FAQ2", "FAQ3"];
var n = document.getElementById('FAQS_list').value;
var x = 0;
var text = "";
while (x < n) {
text += arrayFAQ[x] + "<br>";
x++;
}
document.getElementById('FAQS').innerHTML = text;
}
// Form Validation
function validateForm() {
var y = document.getElementById("FAQS_list").value;
if (y == "") {
alert("Please enter a number.");
return false;
}
}
<form onsubmit="return validateForm()" action="/" method="post">
<a name="FAQs">
<img id="img2" src="pic2.JPG" alt="Computer" />
<h2>FAQs</h2>
</a>
<p id="p01">
Enter a number (up to 3):
<input type="text" id="FAQS_list" placeholder="Enter Number Here" />, and
<button type="submit" value="Click" onclick="listFAQS()">Click</button> to see that many Frequently Asked Questions.<br /><br /><br />
</p>
<p id="FAQS"></p>
</form>
I want to create a randomly generated number, ask the user to enter a number, then compare the two and then show a popup telling whether or not they match. This is my code
function myFunction() {
var num=document.getElementById("demo").innerHTML = Math.floor(1000 + Math.random() * 9000);
}
function myFunction1() {
var secondInput = document.getElementById("demo1").value;
if( num === secondInput)
{
window.alert("Same");
}
else
{
window.alert("Don't do that again cvv");
}
<button onclick="myFunction()">press the button to see the code</button>
<p id="demo"></p>
code: <input type="text" name="code" required/><br/><br/>
<button onclick="myFunction1()">Compare</button>
<p id="demo1"></p>
This code works. Please know that there were a couple of improvements:
You referenced to myFunction() before the javascript is loaded.
You need to keep the var num in global scope if you want to reference it in other places, without passing them as an argument.
When comparing values, make sure to select the right input field and to convert the value string to a Number.
var num;
function myFunction() {
num=document.getElementById("demo").innerHTML = Math.floor(1000 + Math.random() * 9000);
}
document.getElementById("button1").addEventListener('click', myFunction)
document.getElementById("button2").addEventListener('click', myFunction1)
function myFunction1() {
var secondInput = document.getElementById("demo1").value;
if( num === +secondInput) {
window.alert("Same");
}
else {
window.alert("Don't do that again cvv");
}
}
<button id="button1" >press the button to see the code</button>
<p id="demo"></p>
code: <input id="demo1" type="text" name="code" required/><br/><br/>
<button id="button2">Compare</button>
<p></p>
First you have to define num in the global scope to be accessable by the two functions and you have to make the first function just show the number without generating a new number every time.
var num;
function show() {
document.getElementById("demo").innerHTML = num;
}
function randomizeAndCompare() {
num = Math.floor(1000 + Math.random() * 9000);
var secondInput = document.getElementById("demo1").value;
if( num === secondInput){
window.alert("Same");
}
else{
window.alert("Don't do that again cvv");
}
}
<button onclick="show()">press the button to see the code</button>
<p id="demo"></p>
code: <input type="text" name="code" required/><br/><br/>
<button onclick="randomizeAndCompare()">Compare</button>
<p id="demo1"></p>
There are a couple of tings here.
First, myFunction1() isn't closed. You should also rename it to something more meaningful, like "compareValue()". That way it is easier to read the code.
You also aren't making a comparison of the two numbers in your compareValue()-function. Your 'num' variable isn't defined. You are also trying to extract the user input value from the button.
See my suggestion for changes:
function generateRandom() {
document.getElementById("demo").innerHTML = Math.floor(1000 +
Math.random() * 9000);
}
function compareValues() {
var num = document.getElementById("demo").innerHTML;
var input = document.getElementById("number").value;
if( num === input)
{
window.alert("Same");
}
else
{
window.alert("Don't do that again cvv");
}
}
HTML:
<button onclick="generateRandom()">press the button to see the code</button>
<p id="demo"></p>
code: <input id="number" type="text" name="code" required/><br/><br/>
<button onclick="compareValues()">Compare</button>
<p id="demo1"></p>
I want to set a minimum number of text that is written in a text box.
Normally we use the min property of html. But I don't want it.
Can anybody help me with the JavaScript code which check the number of text written in a text box and if it is lesser than 7 and greater than 21 an alert box would be shown. Or else it wont
<input type="text" id="txt">
<input type="button" onClick="myFunction()">
Js
function myFunction() {
.....
}
I know only this much.
Please help
You can use pattern attribute of HTML5
This will set minimum characters required to 1 and max characters required
to 15
<input type="text" id="txt" pattern="[a-z]{1,15}>
function myFunction() {
if ($('#txt').val().length < 21 && $('#txt').val().length > 7) alert("yez");
}
$('button').on('click', function() {
myFunction()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt">
<button>click</button>
this should work - it checks the length of the content in your #txt HTML element. If its greater than 7 and smaller than 21 it will alert yez
i added snippet which is counting only number of real 'words' empty spaces are omitted.
function wordCount(text) {
totalCount = 0;
words = text.split(' ')
words.forEach(function(word) {
if (word.length > 0) {
totalCount++;
}
})
return totalCount;
}
window.myFunction = function() {
textarea = document.getElementById('txt');
words = wordCount(textarea.value);
if(words < 7 || words > 21) {
alert('Wrong number of words');
}
}
<input type="text" id="txt">
<input type="button" onClick="myFunction()" value="Submit">
You can trigger an event on blur that means, when the text box loses focus
$(document).ready(function(){
$('#text-box').blur(function(){
var value = $('#text-box').val();
if(value.length < 7 || value.length > 21){
alert("Invalid length");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text-box">
function validate(){
x=document.myForm
input=x.myInput.value
if (input.length>5){
alert("The field cannot contain more than 5 characters!")
return false
}else {
return true
}
}
My if-else is not working, I think that I have a variable issue. When I look at the value of x it is not what is entered in the text field. Any Ideas?
function guess() {
var x = document.getElementById("magic");
var word = "please";
if (x == word) {
alert("You entered the magic word!");
} else {
alert("Please try again!");
}
}
<form>
What is the magic word?<br />
<input type="text" id="magic" onchange="guess()" />
</form>
You're not getting the value. Use this:
var x =document.getElementById("magic").value;
You want:
var x = document.getElementById("magic").value;
Also, onchange won't work, you'll need to use onkeyup, although onblur is probably more sane:
What is the magic word?<br />
<input type="text" id="magic" onblur="guess()" />
function guess() {
var x = document.getElementById("magic").value;
var word = "please";
if (x == word) {
alert("You entered the magic word!");
} else {
alert("Please try again!");
}
}
http://jsfiddle.net/6uAhq/
You need to check against the actual value of the "magic" element, e.g.:
var x = document.getElementById("magic").value;
I'm assuming "magic" is an input.