I have a problem checking all the checkboxes and once they're checked, the button should be disabled. I'm new to JavaScript and it's really hard for me to understand how I can fix this. Anyone who would know how to fix this would be really a big help for my project.
Here's my code by the way:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.chk1').change(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
}
else {
var isChecked = false;
$('.chk1').each(function () {
if ($(this).is(":checked")) {
$('#btnClick').removeAttr('disabled');
isChecked = true;
}
});
if (!isChecked) {
$('#btnClick').attr('disabled', 'disabled');
}
}
})
});
</script>
<script type="text/javascript">
function checkALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = true;
}
CheckIfChecked();
}
function unCheckALL(){
var chk_arr = document.getElementsByName("draw[]");
for(k=0;k< chk_arr.length;k++)
{
chk_arr[k].checked = false;
}
CheckIfChecked();
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
All | None
<tr>
<td>
<input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" onClick="CheckIfChecked(this.id)" name="name" />
One
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Two
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Three
</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" onClick="CheckIfChecked(this.id)" name="name" />
Four
</td>
</tr>
<button id="btnClick" disabled="disabled">
Click me !!!</button>
</table>
</body>
</html>
In my code when I check one or more checkboxes the button gets enabled and when there is no checked checkbox the button gets disabled.
Now my problem is when I click the All link, it should check all the checkboxes and enable the button and when I click the None it should uncheck the checkboxes and disable the button.
To check all and uncheck checkboxes use JQuery. Give all the checkboxes the same class, for example "chk1" and then call
$( ".chk1" ).prop ('checked', true);
You can then iterate all elements of the class and check if they are all checked
$( ".chk1" ).each(function() {
if ($(this).is(':checked'))
// do something
})
The shortest code to achieve your stated objective is as follows:
$(function() {
$('#show').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', true);
$('#btnClick').prop('disabled', false);
});
$('#hide').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', false);
$('#btnClick').prop('disabled', true);
});
});
In the following demo, you'll notice that your markup was cleaned to take care of the following:
Remove inline JavaScript which among other thing is a nightmare to maintain.
Remove duplicate IDs; IDs should be unique.
Remove repeated element attributes
$(function() {
$('#show').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', true);
$('#btnClick').prop('disabled', false);
});
$('#hide').on('click', function(e) {
e.preventDefault();
$('.chk1').prop('checked', false);
$('#btnClick').prop('disabled', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0">
<a id="show" href="#">All</a> | None
<tr>
<td>
<input type="checkbox" class="chk1" name="name" />
One
</td>
<td>
<input type="checkbox" class="chk1" name="name" />
Two
</td>
<td>
<input type="checkbox" class="chk1" name="name" />
Three
</td>
<td>
<input type="checkbox" class="chk1" name="name" />
Four
</td>
</tr>
<button id="btnClick" disabled="disabled">
Click me !!!</button>
</table>
Try this , short and simple. (See snippet for HTML)
removed inline JS.
simplified and reduced the code.
JS
$('.chk1').change(function () {
if ($(".chk1:checked").length >= 1) {
$('#btnClick').removeAttr('disabled');
} else {
$('#btnClick').attr('disabled', 'disabled');
}
});
$('#show').click(function () {
$('.chk1').prop('checked', true);
$('.chk1').trigger('change')
});
$('#hide').click(function () {
$('.chk1').prop('checked', false);
$('.chk1').trigger('change')
});
$('.chk1').change(function () {
if ($(".chk1:checked").length >= 1) {
$('#btnClick').removeAttr('disabled');
} else {
$('#btnClick').attr('disabled', 'disabled');
}
});
$('#show').click(function () {
$('.chk1').prop('checked', true);
$('.chk1').trigger('change')
});
$('#hide').click(function () {
$('.chk1').prop('checked', false);
$('.chk1').trigger('change')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0"> All | None
<tr>
<td>
<input type="checkbox" id="required-checkbox1" id="required-checkbox1" class="chk1" name="name" />One</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Two</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Three</td>
<td>
<input type="checkbox" id="required-checkbox1" class="chk1" name="name" />Four</td>
</tr>
<button id="btnClick" disabled="disabled">Click me !!!</button>
</table>
Note :
1.Used trigger so that the button will be enabled / disabled based on click.
2.If value of href is # then above code works fine, if it has some other URL , then you have use events like #PeterKA mentoned in his answer.
This code will help for your query "once you've checked all the checkbox the button will be disabled"
$('.chk1').change(function () {
if ($('.chk1:checked').length == $('.chk1').length) {
$('#btnClick').prop('disabled',true);
}
else{
$('#btnClick').prop('disabled',false);
}
});
Related
I´m trying to make a text input appear when I click on the "outra", that means "other" option on the checkbox...
I want it to appear just when i click that and then it will register that thing on the database.
Does anyone know how to help me?
Code with the functions:
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function(){
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>"/></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>
Are you using a framework or anything? You would want to add a function that checks if the checkbox is checked. Judging from your tags, I'll offer a JQuery suggestion.
The JQuery to accomplish that might look like:
$('#checkboxes-4').is(":checked")
And then you would conditionally show your text input. So maybe:
if ($('#checkboxes-4').is(":checked")) {
$('#id_of_textbox').hide();
} else {
$('#id_of_textbox').show();
}
I want to add and remove textbox in table.
I did add textbox in table.
Am confused to remove textbox in table.
This is my code:
$(function () {
$('.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});
$(function () {
$('.delete').on('click', function () {
});
});
.delete{color:#ff0000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />
This is my sample code link: https://jsfiddle.net/vo9j2LcL/
Please help me to remove function
Use event delegation to listen the click event on a dynamically generated element.
$(function() {
// cache the table reference
var $table = $('#input_fields');
// keep a cloned copy to generate new
var $tr = $table.find('tr').eq(0).clone();
$('.more').on('click', function() {
// clone to generate new and then append
$tr.clone().appendTo($table).find('input').val('');
});
// set click event handler
$table.on('click', '.delete', function() {
// check number of tr
if ($('#input_fields').find('tr').length > 1) {
// remove the tr corresponds to clicked element
$(this).closest('tr').remove();
}
});
});
.delete {
color: #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="quick_post" method="post">
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
<td> <span class='delete'>Delete</span></td>
</tr>
</table>
</form>
<input class="more" type="button" value="Addmore" name="addmore" />
I have javascript code to disable other inputs if one is filled .
I need it in table that comes out of database.
The sad thing is that it only works with first table row and disable all inputs in table (but if input filled is not first nothing happens)
Javascript:
$(function(){
$("input").on("keyup", function(){
if($(this).hasClass("inputA") && $(".inputA").val()){
$("input.inputB").prop("disabled", true);
$("input.inputA").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputB") && $(".inputB").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputC") && $(".inputC").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", true);
$("input.inputC").prop("disabled", false);
} else {
$(".inputA, .inputB").prop("disabled", false);
}
});
});
My td from html table:
<td><input type="text" class="inputA" value=""></td>
<td><input type="text" class="inputB" value=""></td>
<td><input type="text" class="inputC" value=""></td>
How to make it work for each line separated?
Use the same class on each input, create event on those input after that check the value of the input if she's not empty disable all of others input for this works in a line just select all input of the parent.
Try to avoid multiple test as you did. Not lisible and maintainable.
Example
$(".input").on("keypress change keyup",function(){
if($(this).val() != "")
{
$(this).parent().parent().find(".input").not($(this)).prop("disabled",true);
}
else
{
$(this).parent().parent().find(".input").prop("disabled",false);
}
});
.input:disabled{
background-color:LightBlue;
border:solid 1px blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
</table>
This solves your issue! Disable all input fields that doesn't have same class as the one being currently edited.
Demo: https://jsfiddle.net/3tf8ou3y/1/
jQuery(document).ready(function($) {
$("tr").on("keyup", "input", function(event) {
// get the current row
var $row = $(event.delegateTarget);
// get the class of the input field being edited
var this_class = $(this).attr('class');
if ($(this).val().length > 0) {
// if the input field has a value, disable all
// other input fields in the sam row
$('input:not(.'+this_class+')', $row).prop('disabled', true);
} else {
// else enable all input fields
$('input', $row).prop('disabled', false);
}
});
});
You can use 'jQuery(this).val()' instead of 'jQuery(".inputA").val()' or 'jQuery(".inputB").val()' or jQuery(".inputC").val()
I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.
<select id='menuHandler'>
<option value='abc'> abc</option>
<option value='xyz'>xyz</option>
</select>
IF the selected value is "abc" then a popup button is displayed with the following code:
<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
<table CELLPADDING="10" CELLSPACING="5" class='border'>
<tr>
<td colspan='3'>Run form Generation</td>
</tr>
<tr>
<td width="200" class='border'>
<span>Input Data</span><br>
<input type="checkbox" name="vehicle" >Process log(s)<br>
Summary data<br>
<input type="checkbox" name="vehicle" >Thickness data<br>
<input type="checkbox" name="vehicle" >Particle data
</td>
<td class='border'>
<span>Steps(s)</span>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</td>
</tr>
<tr>
<td> Run form filename </td>
<td><input type="text" ></td>
<td><button class="editbtn">Generate</button></td>
</tr>
</table>
</div>
else if the value selected is "xyz" this should be displayed.
<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
<input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active" value="Generate"/>
</form>
how can I do it.
Listen to the change event of the #menuHandler select element, and add the conditional logic there.
Example Here
$('#menuHandler').on('change', function () {
if (this.value === "abc") {
$('#runFormPopup, #runForm').show();
$('#form_generate').hide();
} else {
$('#runFormPopup, #runForm').hide();
$('#form_generate').show();
}
});
..or a shorter version:
Example Here
$('#menuHandler').on('change', function () {
var condition = this.value === "abc";
$('#runFormPopup, #runForm').toggle(condition);
$('#form_generate').toggle(!condition);
});
Try something like this.
$('#menuHandler').change(function(){
var selectedValue = $(this).val();
if(selectedValue === 'abc') {
$('#runFormPopup').show();
$('#form_generate').hide();
}
else {
$('#runFormPopup').hide();
$('#form_generate').show();
}
});
From a high-level perspective:
Create a listener on the button and listen for a click
Dynamically get the value
Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)
Following these steps, you should be OK.
hide and show input text based on drop down selection however the "input text" doesn't show anymore when i submit the form and I didn't complete the form validaton.
i am using jquery, and i can show and hide, works perfectly, but this part is bugging me alot.
my customers will not complete all the form fields, so when they submit the form, i would like them to SEE the input text based on their drop down selection, RATHER, the input text is missing.
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
<select name="shipping" id="shipping">
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<tr id="mydiv" style="display:none">
<td><input type="text" name="testing"></td>
</tr>
<tr>
<td><input type="text" name="testing2"></td>
</tr>
<tr>
<td><input type="text" name="testing3"></td>
</tr>
<input type="submit" value="Submit" />
what you want to validate.
if textbox is hidden , it should be part of validation or not
if that is part of validation use
$('#id').prop("required", "true");
else
$('#id').removeAttr("required");
Instead of inline styles for this try using a class for hiding it initially like,
<tr id="mydiv" class="hidden">
<td><input type="text" name="testing"></td>
</tr>
CSS: .hidden{display:none;}
and then do,
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
(OR)
Try to remove 'hidden' class when u want to show the #mydiv
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').removeClass('hidden');
}
else
$("#mydiv").addClass('hidden');
});
});
It will work.!!
Look at the jsFiddle here. It works.
I don't see the <table> tag in your html, which is a problem.
<select name="shipping" id="shipping">
<option value="select">Select</option>
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<table>
<tr id="mydiv" style="display:none">
<td>
<input type="text" name="testing" value="show/hide"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing2"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing3"/>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
Javascript:
$('#shipping').change(function () {
if ($("#shipping").val() == "LA") {
$('#mydiv').show();
} else $("#mydiv").hide();
});
If you are looking to have the div show when the page reloads with that information you will need to check for the selected information when the page is loading.
Don't make the default display none. Hide it when you load the page.
$(document).ready(function() {
$("#mydiv").hide();
var shipLocation = $("select#shipping").val();
if ( shipLocation == "LA")
{
$('#mydiv').show();
}
then add your shipping change method.