I have some jQuery checking to see when a human clicks a check button but if the page loads with the button marked as checked already, the jQuery doesn't work.
$ (function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
What I need this to do is if the checkbox is already checked, it removes the required attribute. Why is it not working when a variable is posted to the page and PHP adds checked="checked" to the input?
Thanks!
You have to use this as selector on checking if the clicked checkbox is checked or not. this refers to the clicked checkbox. You can use prop() to add and remove required
var requiredCheckboxes = $('.options');
requiredCheckboxes.change(function() {
if ($(this).is(':checked')) {
$(this).prop('required', false);
} else {
$(this).prop('required', true);
}
});
input:required {
box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
<input class='options' type="checkbox" required>
Update: You can use a class for the required checkbox and use prop() to add and remove required property.
var requiredCheckboxes = $('.required-options')
//On page Loads
if (requiredCheckboxes.is(':checked')) {
requiredCheckboxes.prop('required', false);
} else {
requiredCheckboxes.prop('required', true);
}
//Event listener
requiredCheckboxes.change(function() {
if (requiredCheckboxes.is(':checked')) {
requiredCheckboxes.prop('required', false);
} else {
requiredCheckboxes.prop('required', true);
}
});
input:required {
box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='required-options' type="checkbox" required checked>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>
<input class='required-options' type="checkbox" required>
Html:
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
js:
$("document").ready(function(){
$('body').find('input:checkbox').prop('checked', "checked");
});
jsfiddle
Related
<form method='post' action=''>
<label for="x1">X1</label>
<input id="x1" name="checkbox[]" type="checkbox" value="x1" />
<label for="x2">X2</label>
<input id="x2" name="checkbox[]" type="checkbox" value="x2" />
<label for="x3">X3</label>
<input id="x3" name="checkbox[]" type="checkbox" value="x3" />
<label for="x4">X4</label>
<input id="x4" name="checkbox[]" type="checkbox" value="x4" />
<button type='submit' name='submit'>Submit</button>
</form>
In this form How can i get the selection order of the checkboxes inside the php array
Just if i submitted the form after clicking x4 > x2 > x3 > x1
i want to get ordered in the array as it is selected checkbox[x4, x2, x3, x1]
The normal array i get is as it is ordered checkbox[x1, x2, x3, x4].
Check the clicked order using jquery
push the value to array on change event.if is checked push to the array.is unchecked value remove from array
Join the array with , add the value to hidden input .you could post this value to server
var arr=[]
$('input[type=checkbox]').on('change', function() {
if ($(this).is(':checked')) {
arr.push($(this).val())
} else {
var r =arr.indexOf($(this).val())
arr.splice(r, 1)
}
$('input[type=hidden]').val(arr.join(',')) //for server use
console.log(arr)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action=''>
<label for="x1">X1</label>
<input id="x1" name="checkbox[]" type="checkbox" value="x1" />
<label for="x2">X2</label>
<input id="x2" name="checkbox[]" type="checkbox" value="x2" />
<label for="x3">X3</label>
<input id="x3" name="checkbox[]" type="checkbox" value="x3" />
<label for="x4">X4</label>
<input id="x4" name="checkbox[]" type="checkbox" value="x4" />
<input type="hidden" name="clickedorder" >
<button type='submit' name='submit'>Submit</button>
</form>
Updated
change the label value depend on clicking order
var arr=[]
$('input[type=checkbox]').on('change', function() {
if ($(this).is(':checked')) {
arr.push($(this).val())
} else {
var r =arr.indexOf($(this).val())
arr.splice(r, 1)
}
$('input[type=checkbox]').each(function(a){
//console.log(arr.indexOf($(this).val()))
if(arr.indexOf($(this).val())>-1){
$(this).prev('label').text($(this).val().toUpperCase()+'-'+(arr.indexOf($(this).val())+1))
}else{
$(this).prev('label').text($(this).val().toUpperCase())
}
})
$('input[type=hidden]').val(arr.join(',')) //for server use
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action=''>
<label for="x1">X1</label>
<input id="x1" name="checkbox[]" type="checkbox" value="x1" />
<label for="x2">X2</label>
<input id="x2" name="checkbox[]" type="checkbox" value="x2" />
<label for="x3">X3</label>
<input id="x3" name="checkbox[]" type="checkbox" value="x3" />
<label for="x4">X4</label>
<input id="x4" name="checkbox[]" type="checkbox" value="x4" />
<input type="hidden" name="clickedorder" >
<button type='submit' name='submit'>Submit</button>
</form>
You need to write a jquery function like this:
Add a common class to all checkboxes like class="ckbox"
then,
$(document).ready(function(){
var selected_boxes = [];
$('.ckbox').change(function() {
if($(this).is(':checked')) {
selected_boxes.push($(this).val());
$(this).prev().attr('for',$(this).val());
}
else{ // When uncheck the checkbox.
selected_boxes.splice( $.inArray($(this).val(), selected_boxes), 1 );
}
});
});
Then post this JS variable to your php code. It will give all the values in sequence in which you had selected.
This question already has answers here:
Disabling submit button until all fields have values
(11 answers)
Enable submit button only when all fields are filled
(5 answers)
Disable Submit button until Input fields filled in
(7 answers)
Closed 5 years ago.
I have a form
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="password" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="password" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br /> <br/>
<textarea name="adress" id="adress" ></textarea>
<br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
I want to disable my submit button until all the fields have values.Now everything is okay except radio button.
JS:
<script>
(function() {
$('form > input,textarea,radio').keyup(function() {
var empty = false;
$('form > input,textarea,radio').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>
I don't know whether this is good code or not.I am totally new to jquery so please correct me i had make anything wrong.
I want to disable my submit button until all the fields have values including radio button..Please help me.Thanks in advance
You can check if a radio button is checked or not using:
if (!$("input[name='gender']:checked").val()) {
alert('Nothing is checked!');
} else {
alert('One is checked');
}
You need to use prop() and check the type. If the type is radio, you can add validation checks:
required = function(fields) {
var valid = true;
fields.each(function() { // iterate all
var $this = $(this);
if ((($this.is(':text') || $this.is('textarea')) && !$this.val()) || // text and textarea
($this.is(':radio') && !$('input[name=' + $this.attr("name") + ']:checked').length)) { // radio
valid = false;
}
});
return valid;
}
validateRealTime = function() {
var fields = $("form :input");
fields.on('keyup change keypress blur', function() {
if (required(fields)) {
{
$("#register").prop('disabled', false);
}
} else {
{
$("#register").prop('disabled', true);
}
}
});
}
validateRealTime();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br /> Password
<br />
<input type="password" id="pass_input" name="password" /><br /> Confirm Password<br />
<input type="password" id="v_pass_input" name="v_password" /><br /> Email
<br />
<input type="text" id="email" name="email" /><br /> <br/>
<textarea name="adress" id="adress"></textarea>
<br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
//toggle check all
$("#bill-all").click(function(){
if( $(this).is(":checked") ){
$('.bill_fillter').prop('checked', true);
} else {
$('.bill_fillter').prop('checked', false);
}
});
Html:Code
If i check here.
<input type="checkbox" name="all" id="bill-all" />
Check All is not working, nothing gonna checked if i checked
<input type="checkbox" name="bill_<?php echo($i);?>" report_date="<?php echo $a1[1]; ?>" value="<?php echo($unit_id);?>" class="bill_fillter" id="bill-all"/>
$("#bill-all").click(function(){
if( $(this).is(":checked") )
$(".bill_filter").prop('checked', true);
else
$(".bill_filter").prop('checked', false);
});
Remove id form -
<input type="checkbox" name="bill_<?php echo($i);?>" report_date="<?php echo $a1[1]; ?>" value="<?php echo($unit_id);?>" class="bill_fillter" id="bill-all"/>
Try with -
<input type="checkbox" name="bill_<?php echo($i);?>" report_date="<?php echo $a1[1]; ?>" value="<?php echo($unit_id);?>" class="bill_fillter"/>
Sample -
<input type="checkbox" name="bill" class="bill_fillter" />
<input type="checkbox" name="bill" class="bill_fillter" />
<input type="checkbox" name="bill" class="bill_fillter" />
<hr />
<input type="checkbox" name="all" id="bill-all" />
Script -
$(document).ready(function() {
$("#bill-all").click(function(){
if( $(this).is(":checked") ){
$('.bill_fillter').prop('checked', true);
} else {
$('.bill_fillter').prop('checked', false);
}
});
I suspect your not binding the click event on document ready.
Given the HTML as an example
<input type="checkbox" id="bill-all" /><br /><br />
<input type="checkbox" class="bill_filter" /><br />
<input type="checkbox" class="bill_filter" /><br />
<input type="checkbox" class="bill_filter" />
The javascript code needs to be executed when the DOM (document) is ready, e.g. all HTML elements are available.
$(function() {
$('#bill-all').click(function() {
$('.bill_filter').prop("checked", $(this).is(':checked'));
});
});
I have form that has 2 radio buttons(Yes and No) and a text box. If the user clicks Yes it enables the text box you can input information and it is uploaded to the database including the value from the radio buttons. If you click no it disables the text box and suppose to upload the value of the radio box only to the database. But I am not getting that.
<input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true">No
<input type="radio" name="TermLease" value="Yes" onclick="TermLeaseMonths.disabled=false">Yes |
How many months:<input type="hidden" name="TermLeaseMonths" value="0" />
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="true">
I have a hidden input type that uploads the value. But when I click yes it does not disable the text box. Not sure where I am going wrong.
You forgot give id for the text field. Try this
<input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true">No
<input type="radio" name="TermLease" value="Yes" onclick="TermLeaseMonths.disabled=false">Yes |
How many months:<input type="hidden" name="TermLeaseMonths" value="0" />
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="true">
Try this on click of radio button we can do by this way
$('#radio').click(function () {
if (("#radio").val() == "") {
$('class_name_oftextBox').attr("disabled", true);
} else {
$('class_name_oftextBox').removeAttr("disabled");
}
});
Or you can do this as
$('#enable').click(function () {
$('#textBox').removeAttr("disabled")
});
$('#disable').click(function () {
$('#textBox').attr("disabled", "disabled");
});
Demo jsFiddle
HTML
<form>
<span style="float: left;">
<label><input type="radio" name="TermLease" value="No" onclick="ShowHideTextbox('leaseMonths', false)" />No</label>
<label><input type="radio" name="TermLease" value="Yes" onclick="ShowHideTextbox('leaseMonths', true)"/>Yes</label>
</span>
<span id="leaseMonths" style="display: none; float: left;">
<span> | </span> <span>How many months: </span>
<input type="text" name="TermLeaseMonths" id="TermLeaseMonths" size="1" />
</span>
</form>
JS
var previousNumberOfMonths = "0";
function ShowHideTextbox(elementId, show) {
var link = document.getElementById(elementId);
var textbox = document.getElementById("TermLeaseMonths");
if (show){
textbox.value = previousNumberOfMonths;
link.style.display = 'block';
}
else {
link.style.display = 'none';
previousNumberOfMonths = textbox.value;
document.getElementById("TermLeaseMonths").value = "0";
}
}
This is the checkbox
<input id="c1" type="checkbox" name="hour[]" class="create-daily" value="1" /><br />
<input id="c2" type="checkbox" name="hour[]" class="create-daily" value="2" /><br />
<input id="c3" type="checkbox" name="hour[]" class="create-daily" value="3" /><br />
I have a dialog
<div id="form_input" title="Konfirmasi">
<?php $data['hour'] = $this->input->post('hour');?>
<table>
<?php echo form_open('booking/ok'); ?>
<input type="hidden" value='' id="id" name="id">
<input type="hidden" value="<?php echo $sdate?>" id="sdate" name="sdate" />
<?php echo "Anda memesan room : <br/>Tanggal :<b> ".$sdate."</b><br>";?>
Jam : <b><span class="jambooking"></span></b>
<tr>
<td>
<div class="element">
<label class="Norm">Jam:</label>
<input type="text" name="jam" class="jambooking" id="jam" minlength="2" value="" />
</div>
<label class="Norm">User:</label>
<input type="text" name="user" class="required text" minlength="2" />
</div>
I have javascript
$(".create-daily").live("click",function(){
if ($(this).attr("checked")){
//var date = $(this).attr("date");
//$('#date').val(date);
$( "#form_input" ).dialog( "open" );
$(".jambooking").html( $(":checked").val());
}
});
I use a span and input with a class set to jambooking. When I checked a check box and show a dialog, the span shows a value.
When I set to the input class jambooking the value does not show.
How would I load a value to the text field?
Try:
$(".create-daily").live("click",function(){
if ($(this).is(":checked")){
var checkedVal = $(this).val();
//$('#date').val(date);
$( "#form_input" ).dialog( "open" );
$("span.jambooking").html(checkedVal); //for span
$("input.jambooking").val(checkedVal); //for textbox
}
});
Since you are using an input, you should use .val() instead of .html()
$(".jambooking").val( $(":checked").val());
$().html is for div. $().text is for <p>. You have to use different one for input field. Use $().val();
Change this one.
From
$(".jambooking").html( $(":checked").val());
To
$("input.jambooking:text").val( $(":checked").val());
check this out
$(".jambooking").val( $(":checked").val());
or check this link Jquery Text Editor
Hope it works.