Here is my code:
<input type="text" id="fname">
<input type="button" onclick = "b();" value="change" />
<script>
function b(){
var fanme = document.getElementById('fname');
if(fname.value){
fname.value="";
}else{
fname.value="ffff";
}
</script>
I tried this, but the fname's value sometimes changed when I click the button twice. What's the matter?
On other browsers is OK
Try this : instead of Elements use Element and also close function with }.
function b(){
var fanme = document.getElementById('fname');
if(fname.value){
fname.value="";
}else{
fname.value="ffff";
}
}
Try this,
<input type="text" id="fname">
<input type="button" onclick = "b();" value="change" />
<script>
function b(){
var fanme = document.getElementById('fname').value;
if(fname == "" || fname == null || fname == "null"){
fanme = "Set the value as you want";
}else{
//proceed
}
</script>
Related
I have one simple form which have two fields called first name with id fname and email field with email. I have submit button with id called submit-btn.
I have disabled submit button using javascript like this
document.getElementById("submit-btn").disabled = true;
Now I am looking for allow submit if both of my fields are filled.
My full javascript is like this
<script type="text/javascript">
document.getElementById("submit-btn").disabled = true;
document.getElementById("submit-btn").onclick = function(){
window.open("https://google.com",'_blank');
}
</script>
I am learning javascript and does not know how I can do it. Let me know if someone here can help me for same.
Thanks!
Id propose something like this
Use a block, which encapsulates the names of variables and functions inside the block scope
Make small functions, which do just one thing
Prefer addEventListener over onclick or onanything
There are two types of events you could use on the inputs: input and change. input will react on every keystroke, check will only react, if you blur the input element
I added a check for validity to the email field with checkValidity method
{
const btn = document.getElementById("submit-btn");
const fname = document.getElementById("fname");
const email = document.getElementById("email");
deactivate()
function activate() {
btn.disabled = false;
}
function deactivate() {
btn.disabled = true;
}
function check() {
if (fname.value != '' && email.value != '' && email.checkValidity()) {
activate()
} else {
deactivate()
}
}
btn.addEventListener('click', function(e) {
alert('submit')
})
fname.addEventListener('input', check)
email.addEventListener('input', check)
}
<form>
<input type="text" name="" id="fname">
<input type="email" name="" id="email">
<input type="submit" id="submit-btn" value="Submit">
</form>
This is the simplest solution I can imagine:
myForm.oninput = () => {
btn.disabled = fname.value == '' || email.value == '' || !email.checkValidity();
}
<form id="myForm">
<input type="text" name="" id="fname">
<input type="email" name="" id="email">
<input type="submit" id="btn" value="Submit" disabled>
</form>
Personally, I prefer to use regex to check the e-mail, instead of checkValidity(). Something like this:
/^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/.test(email.value);
I want this to just check if it is correct or not, I am not to smart about HTML so I really would like if someone could explain like im a little kid so I can understand.
Here is the code:
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
var userstate = "false";
var passstate = "false";
function func() {
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
if (utxt == "david")
userstate = "true";
if (ptxt == "lol123")
passstate = "true";
if (userstate == "true" && passstate == "true")
var txt = "Login succesfully";
else
var txt = "Login not succesfull";
}
</script>
You should put your login message in the div with the id txt using:
document.getElementById('txt').innerHtml = "the text";
<!DOCTYPE html>
<html>
<body>
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
var userstate="false";
var passstate="false";
function func()
{
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
if (utxt == "david")
userstate = "true";
if (ptxt == "lol123")
passstate = "true";
if (userstate == "true" && passstate == "true")
document.getElementById('txt').innerHTML = "Login succesfully";
else
document.getElementById('txt').innerHTML = "Login not succesfull";
}
</script>
</body>
</html>
Also
Boolean (true | false) do not require quotes:
You can simply use:
userstate = true;
Or
userstate = fale;
and check them as:
if(userstate == false){}
Several issues
remove the quotes from false and true or use a direct assignment and a ternary like I do below
put the initialisation of the states INSIDE the function, otherwise I can change the names after entering ok names.
output the txt variable
NEVER have password testing in client JS - but I guess you are just playing
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
function func() {
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
var userstate = utxt == "david";
var passstate = ptxt == "lol123";
document.getElementById("txt").innerHTML=(userstate && passstate)?"Login successful": "Login not successful";
}
</script>
Using profiles AGAIN: Do NOT use client based password validations except to keep your kid sister from entering a page.
<input type="text" id="user" value="">
<input type="password" id="pass" value="">
<button type="button" id="btn" onclick="func()">Login</button>
<h1 id="txt"></h1>
<script>
var profiles={ "david":"lol123", "fred":"xdf456"};
function func() {
var utxt = document.getElementById("user").value;
var ptxt = document.getElementById("pass").value;
var success= profiles[utxt] && profiles[utxt]==ptxt; // the name exists and matches the password
document.getElementById("txt").innerHTML=(success)?"Login successful": "Login not successful";
}
</script>
I want to enable my button, when input is filled. I want to do it in pure Javascript.
My code example in HTML:
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
<button type="submit" class="button button-dark" id="send">Send message</button>
</form>
And Javascript:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
function myFunction() {
var nameInput = document.getElementById('name').value;
if (!nameInput === "") {
document.getElementById('send').disabled = "false";
}
}
});
I don't know why my button is not changing to enable state after filling something in input. I have tried diffrent ways to do it, but it's still not working.
Please help.
An input element in HTML is enabled only when the disabled attribute is not present.
In your case disabled is always present in your element, it's just that it has a "false" or a "true" value - but this is meaningless according to the specs (http://www.w3schools.com/tags/att_input_disabled.asp)
So you need to remove it altogether:
document.getElementById('send').removeAttribute('disabled')
The problem with your code is that myFunction() isn't available because you defined it in the eventlistener for click.
Complete refactored code answer:
HTML
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name">
<br>
<button type="submit" class="button button-dark" id="send" disabled>Send message</button>
</form>
JS
document.getElementById("name").addEventListener("keyup", function() {
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
document.getElementById('send').removeAttribute("disabled");
} else {
document.getElementById('send').setAttribute("disabled", null);
}
});
Try this one it will work for you
function myFunction() {
document.getElementById('send').disabled = true;
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
alert("Empty");
document.getElementById('send').disabled = false;
}
}
if you want to check the input should not be contain number then we can use isNaN() function, it will return true if number is not number otherwise return false
Your code is almost correct but you have defined myFunction inside a block, so input is not able to find myFunction() inside onkeyup="myFunction()"
so just keep the same outside of DOMContentLoaded event
see working demo
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
});
function myFunction() {
var nameInput = document.getElementById('name').value;
console.log(nameInput);
if (nameInput === "") {
document.getElementById('send').disabled = true;
} else {
document.getElementById('send').disabled = false;
}
}
How would I fix,"Expected End Of Statement" in the code below?
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
}
</script>
It keeps telling me line 57 which is this line:
<input type="submit" value="Click Me" onClick="substitute();">
Here is the complete HTA link:
http://pastebin.com/fMg5e4RN
Use <form onsubmit="return substitute()" and return true or false depending on validation. Remove type="javascript" or fix it as text/javascript
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return false;
}
// not sure what the following two lines are for
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
return true; // allow submit
}
</script>
and use
<form action="some action" onsubmit="return substitute();">
<input type="text" id="myTextBox"/>
<input type="submit" value="Click Me" />
</form>
I have the following html code:
<form name="Register" action="Register.aspx" method="post" runat="server" style="margin-top: 15px;" onsubmit="return validateProfile(FormName='Register');" >
<p>
Name* : <input id="FirstName" type="text" name="FirstName"/> </p>
<input type="submit">
</form>
And this JS code:
function isEmpty(field) {
return (field == "" || field == null)
}
function validateProfile(FormName) {
var Fname = document.forms[FormName]["FirstName"].value; return false;
var g = (isEmpty(field));
alert(g);
}
The problem is in this line :
var Fname = document.forms[FormName]["FirstName"].value; return
false;
I get this error message :
uncaught typeerror cannot read property 'FirstName' of undefined
If I write instead of the line above this line
document.getElementById("FirstName").value
It works great, so my question is why document.forms[FormName]["FirstName"].value does not work?
document.forms[FormName]["FirstName"] will try to access a property on a javascript HTMLFormElement forms object. The [Id] syntax can only be used on a collection. To access an element with the id FirstName use document.forms[FormName].elements['FirstName'].value
document.forms[name] returns the element, not a mapping input name => value. This would work :
var Fname = document.forms[FormName].getElementsByTagName('Input')[5].value;
return false;
Your validation function has some problem
I don't know why you are using
return false;
after
var Fname = document.forms[FormName]["FirstName"].value;
Try this
function validateProfile(FormName) {
var Fname = document.forms[FormName]["FirstName"].value;
var g = (isEmpty(Fname));
alert(g);
}
I don't know what problem you are facing exactly so I am attaching the complete working cope of the code and tested on chrome and IE as below
<!DOCTYPE html>
<html>
<body>
<form name="Register" action="Register.aspx" method="post" runat="server" style="margin-top: 15px;" onsubmit="return validateProfile('Register');" >
<p>
Name* : <input id="FirstName" type="text" name="FirstName"/> </p>
<input type="submit">
</form>
<script language="javascript">
document.write(document.forms[0].name);
function isEmpty(field) {
return (field == "" || field == null)
}
function validateProfile(formname) {
var Fname = document.forms[formname]["FirstName"].value;
var g = (isEmpty(Fname ));
alert(g);
return false;
}
</script>
</body>
</html>