We Keep Coding

How to enable/disable a button via checkbox and keep the button active or inactive after refreshing the page

I have a button and I want to do the following
Disable this button by clicking on the checkbox that refers to it
Keep it disabled even after refreshing the page
Do the same, but instead. The button is disabled and now I would like to enable it again by clicking on the checkbox that references it keeping it that way after refreshing the page
I found two references that do exactly what I need, but I don't know how to put the two solutions together. This and this
HTML code
<div id="billing">
<input type="checkbox" id="billing-checkbox" checked>
<input type="button" value="Hello Javascript!">
</div>
Javascript code
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);
function toggleBilling() {
var billingItems = document.querySelectorAll('#billing input[type="button"]');
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}
$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});
$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});
Thank you so much!

This will give a script error in the snippet, probably because it is a sandbox and doesn't allow for localStorage. But this is tested and works. See comments in the code for explanations. You can set the checkbox on or off and when you refresh the page, it will 'remember' it's state
$(document).ready(function() {
// first thing is to set the checkbox based on the localStorage key that we may have set in the past
$('#billing-checkbox').prop('checked', localStorage.getItem('buttonDisabled') !== "disabled");
// then we run our toggle billing
toggleBilling()
// we set up our change handler.
$('#billing-checkbox').on('change', toggleBilling);
});
function toggleBilling(e) {
// we set the disabled based on the check button status
$('#billing input[type="button"]').attr('disabled', !$('#billing-checkbox').prop('checked'))
// we set the localStorage based on the button disabled
localStorage.setItem('buttonDisabled', $('#billing input[type="button"]').attr('disabled'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="billing">
<input type="checkbox" id="billing-checkbox" checked>
<input type="button" value="Hello Javascript!">
</div>

jQuery tabs and validate

I am using jQuery tabs and validating all fields are filled in prior to allow the user to move to the next tab. On a few of the tabs there are options where the user can choose from multiple options and, sometimes, the user will click option 1 and mean option 2 but when they try and click the previous button this validates the fields and won't let them until they have filled in all the fields which is a rubbish UX.
I would like to only validate on clicking a next button but not on clicking a previous button.
<a class="btn nexttab navbutton" href="#step1">Previous</a>
<a class="btn nexttab navbutton" href="#step3">Next</a>
Here is the code I am using currently:
var validator = $("#start").validate();
var tabs = $("#tabs").tabs({
select: function(event, ui) {
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
$(panelId).find(":input").each(function() {
console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
return valid;
}
});
To try and overcome this I added a class called next button to the next buttons only and then tried to change this line which I assume checks any input:
$(panelId).find(":input").each(function() {
to:
$(".nextbutton").click(function() {
but it allows the user to move to the next screen without having to fill in all the fields.
How can I make it so only forward movement is validated?
http://jsfiddle.net/553xmzh3/1/

I would like to only validate on clicking a next button but not on clicking a previous button. .... How can I make it so only forward movement is validated?
Simply put a cancel class on your "previous" button. All validation rules will automatically be ignored when a submit button contains a cancel class. However, the submitHandler will fire as if the form is valid.
<input type="submit" value="PREVIOUS" class="cancel" /><!--// This submit will not trigger validation //-->
<input type="submit" value="NEXT" /><!--// This submit will trigger validation //-->
Working DEMO: http://jsfiddle.net/4zdL8ha3/
EDIT:
Although it still works, using class="cancel" has been officially deprecated and replaced with formnovalidate="formnovalidate"
<input type="submit" value="PREVIOUS" formnovalidate="formnovalidate" />
Working DEMO: http://jsfiddle.net/4zdL8ha3/1/
Since you're using anchor tags instead of type="submit" elements, this solution will not work for you. It would be best to replace your anchor tags with a button element. That way, using CSS, you can style the button to look exactly the same as an anchor.
<button type="submit" class="btn nexttab navbutton" formnovalidate="formnovalidate">Previous</button>
<button type="submit" class="btn nexttab navbutton">Next</button>
Working DEMO: http://jsfiddle.net/4zdL8ha3/2/
EDIT:
If you must have anchor tags in place of type="submit" buttons, then you need to write the appropriate click handlers and check the form's validity only on the "next" button handlers. Using the .valid() method also simplifies your code by removing your custom validation tester from the tab switcher function.
$(".nexttab").click(function () { // NEXT BUTTON
if ($("#start").valid()) { // TEST VALIDATION
$("#tabs").tabs("select", this.hash);
}
});
$(".cancel").click(function () { // PREVIOUS BUTTON - NO VALIDATION TEST
$("#tabs").tabs("select", this.hash);
});
Initializations:
var validator = $("#start").validate();
var tabs = $("#tabs").tabs({
select: function (event, ui) {
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
return true;
}
});
DEMO: http://jsfiddle.net/553xmzh3/3/

onBlur event on composed component (input + Button)

I am trying to make a "composed component" which consists of an input field and a button.
I have the following jsfiddle as example:
http://jsfiddle.net/stt0waj0/
<div id="myComponent">
<input type="text" onBlur="this.style.border='1px solid red';">
<button type="button" onClick="alert('Hello World');">ClickMe</button>
</div>
The behavior I want is that when I leave the input field without writing any content, I get a validation error (red border in this case). This already works in the fiddle (content validation is not the scope of the question).
However, when I leave the input field by pressing the button, I will open a dialog which allows to select values for the input field, so in that case, I don't want the validation to run.
So, the concrete question about the fiddle: Can I click the input field, and then click the button and not have a red border? But, if I click the input field, and then click somewhere else, I want the red border (any onBlur except when button was clicked).
Is this possible without dirty tricks?
Things I want to avoid:
Set a timer on the first event to wait for the second (Reason: performance)
Make the onClick event always reset the red border on the text field (Reason: gui glitches)
Just to make it clear on what I'm looking for and why this question is interesting: the onBlur event is fired before the onClick event. However, I normally would need the onBlur to know that the onClick comes next, which is not possible. That's the point of the question.
Imagine a date picker which validates on empty field, when the field has focus and you press the calendar, you will get a validation error even though you're selecting a date. I want to know if there is an elegant way to handle such cases.

To make this work, you can postpone your validation function if user pressed the button.
Below is sample code and fiddle to show what i mean.
* Updated the fiddle to use select dropdown instead of a button *
Fiddle Demo
input.error {color: red; border: 1px solid red;}
<div id="myComponent">
<input id="btn" type="text" onBlur="inputBlur()">
<select type="button" data-btn="btn" onclick="inputButtonClick()" onchange="selectChange()" onblur="selectBlur()">
<option value="">choose</option>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>
</div>
window.validate = function(input) {
//do your validation
var val;
console.log("Validating");
val = input.val();
if ( !val || !val.length) {
input.addClass("error");
console.log("Something is invalid");
} else {
//all good
console.log("All valid");
}
//clear error after x time to retry
setTimeout(function() {
$(".error").removeClass("error");
$("input").removeAttr("data-btn-active") ;
}, 3000);
}
window.selectBlur = function() {
var input = $("#" + $(event.target).attr("data-btn"));
validate(input);
}
window.selectChange = function() {
var input = $("#" + $(event.target).attr("data-btn"));
console.log("change", $(event.target).val() );
input.val( $(event.target).val() );
validate(input);
}
window.inputButtonClick = function() {
var input = $("#" + $(event.target).attr("data-btn"));
input.attr("data-btn-active", "true");
console.log("inputButtonClick",input );
}
window.inputBlur = function() {
var input = $(event.target);
//give a bit of time for user to click on the button
setTimeout(function() {
if (!input.attr("data-btn-active" ) ) {validate(input);}
}, 100);
}
$(document).ready(function() {
});

Why doesn't javascript function update DOM on first run

I have a dynamic form in which users can add inputs by clicking a button. This works fine. However when clicking to remove the input the first click does not remove an input. Every click after removes inputs as expected. I can see that it runs the function on first click to remove but nothing is updated in the DOM so the field stays. Here is my HTML:
<button onclick="AddFileField()">Add File</button>
<br />
<br />
<form action="" method="post" enctype="multipart/form-data">
<div id="fileFields"></div>
<br />
<input type="submit" value="Upload" />
</form>
And the associated javascript:
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
var FieldCount = 1; //to keep track of text box added
function AddFileField() {
var MaxInputs = 10; //maximum input boxes allowed
var InputsWrapper = $("#fileFields"); //Input boxes wrapper ID
var x = $("#fileFields > div").length + 1; //current text box count
if (x <= MaxInputs) //max input box allowed
{
$(InputsWrapper).append('<div class="fileInp"><label for="file' + FieldCount + '">File:</label><input type="file" name="files" class="inpinl" id="file' + FieldCount + '" />×</div>');
FieldCount++;
}
return false;
}
A fiddle showing issue. To duplicate add a couple fields then click an x. The first click does nothing, then proceeding clicks removes fields. How can I get the first click to remove the field as well?

It's because you are registering your event handler inside of another event handler.
http://jsfiddle.net/3e1ajtvo/11/
I removed your event handler and now, you pass the clicked element as elem into the function itself.
As a matter of fact you don't even really need the function, as long as jquery is exposed (it is in your case).
http://jsfiddle.net/3e1ajtvo/12/

A working fiddle is here
The issue lies in the function:
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
When you click the X, this function is called, which adds a click event handler to the X to remove it; however, this event handler is not called until the next time you click it. (This is why clicking X twice works).
In the updated fiddle, you simply pass this to removeField as such:
//HTML
×</div>
//JS
function removeField(me) {
$(me).parent().remove();
return false;
}

The reason for this is because you are using onclick="removeField()".
Lets take a look at your function. When you click on the remove button the following script will run. This script then creates a click handler, that will activate on next click, because when you first clicked on remove the handler was not created
function removeField() {
$('.removeclass').click(function () {
$(this).parent().remove();
});
return false;
}
So you will need to replace this is another function. Since you are using jQuery you can learn to use .on() for dynamically generated elements.
$(document).on('click', '.removeclass', function () {
$(this).parent().remove();
});
http://jsfiddle.net/Spokey/3e1ajtvo/16/

I made your code a bit more modular and changed it to use jQuery more than you were. This is just another way to do it, the other answers are also valid.
http://jsfiddle.net/3e1ajtvo/19/
var fields = {
btnAdd: $('#addField'),
inputWrapper: $('#fileFields'),
maxInputs: 10,
fieldCount: 1,
init: function(){
this.inputWrapper.on('click', '.removeclass', this.removeInput);
this.btnAdd.on('click', this.appendField);
},
removeInput: function(){
//this will refer to the html element you clicked on
$(this).parent().remove();
},
appendField: function(){
//this will refer to the html element you clicked on
if ( fields.inputWrapper.children('div').length <= fields.maxInputs ){
fields.inputWrapper.append('<div class="fileInp"><label for="file' + fields.fieldCount + '">File:</label><input type="file" name="files" class="inpinl" id="file' + fields.fieldCount + '" />×</div>');
fields.fieldCount++;
}
}
};
fields.init();

You're not executing the code to remove the row on the first click, you're just adding the click handler to the link. It works after that because the $('.removeclass').click(... then fires as expected.

JavaScript button function swap

What I am trying to do is following:
I have an input type button and I want to replace it's function on first click.
<input type="submit" class="submit-button" value="Submit" name="boom" />
So a [button] that serves for submit, I wanna show alert with some jquery plugins but lets do it here with normal javascript alert (default window).
So on first click it will be
alert('Something');
And on second click it will be default function (submit).
How can I achieve something like this?
Of course if button is clicked once, and then page reloaded, it will show same alert again on first button click.

Use one().
Attach a handler to an event for the elements. The handler is executed at most once per element.
Example:
$(".submit-button").one("click", function(e) {
// will only run on first click of element
e.preventDefault();
alert("Something");
});

Try this:
<script type="text/javascript">
var clicked = false;
function btnClick(e) {
if(clicked === false) {
alert('Something');
clicked = true;
e.preventDefault();
return true;
} else {
return false;
}
}
</script>
<input type="submit" onclick="btnClick(event)" class="submit-button" value="Submit" name="boom" />