Develop Reference

Button not enable right click and copy paste some text

I'm added text type and button enable disable function , but when I right click and copy paste button not enable , any solution for this?
Thanks
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
} else {
bt.disabled = true;
}
}
<input type="text" id="txt" onkeyup="manage(this)" />
<input type="submit" id="btSubmit" disabled />

You could do with oninput event.
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
} else {
bt.disabled = true;
}
}
<input type="text" id="txt" oninput="manage(this)" />
<input type="submit" id="btSubmit" disabled />

In that case you need to use onpaste event.
document.getElementById("txt").onpaste = manage;
function manage(txt) {
var bt = document.getElementById('btSubmit');
if (txt.value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
<input type="text" id="txt" onkeyup="manage(this)" />
<input type="submit" id="btSubmit" disabled />
More info about that event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste

javascript onChange event listener not working for input form

When I make this button:
<div id="Input #1">
<label for="input1">Input #1:</label>
<input type="number" id="input1" name="input1" onchange="i1set()">
</div>
And then have this JavaScript:
var i1 = undefined;
var i1set = function(){
i1 = document.getElementById("input1").value;
}
var solution = parseFloat(i1)+parseFloat(i2);
alert(solution);
It works no problem.
But, when I eliminate the onchange part of the html, and instead create an event listener in js, then I get problems. One of the problems is that having parseFloats give me "NaN" instead of a number answer... but the bigger problem is that even when I get rid of parseFloats, even with subtraction, addition, division, it gives me weird incorrect answers.
Below is my current code that no longer works:
<form>
<input type="radio" id="addition" name="addition" value="addition"><label>Addition</label><br>
<input type="radio" id="subtraction" name="subtraction" value="subtraction"><label>Subtraction</label><br>
<input type="radio" id="multiplication" name="multiplication" value="multiplication"><label>Multiplication</label><br>
<input type="radio" id="division" name="division" value="division"><label>Division</label><br>
<div id="Input #1">
<label for="input1">Input #1:</label>
<input type="number" id="input1" name="input1">
</div>
<div id="Input #2">
<label for="input2">Input #2:</label>
<input type="number" id="input2" name="input2">
</div>
<input type="submit" id="submit" value="Solve" />
</form>
<script>
var i1 = undefined;
var i2 = undefined;
var i1set = function(){
i1 = document.getElementById("input1").value;
}
var i2set = function(){
i2 = document.getElementById("input2").value;
}
var solve = function(){
if ( (i1 != undefined) && (i2 != undefined) ) {
if(document.getElementById('addition').checked) {
var solution = parseFloat(i1)+parseFloat(i2);
alert(solution);
}
if(document.getElementById('subtraction').checked) {
var solution = i1-i2;
alert(solution);
}
if(document.getElementById('multiplication').checked) {
var solution = i1*i2;
alert(solution);
}
if(document.getElementById('division').checked) {
var solution = i1/i2;
alert(solution);
}
}
}
document.getElementById("input1").addEventListener("change", i1set(), false);
document.getElementById("input2").addEventListener("change", i2set(), false);
document.getElementById("submit").addEventListener("click", solve, false);
</script>
</body>
</html>

The problem is that empty string is not equal to udnefined so this checkes:
if ((i1 != undefined) && (i2 != undefined)) {
behave not the way you expect. The if block can be simpler:
if (i1 && i2) { // or i1 !== '' && i2 !== ''
The second problem is that you need to provide function reference as event listener, not execute it immediately with ():
document.getElementById("input1").addEventListener("change", i1set, false);
// Note, you don't need () here ------^

Enable/disable button based on accepting the 2 checkbox conditions

I have gone through the stackoverflow regarding enable/disable button conditionally and was able to find some help but NOT EXACT what I was looking for.
Instead of 1 checkbox condition, I have 2 checkbox conditions. So unless if the two checkboxes have been accepted, the button should not be enabled.
Following is my html:
<input type="checkbox" id="f_agree" value="1" onchange="checked(this, 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checked('f_agree', this)"/>
<button type="submit" disabled="disabled" id="acceptbtn">Continue</button>
Following is javascript:
function checked(element1, element2) {
var myLayer = document.getElementById('acceptbtn');
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.disabled = "";
} else {
myLayer.class = "button:disabled";
myLayer.disabled = "disabled";
};
}
I have tried like above, but it is not working. I don't know where I am going wrong.

it won't work because you are not removing that attribute disabled.
function checked(element1, element2) {
var myLayer = document.getElementById('acceptbtn');
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled","disabled");
};
}
Update
use any other name then checked as it seems to be reserved and not working.
you also need to do getElementById for element1 and element2.
function checkedFunc(element1Id, element2Id) {
var myLayer = document.getElementById('acceptbtn');
var element1 = document.getElementById(element1Id);
var element2 = document.getElementById(element2Id);
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled","disabled");
};
}
<input type="checkbox" id="f_agree" value="1" onchange="checkedFunc('f_agree', 'f_agree2')"/>
<input type="checkbox" id="f_agree2" value="1" onchange="checkedFunc('f_agree','f_agree2')"/>
<input type="button" value="check" id="acceptbtn" />

You can try the following code
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled", "disabled");
};

