Develop Reference

Remove part of form when checkbox is checked

I'm trying to make a form that will hide and show some parts of the form. It working correctly in some tries. But when the user chooses and checks an option with class badCheckbox which is showing badField subsequently then user checks option without class badCheckbox which should showing 'goodField' than 'badField' is not hiding and still is shown.
And when a user tries to check options separately all work correctly only in upper mentioned case.
Is there any way to do it?
//Script to hide and show div
$('.badCheckbox').change(function() {
let checked = 0;
$('.badCheckbox').each(function() {
if (this.checked) {
checked += 1;
}
});
if (checked != 0) {
$('#badField').show();
$('#goodField').hide();
} else {
$('#badField').hide();
$('#goodField').show();
}
});
//script to check only one of three
$(".oneChecked").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked" />
<div id="badField" style="display:none;">
<p>:((</p>
<input type="submit" />
</div>
<div id="goodField">
<p>NICE!!!</p>
<input type="submit" />
</div>

here is a short version
$('#checks').on('change', 'input[name="checkin"]', function (){
if( $(this).is(':checked') ){
$('#checks .oneChecked:checked').prop('checked', false);
$(this).prop('checked', true);
} else {
$('#checks .oneChecked:checked').prop('checked', false);
$(this).prop('checked', false);
}
if( $('#checks .badCheckbox:checked').is(':checked') ){
$('#badField').show();
$('#goodField').hide();
} else {
$('#badField').hide();
$('#goodField').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checks">
<input name="checkin" type="checkbox" class="oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="oneChecked"/>
</div>
<div id="badField" style="display:none;">
<p>:((</p>
<input type="submit"/>
</div>
<div id="goodField">
<p>NICE!!!</p>
<input type="submit"/>
</div>

Consider the following improvements.
$(function() {
function checkStuff(checked) {
if (checked) {
$('#badField').show();
$('#goodField').hide();
} else {
$('#badField').hide();
$('#goodField').show();
}
}
//script to check only one of three
$(".boxes").on('change', ".oneChecked", function() {
if ($(this).is(":checked")) {
$(".boxes input[type='checkbox']").prop("checked", false);
$(this).prop("checked", true);
checkStuff($(this).is(".badCheckbox"));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxes">
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked" />
</div>
<div id="badField" style="display:none;">
<p>:((</p>
<input type="submit" />
</div>
<div id="goodField">
<p>NICE!!!</p>
<input type="submit" />
</div>

it's because you don't have an event when user click and the third checkbox.
Your function to show/hide message work when there are an update (change) on an input with the class .badCheckbox but when you click on the third (where doesn't have the class) your function is not called.
I think you should have a class on all your checkbox and use it in your function who lister the change.
Something like this :
$('.checkbox').change(function() {
let checked = 0;
$('.badCheckbox').each(function() {
// ...
});
And your html
<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked"/>
There is a lot of optimization that can be done to improve your code, like using the radio to remove your oneChecked function or printing the right message when the checkbox is checked instead of using show/hide two div but i think you should see it in the future
I hope this can help you and welcome to StackOverflow

First of all, obviously your checkboxes have to act like radios. As I understand, that is what you want to do. So, I modifyed your script a little bit to make checkboses to act as they are radio inputs, and in the same time to show/hide paragraph, depending on if clicked element has class badCheckbox and it's state (checkd or not). Here is the result:
//Script to hide and show div
$('.oneChecked').click( (everyOne) => {
//handles click (and change) on every element with class oneChecked
//they all has it in your example
$('.oneChecked').each( (ind, currentOne) => {
//iterate to all elements with class oneChecked
//and compare if matches clicked one
if ( !$(currentOne).is($(everyOne.target)) ) {
//other instance, not clisked one, so clear it
//to simulate behaviour of radio input
$(currentOne).prop('checked', false);
}
});
//checks if clicked element is bad or not and show/hide your p
if ($(everyOne.target).hasClass('badCheckbox') && $(everyOne.target).prop('checked')){
console.log('b-s/h');
$('#badField').show();
$('#goodField').hide();
} else {
console.log('s/b-h');
$('#badField').hide();
$('#goodField').show();
}
});
Here is an workign example in CodePen: https://codepen.io/kalatchev/pen/gOpJBOv

How to catch blur event in parent element

I would like to achieve that when I move from group1 input to group2 input, blur event is caught, so I can make additional actions. Isn't blur event propagated upper to parents?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
$( document ).ready(function() {
$("[data-id=container]").on("blur", function() {
alert("Blur caught in parent");
});
});
</script>
</head>
<body>
<div data-id="container" style="border: 1px solid gray;">
Group 1
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div data-id="container" style="border: 1px solid gray;">
Group 2
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</body>
</html>

I am not able to completely understand your question, but assuming that you want to have some form of validation when you change from group 1 to group 2 I am writing the following code. The following snippet is a general form that you may customize to your need.
<input type="text" id="one" onblur="validate">
<input type="text" id="two" onblur="validate">
<input type="text" id="three" onblur="validate">
<script type="text/javascript>
function validate()
{
var a = document.getElementById("one");
var b = document.getElementById("two");
var c = document.getElementById("three");
if (b.hasFocus() == true) //checks if the second input box has focus
{
alert("Value of the focused field is "+a.value); //this will give you the value in the first input box
}
else if (c.hasFocus() == true) //checks if the third input box has focus
{
a.focus(); //this will get the focus back on the first input box
}
}
</script>

Enable and Disable input fields on click button using jquery (laravel5.3)

I have a button which looks like an on off Button
Button is by default on but when user will click it should get off and when it is clicked it should disable the input field
my button is as
Button
<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">
Input field which i want to be disabled if above button clicks
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" required />
</div>
My Jquery code is as
$('#on_off').click(function(){
$('.FullName').prop('disabled', true);
});
I took above help from Disable Input field
Help Please its not working for me

First of your code is missing something. Like the control with class FullName
You can get the value of the checkbox by using $('#on_off').is(':checked') or in this case $(this).is(':checked') because we are using $('#on_off') click event.
Since you dont have a "Fullname" class anywhere in your example I added email to the Id field of the input
$('#on_off').click(function() {
$('.FullName [name="email"]').attr('disabled', $(this).is(':checked') ? false : true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="make-switch" checked id="on_off" name="double_optin" data-on-text="on" data-off-text="off">
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="disable me by click on checkbox" required />
</div>

Please try this code.
Here is your updated code:
<input type="checkbox" class="make-switch" id="on_off" name="double_optin" checked data-on-text="on" data-off-text="off">
<div class="col-md-4 FullName">
<input type="text" class="form-control" name="email" value="{{ isset($student->email) ? $student->email : '' }}" id= "email"required />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#on_off').change(function() {
//alert();
if ($(this).prop('checked')) {
$('.FullName input').prop('disabled', false);
}
else {
$('.FullName input').prop('disabled', true);
}
});
});
</script>
Hope, this may help you.

use .attr('disabled',true) or .removeAttr('disabled') instead of .prop('disabled', true); if not working.

This is the easiest you can get.
Create a checkbox. In click event of checkbox, pass its state as a boolean to buttons disabled value.
Though I would suggest to use ready made toggle button. Link is here
$(document).ready(function(){
$(":checkbox").change(function(){
$(":button").prop("disabled",$(this).is(":checked"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=checkbox />
<input type=button value=Target />

Having Issue on Using each() With Multiple Input Validate

Can you please take a look at this demo and let me know why I am not able to use the each iterator to check empty inputs?
$('#test').on('click', function(e){
e.preventDefault();
$("input").each(function(){
if($(this).val().length > 0){
$(this).addClass('error');
}
});
});
.error{background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>

Try:
$('#test').on('click', function(e){
e.preventDefault();
$("input").each(function(i,v){
console.log($(v).val().length)
if($(v).val().length == 0){
$(v).addClass('error');
}
});
});
.error{border-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>

<input> elements at html at Question do not have value attribute to return .length of ?
Try setting value attribute at input elements to retrieve $(this).val() or this.value within .each() ; substituting .toggelClass() for .addClass() to toggle "error" class at #test element click event if input .length changes
$("#test").on("click", function(e) {
e.preventDefault();
$("input").each(function() {
$(this).toggleClass("error", !this.value.length);
});
});
.error {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1" value="">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2" value="1">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3" value="">
<br />
<br />
<button id="test">Test</button>

i have no problem with your code, everything is running.
if i fill something into the inputs then it is running into the if-clause.
but what you want to do with "error"? since version 1.8 it is deprecated and
in your coding there is no error-handler, you give a string as parameter to error not a handler (function).
read : https://api.jquery.com/error/
in your case it is better to give the parent-element to the each function like:
$("input","body").each(
if you want to work with error, then:
$('#myelement').on('error',function(){ /*your error code */});
for your example it is not the right way to bind the error handler on your input-element, if you want to check the values of the inputs. the error-handler catch thinks like "undefined" but it is not a system-error if your inputs are empty.
try:
if($(this).val().length > 0){
console.log('Input Val has ' + this).val().length + ' characters')
}

If I understand your query correctly, you want the empty input fields to be highlighted once you click the "Test" button, while the one's with values should not be highlighted. If so, then please check this solution:
$('#test').on('click', function(e){
e.preventDefault();
$("input").each(function(){
if($(this).val().length == 0){
$(this).addClass('error');
}else{
$(this).removeClass('error');
}
});
});
.error{background-color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upper">a</div>
<div class="lower">b</div>
<input type="text" id="txt1">
<div class="upper">7</div>
<div class="lower">w</div>
<input type="text" id="txt2">
<div class="upper">o</div>
<div class="lower">66</div>
<input type="text" id="txt3"><br />
<br />
<button id="test">Test</button>

Change CSS visibilty property using Javascript

I'm pretty new to JavaScript and I'm having an issue using it to remove a CSS property.
Here is what I'm trying to do:
I'm trying to have a text input box invisible when a checkbox is unchecked, and make it visible when the box is checked. Here is the code I have:
<html>
<head>
<script>
if (document.box.test.checked == true)
{document.getElementById("test").style.display == "";
}
</script>
<body>
<form name="box">
<input type="checkbox" name="test" value="engraved">Engraved?
</form>
<div id="test" style="display:none">
<p>Engraving Message here:</p>
<form>
<input type="text" name="engraving-text" value="Type here">
</form>
</div>
</body>
</html>
Any and all help is greatly appreciated. Thanks everyone!

You can use the onchange event on the checkbox
<input type="checkbox" name="test" value="engraved" onchange="show_hide()">
and then toggle the input box
function show_hide()
{
if (document.box.test.checked) {
document.getElementById("test").style.display = "block";
} else {
document.getElementById("test").style.display = "none";
}
}
JSFiddle for testing

There are 2 problems here.
the script you wrote changes the display to "" which will still show
the text box it should be display="none";
the script will not run every time a person changes the value of the check-box.
try this.
Encapsulate your check into a function and then add the function to the body onload event and the checkbox's oncchage event.
<script>
function checkHideTextField()
{
if (document.box.test.checked == true)
{
document.getElementById("test").style.display == "none";
}
}
</script>
<body onload="checkHideTextField()">
<form name="box">
<input onchage="checkHideTextField()" type="checkbox" name="test" value="engraved">Engraved?
</form>
<div id="test" style="display:none">
<p>Engraving Message here:</p>
<form>
<input type="text" name="engraving-text" value="Type here">
</form>
</div>
</body>
</html>