Develop Reference

Enable submit button only if inputs have data

I've looked through numerous topics regarding this, but none of the solutions are fitting my need. I need to enable the submit button only if there is data going to be submitted, and disable it again if there is no data.
$("input").each(function() {
$(this).keyup(function() {
console.log("keyup event fired");
$("input").each(function() {
if ( $(this).val() !== "" ) {
empty = false;
} else {
empty = true;
}
});
if ( empty ) {
$("#download-project").addClass("isDisabled");
$("#download-project").click(function(e) {
e.preventDefault();
});
} else {
$("#download-project").removeClass("isDisabled");
$("#download-project").click(function(e) {
e.preventDefault();
$(".editor-form").submit();
});
}
});
});
My current code only enables the button, and than the if the user deletes the data, it doesn't disable the button. Looking at the console it also seems keyup is only firing once.
JSFiddle

You can add an input event listener to each of the input tags, which will fire when the value has been changed, and check if any of the input tags has a value that is only spaces.
const inputs = $('input'), downloadBtn = $('#download-project');
inputs.on('input', function(e){
var invalid = inputs.is(function(index, element){
return !$(element).val().trim();
});
if(invalid){
downloadBtn.addClass("isDisabled").prop("disabled", true);
} else {
downloadBtn.removeClass("isDisabled").prop("disabled", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
First Name: <input type="text"/><br/>
Last Name: <input type="text"/><br/>
Age: <input type="number"/><br/>
<button id="download-project" type="submit" disabled>
Submit
</button>
</form>

Try to put change event listener instead of keyup.
$("input#submit").prop("disabled", true);
let isOk = true;
$("input").change(function (){
$("input").each(()=>{
console.log(this);
if($(this).val() === "") {
isOk = false;
}
});
if(isOk) $("input#submit").prop("disabled", false);
})
Test: https://codepen.io/Opalecky/pen/xxwWmyJ

JS Event Listener on Dynamic Buttons

Wondering why when adding more than 1 dynamic button their toggle bg color listener won't work consistently.
If I add let's say 3 buttons, listener for button 1 & 3 will work while button 2 won't.
//document.ready
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
//event listener on dynamic buttons not in DOM
ready(function() {
document.querySelector('.makeB').addEventListener('click', function() {
var btn = document.createElement("button");
var t = document.createTextNode("toggle bg");
btn.appendChild(t);
document.body.appendChild(btn);
btn.classList.add('elis');
var newBtns = document.querySelectorAll('.elis');
newBtns.forEach(function(i) {
i.addEventListener('click', function() {
document.body.classList.toggle('bg');
})
})
})
})
.bg {
background: red;
}
<button class="makeB">create button</button>
Researched a bit of bubbling & event delegation options to see if that would help (similar to jquery approach $(document).on( eventName, selector, function(){} ); but no luck)
How to make dynamic buttons work consistently and what's the issue with the current scenario?
JS only please (no jQuery).

//document.ready
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
//event listener on dynamic buttons not in DOM
ready(function() {
document.querySelector('.makeB').addEventListener('click', function() {
var btn = document.createElement("button");
var t = document.createTextNode("toggle bg");
btn.appendChild(t);
document.body.appendChild(btn);
btn.classList.add('elis');
btn.addEventListener('click', function() {
document.body.classList.toggle('bg');
})
})
})
.bg {
background: red;
}
<button class="makeB">create button</button>

Another way to simplify your code would be to use event delegation. Just add click event listener to body or some other enclosing container (possibly the closest one) and execute its code only when event.target is one of your buttons.
That way you will skip that part where you are adding event listeners to the same buttons over and over again.
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
document.body.addEventListener('click', event => {
if (event.target.className === 'elis') {
document.body.classList.toggle('bg');
}
});
ready(function() {
document.querySelector('.makeB').addEventListener('click', function() {
const btn = document.createElement("button");
btn.textContent = "toggle bg";
btn.classList.add('elis')
document.body.appendChild(btn);
})
})
.bg {
background: red;
}
<button class="makeB">create button</button>

They do work. The problem is you're just adding more listeners every time you add a button, so they only look like they work when there are an odd number of listeners on any particular button. Just add a listener to the button before you put it in the document.

Override a submit type button to call custom javascript method instead

I cannot alter the following code, but instead must override the default functionality of the button so that when clicked, a custom javascript method is called instead of the form being submitted.
And to accomplish this I must use javascript via injection.(Its a AIR desktop app using the twitter api)
Can anyone help?
<body>
<form><fieldset class="buttons">
<input class="submit button" id="cancel" name="cancel" type="submit" value="Cancel" />
</fieldset>
</form>
<body>

If you want to prevent form from submitting overiding click wont be enough. One can submit you form by Ctrl+Enter.
You can do the following http://jsfiddle.net/tarabyte/R5yQq/.
Find the form assuming you know button id.
function getForm(id) {
var button = document.getElementById(id);
while(button &&
(button = button.parentNode) &&
(button.nodeName !== 'FORM')){}
return button;
}
Add 'submit' event listener.
var form = getForm('cancel'),
handler = function(ev){
ev = ev || window.event;
if(ev.preventDefault) { //w3c browsers
ev.preventDefault();
}
else { //IE old
ev.returnValue = false;
}
alert('Custom logic goes here!');
};
if(form) {
if(form.addEventListener) {
form.addEventListener('submit', handler, false)
}
else if(form.attachEvent) {
form.attachEvent('onsubmit', handler);
}
}

Replace it via JS with a button that calls your function
document.getElementById('cancel').parentNode.innerHTML = '<input type="button" onClick="myFunc()" value="replaced">';
window.myFunc = function() { alert('clicked'); return false; }
http://jsfiddle.net/e37nd/

Handling "onclick" event with pure JavaScript

This is really straight forward but I'm still fairly new to JavaScript and just found JSFiddle. I'm trying to find the element with the getElementById() to disable and enable a button. What am I missing?
<form name="frm" >
<div id="chkObj">
<input type="checkbox" name="setChkBx" onclick="basicList.modifyAndEnableButton(this)"></input>
</div>
<div id="Hello">
<input type="button" name="btn" value="Hello"></input>
</div>
</form>
This is a list that I am using to add checkboxes because there is going to be more than one:
var basicList = {
'items': {},
'modifyAndEnableButton': function(obj1) {
var element = document.getElementsByName("btn");
if (obj1.checked == true && element.getAttribute('disabled') == false) {
element.getAttribute('disabled') = true;
this.addRecord(obj2);
} else if (element.getAttribute('disabled') == true) {
if (hasItems == false) {
element.getAttribute('disabled') = false;
}
}
}
};
http://jsfiddle.net/Arandolph0/E9zvc/3/

All browsers support this (see example here):
mySelectedElement.onclick = function(e){
//your handler here
}
However, sometimes you want to add a handler (and not change the same one), and more generally when available you should use addEventListener (needs shim for IE8-)
mySelectedElement.addEventListener("click",function(e){
//your handler here
},false);
Here is a working example:
var button = document.getElementById("myButton");
button.addEventListener("click",function(e){
button.disabled = "true";
},false);
And html:
<button id='myButton'>Hello</button>
(fiddle)
Here are some useful resources:
addEventListener on mdn
The click event in the DOM specification
Click example in the MDN JavaScript tutorial

Benjamin's answer covers quite everything. However you need a delegation model to handle events on elements that were added dynamically then
document.addEventListener("click", function (e) {
if (e.target.id == "abc") {
alert("Clicked");
}
});
For IE7/IE8
document.attachEvent('onclick', function (e) {
if (window.event.srcElement == "abc") {
alert("Clicked");
}
});

You have a Error here
btnRush should be Rushbtn
This is a example of cross browser event's I just made (not tested) )
var addEvent = function( element, type, callback, bubble ) { // 1
if(document.addEventListener) { // 2
return element.addEventListener( type, callback, bubble || false ); // 3
}
return element.attachEvent('on' + type, callback ); // 4
};
var onEvent = function( element, type, callback, bubble) { // 1
if(document.addEventListener) { // 2
document.addEventListener( type, function( event ){ // 3
if(event.target === element || event.target.id === element) { // 5
callback.apply(event.target, [event]); // 6
}
}, bubble || false);
} else {
document.attachEvent( 'on' + type, function( event ){ // 4
if(event.srcElement === element || event.srcElement.id === element) { // 5
callback.apply(event.target, [event]); // 6
}
});
}
};
Steps
Create a function that accepts 4 values ( self explaining )
Check if the browser supports addEventListener
Add event on the element
else add event on the element for older IE
Check that the (clicked) element is = to the passed element
call the callback function pass the element as this and pass the event
The onEvent is used for event delegation.
The addEvent is for your standard event.
here's how you can use them
The first 2 are for dynamically added elements
onEvent('rushBtn', 'click', function(){
alert('click')
});
var rush = document.getElementById('rushBtn');
onEvent(rush, 'click', function(){
alert('click');
});
// Standard Event
addEvent(rush, 'click', function(){
alert('click');
});
Event Delegation is this basically.
Add a click event to the document so the event will fire whenever & wherever then you check the element that was clicked on to see if it matches the element you need. this way it will always work.
Demo

Respect regular onsubmit handlers from jQuery.submit

I want a jQuery form submit handler to respect any previous submit handlers, including ones added with onsubmit.
I'm trying to detect the previous handler's return value but can't seem to do it:
<form><input type="submit" /></form>
<script type="text/javascript">
$('form')[0].onsubmit = function() { return false; }; // called first
$('form').submit(function(e) {
console.log(e.result); // undefined
console.log(e.isDefaultPrevented()); // false
console.log(e.isPropagationStopped()); // false
console.log(e.isImmediatePropagationStopped()); // false
});
</script>
Is there a way to do this?

I found one non-jQuery way to do this:
var form = $('form')[0];
var old_onsubmit = form.onsubmit;
form.onsubmit = function() {
if ($.isFunction(old_onsubmit)) {
if (old_onsubmit() === false) {
console.log("false");
return false;
}
}
console.log("true");
return true;
}
But I'd much prefer detecting this from the jQuery-bound submit handler