With jQuery:
var btn;
var changed = function() {
//get the length of non checked boxes
var disbl = $('input[id^=f_agree]:not(:checked)').length;
btn.prop('disabled', disbl);//disable if true, else enable
};
$(function() {
btn = $('#acceptbtn');
$('input[id^=f_agree]').on('change', changed).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="f_agree" value="1" />1
<input type="checkbox" id="f_agree2" value="1" />2
<input type="button" id="acceptbtn" value="Submit" />

The problem is that there is a difference between the string "f_agree" and the node with id="f_agree".
Your code should work as expected with
checked(this, document.getObjectById('f_agree2'))
Much better would be however to avoid having a widget knowing about the other... I'd implement instead by adding a list of external rules that check all widgets:
function okSubmit() {
return (document.getElementById("f_agree").checked &&
document.getElementById("f_agree2").checked);
}
This is much easier to read/maintain and also scales better in case you need to add more conditions later. In the onchange of all the widgets just call a function that will enable/disable the submit button depending on the conditions.

Try this
if (element1.checked == true && element2.checked == true) {
myLayer.class = "submit";
myLayer.removeAttribute("disabled");
} else {
myLayer.class = "button:disabled";
myLayer.setAttribute("disabled", "disabled");
};

Try the below code -
var chk1 = document.getElementById('chk1');
chk1.addEventListener('click', checked, false);
var chk2 = document.getElementById('chk2');
chk2.addEventListener('click', checked, false);
function checked(){
if(chk1.checked && chk2.checked) {
document.getElementById('btn').removeAttribute('disabled');
} else {
document.getElementById('btn').setAttribute('disabled','disabled');
}
}
<input type="checkbox" id="chk1" />
<input type="checkbox" id="chk2" />
<button id="btn" disabled >Button<button>
I tested it and it's working! Hope it helps u...

Javascript - Not Reversing the show/hide

I have created a fiddle
Would like to have the user hit 'yes' and it show the # field and then hit 'no' to hide it. Do I need another function on the 'no' to do this?
var empNumber, radios;
function showReqEmp() {
if (!radiosChecked()) {
empNumber.style.display = 'none';
} else {
empNumber.style.display = 'block';
}
}
function showReqEmp(id) {
var a = document.getElementById(id);
if (!radiosChecked())
a.style.display = 'none';
else
a.style.display = 'block';
}
function radiosChecked() {
var radios = document.getElementsByName('returning_employee');
for (var i = 0; i < radios.length; i++)
if (radios[i].checked) return true;
return false;
}
showReqEmp('requiredNum');
showReqEmp('requiredNumText');
<font color="Red">*</font>Returning Employee:</td>
<input type="radio" name="returning_employee" value="Yes" onclick="showReqEmp('requiredNum'); showReqEmp('requiredNumText')">Yes
<input type="radio" name="returning_employee" value="No" onclick="showReqEmp('requiredNumText'); showReqEmp('requiredNum')" />No
<lable id="requiredNumText" style="display:none"><font color="Red">*</font>Employee Number:</lable>
<lable id="requiredNum" style="display:none">
<input type="text" id="employee_number" name="employee_number" placeholder="123456789">
Ok so now I ran into this issue with the validation.
Fiddle2
The show/hide works but i cant get the validation to check if they entered data after hitting 'yes'
var numberExp = /^[0-9\-]+$/;
function validate()
{
if(document.newempRequest.returning_employee.checked && !(document.newempRequest.employee_number.value.match(numberExp)))
{
alert("Please provide the employee number");
document.newempRequest.employee_number.focus();
return false;
}
return true;
}
I have tried to alter the input tags to differ the yes/no but that breaks the show/hide
The HTML code is same as above.

Simply modify the radiosChecked function to return true only if the Yes checkbox is checked.
function radiosChecked() {
var radios = document.getElementsByName('returning_employee')[0];
return radios.checked;
}
The original Code:
var radios = document.getElementsByName('returning_employee');
for (var i = 0; i < radios.length; i++)
if (radios[i].checked) return true;
return false;
Would return true even if any of the check box in the group is checked. Hence the toggling would not happen.

You can do it CSS-only, without JS:
#requiredNum {
display: none;
}
#returning_employee_yes:checked ~ #requiredNum {
display: block;
}
*Returning Employee:
<input type="radio" name="returning_employee"
id="returning_employee_yes" value="Yes" />
<label for="returning_employee_yes">Yes</label>
<input type="radio" name="returning_employee"
id="returning_employee_no" value="No" />
<label for="returning_employee_no">No</label>
<label id="requiredNum">
*Employee Number:
<input type="text" id="employee_number"
name="employee_number" placeholder="123456789" />
</label>

