I want a button to be disabled when it is clicked. Here is my code:
var disable = function(form_name,btn_name) {
document.form_name.btn_name.disabled = true;
}
This is how disable() is called:
<form name = 'form1'>
<input name = 'btn1' type = 'button' disabled = false onclick = 'disable("form1","btn1")' />
</form>
This code does not work. Does anyone know why?
Because
document.form_name.btn_name.disabled = true;
is the same as doing
document['form_name']['btn_name'].disabled = true;
You need to do
document[form_name][btn_name].disabled = true;
You can't use the dot notation with variable name, You should use the array notation:
var disable = function(form_name,btn_name) {
document[form_name][btn_name]["disabled"] = true;
}
How about just:
onclick = 'this.disabled = true;'
You can just do
<form name='form1'>
<input name='btn1' type='button' disabled='false' onclick='this.disabled = true' />
</form>
Related
I need to create a button that works like this :
var i = true
first click --> var i = false
second click --> var i = true
....
HTML
<input type="button" value="test" onclick="stop(); start();" />
How can i specify theese functions in my JS document ?
you can toggle a boolean by doing this :
var b = true;
b = !b
in your case use :
<input type="button" value="test" onclick="b = !b;" />
it's better to doing this with a function
var b = true;
function toggle () { b = !b; console.log(b) }
and in your html
<input type="button" value="test" onclick="toggle();" />
You can do it like this
<input type="button" value="test" />
And the javascript code.
var btn = document.getElementsByTagName('input')[0];
var i = true;
btn.addEventListener('click', function() {
if (i == true)
i = false;
else
i = true;
});
make a counter for clicks
var countClick= 0
if (countClick== 1) {
//do the first click code
}
if (countClick== 2) {
//do the second click code
}
You can simply associate a function call on onclick event and then toggle the boolean value:
var i = true;
function clicked () {
//toggle the value
i = !i;
console.log(i);
}
<input type="button" value="test" onclick="clicked();" />
Here is a snippet that does what you want. You can have it toggle forever or just the one time like your example.
var buttonClicks = 0;
var boolValue = true;
var boolValueOutput = document.getElementById("boolValue")
boolValueOutput.innerHTML = boolValue;
function onButtonClick()
{
buttonClicks++;
// If you want it to only work once uncomment this
//if (buttonClicks > 2)
// return;
boolValue = !boolValue;
boolValueOutput.innerHTML = boolValue;
}
<input type="button" value="test" onclick="onButtonClick();" />
<p id="boolValue"></p>
I'm writing a piece of HTML and JavaScript code and I need to check if inputs have been filled before clicking the button. However, when I leave them blank, it proceeds to the php page passing the variables empty.
I have made some tests and I've concluded it does not load the onClick function at all.
This is the code (without all the CSS stuff):
<div class = "register">
<form action = "register.php" method = "post" name = "reg1" id = "register" onClick = "return validateForm();">
<input type = "text" class = "reg" id = "name" name = "name"/>
<div class = "alert" id = "inserthere1"> </div>
<input type = "text" class = "reg" id = "surname" name = "surname"/> <div class = "alert" id = "inserthere2"></div>
<input type = "text" class = "reg" id = "mail" name = "mail" /><div class = "alert" id = "inserthere3"></div>
<input type = "submit" value = "Join!" >
</form>
</div>
<script language = "JavaScript">
function validateForm() {
var n = document.getElementById("name").value;
var c = document.getElementById("surname").value;
var m = document.getElementById("mail").value;
alert("Nome:"+n+"Cognome:"+c+"Mail:"+m);
document.getElementById("inserthere1").innerHTML = (n===null || n==="" ? '<i> This cannot be left empty. </i>' : '');
document.getElementById("inserthere2").innerHTML = (c===null || c==="" ? '<i> This cannot be left empty. </i>' : '');
document.getElementById("inserthere3").innerHTML = (m===null || m==="" ? '<i> This cannot be left empty. </i>' : '');
if ( n===null || c===null || n==="" || c==="" || m===null || m==="" )
return false;
}
return true;
}
So you want to make sure the fields are filled in before proceeding? You can use:
<input required="">
This way the user has to fill out the fields with required="", or their browser won't let them submit the form.
You have to use the preventDefault on the submit event or use a button instead a input, after that you have to use the onclick event on the button, not into the form that will validate if the inputs has been filled or not.
After you validate the form you can use this for submit your form
document.getElementById("myForm").submit();
That will send the form data to the action script.
Ref: preventDefault Documentation | W3CSchools
Ref2: Form Submit method | W3CSchools
try using
<form>..</form>
document.addEventListener('click', validateForm, false);
<script language = "JavaScript">
function validateForm() {
..
</script>
I'm trying to set a password input as required in JavaScript.
I have learnt from this post how to do it but it doesn't seem to work with my password input.
<div class = "login">
<input type = "password" class = "enterPassword">
<button class = "submit">Submit</button>
</div>
var p = document.querySelector(".enterPassword");
p.required = true;
p.style.backgroundColor = "gray";
var s = document.querySelector(".submit");
s.addEventListener("click", clickHandler.bind(p));
function clickHandler() {
console.log("Password: " + this.value);
}
jsfiddle
Although I do,
var p = document.querySelector(".enterPassword");
p.required = true;
as you can see, there is no required popup when a user fails to enter a password. Does anyone know why not?
Wrap the elements in a form
<form>
<input type = "password" class = "enterPassword">
<button class = "submit">Submit</button>
</form>
You can also check it without using form
document.querySelector(".enterPassword").validity.valid
this will return a Boolean value , but you wont see the error pop up
JSFIDDLE
I've looked over a number of posts that are similar to my query, but in general, they are not helping me. I think part of my problem is that I am so new to JavaScript that a lot of the previous posts are too complicated for me. I have the simple code below, but it does not seem to work. I do not get my alerts, and I do not think the form is being submitted even when the function should be returning "true." I checked the Error Console, and there are no errors. Can someone help?
JavaScript:
function submit()
{
var age = document.Message.Age.value;
if (age > 39)
{
alert("You're old.");
return false;
}
else
{
alert("You're young!");
return true;
}
}
HTML:
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="button" name = "Submit" value = "Submit">
</FORM>
Change your HTML to
<FORM id = "Message" name = "Message" method = "post" action = "http://cnn.com" onsubmit = "return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit">
</FORM>
Note that the input type has been changed to 'submit', so that the submission actually takes place.
I doubt your javascript function itself is being called or not. If not, I think you need to move you onsubmit to <body> tag from <form> tag.
as
<body onsubmit"return submit();">
Also either change your button to either type as submit or add an onClick() event below:
<INPUT type="submit" name = "Submit" value = "Submit"/>
or
<INPUT type="button" name = "Submit" value = "Submit" onClick="submit()"/>
Below is the full working code(in chrome and IE8) sample:
<Html>
<head>
<script language="javascript">
function submit(){
var age = document.Message.Age.value;
if (age > 39){
alert("You're old.");
return false;
}else{
alert("You're young!");
return true;
}
}
</script>
</head>
<body>
<FORM id = "Message" name = "Message" method = "post"
action = "http://cnn.com" onSubmit = "javascript:return submit();">
First Name: <INPUT type = "text" name = "Fname"/><br>
Age: <INPUT type = "text" name = "Age"/><br>
<INPUT type="submit" name = "Submit" value = "Submit"/>
</FORM>
</body>
</html>
I found this fiddle and I am trying to get it to work...I can not figure out why the names are not being added to the list, for some reason Add button is acting like a submit button and I can not tell why...It should add all the numbers to a list so when I click submit, then it should send the numbers in an array..
JavaScript:
function bindName() {
var inputNames = document.getElementById("names").getElementsByTagName("inputNames");
for (i = 0; i < inputNames.length; i++) {
inputNames[i].onkeydown = function() {
if (this.value == "") {
setTimeout(deletename(this), 1000);
}
}
}
}
document.getElementById("addName").onclick = function() {
var num1 = document.getElementById("name");
var myRegEx = /^[0-9]{10}$/;
var myRegEx = /^[0-9]{10}$/;
var itemsToTest = num1.value;
if (myRegEx.test(itemsToTest)) {
var form1 = document.getElementById("names");
var nameOfnames = form1.getElementsByTagName("inputNames").length;
var newGuy1 = document.createElement("inputNames");
newGuy1.setAttribute("id", nameOfnames);
newGuy1.setAttribute("type", "text");
newGuy1.setAttribute("value", num1.value);
form1.appendChild(newGuy1);
num1.value = "";
bindName();
}
else {
alert('error');
}
};
HTML:
<h1>Enter Name</h1>
<div id="mainName">
<h2>name</h2>
<label for="name">Add Names: </label>
<input id="name" type="text">
<button id="addName">Add</button>
<form>
<div id="names">
</div>
<input METHOD="POST" action="text.php" type="submit" value="Submit">
</form>
</div>
I've seen
document.createElement("inputNames");
Shouldn't be
document.createElement("input");
?
Because this /^[0-9]{10}$/; will accept only 10 numbers and only that, try entering 1234567890 and you will see no error.
I'm not sure why your "name" field is restricted to 10 digit numbers, but I've got the thing to work.
http://jsfiddle.net/y8Uju/4/
I think the problem was that you were trying to create an element with the tag name inputNames, but that's not a valid tag. Instead I changed it to create inputs, and set the class to inputNames.