how to check radio buttons with javascript

this is my code in html:
<input type="radio" name="sex" id="boy" value="male" /> Boy<p></p><br>
<input type="radio" name="sex" id="girl" value="female" />Girl
<button id="fine" type="button">Submit</button>
and this is in my javascript file:
var maskio = document.getElementById('boy');
var femmna = document.getElementById('girl');
function prima(){
var fine = document.getElementById('fine');
fine.onclick=chek;
}
function chek(){
if((maskio.checked == false) && (femmna.checked == false)) {
alert('lol');
return false;
}
}
window.onload=prima;
Where is the problem? When i run it and click Submit nothing happens. Why?

Change your JS as follows. The elements were not created by the time you were getting them.
function prima() {
var fine = document.getElementById('fine');
fine.onclick = chek;
}
function chek() {
var maskio = document.getElementById('boy');
var femmna = document.getElementById('girl');
if ((maskio.checked == false) && (femmna.checked == false)) {
alert('lol');
return false;
}
}
window.onload=prima;
Check here: jsFiddle

The issue is your html tags, there is a space "< " remove the space and it will work fine...
<input type="radio" name="sex" id="boy" value="male" /> Boy
<p></p><br>
<input type="radio" name="sex" id="girl" value="female" /> Girl
<button id="fine" type="button">Submit</button>
<script>
var maskio = document.getElementById('boy');
var femmna = document.getElementById('girl');
function prima()
{
var fine = document.getElementById('fine');
fine.onclick=chek;
}
function chek()
{
if(maskio.checked)
{
alert("You are male Eh?");
}
else if(femmna.checked)
{
alert("Femal ;)");
}
else if(!maskio.checked && !femmna.checked)
{
alert("Come on Please check something!");
}
}
window.onload=prima;
</script>

when radio-buttons have the same name, they belong to the group of the name. That means, only one radio-button in a group can be selected. If you check both, there won't be a result, anyway !