I want to hide all inputs with class "chang" that contain any value after browser refresh, but entered by the user before refreshing. I tried few things, and nothing works. It's my HTML code:
<input class="chang" id="test1" /> <input class="chang" id="test2" />
And script:
$(document).ready(function() {
if( $(".chang").val().length != 0 ) {
$(this).hide();
}
});
I tried to make it works in Firefox (if it's matter). What am I doing wrong in this case?
$(document).ready(function() {
$('.chang').each(function(index){
if($(this).val().length != 0){
$(this).hide();
}
});
});
Use each() to iterate multiple elements with same class.
Try this:
$(".chang").each(function(){
if($(this).val().length != 0) {
$(this).hide();
}
});
It iterates over each of the .chang elements allowing you to use the $(this) correctly
DEMO
You have to check if the value of the input is empty like this:
if( $(".chang").val() == "" ) {
$(this).hide();
}
fiddle
Related
i got a input field and a button
<input required id="solution" name="solution" type="text" placeholder=""class="form-control input-md">
<button style="background-color:#da251d;" id="sendForm" name="sendForm" class="btn btn-success">Send</button>
Now i want to check the input Field for an value, when the value is incorrect, the button should be disbaled, i try it with js like this
$(document).ready(function(){
$(“#solution”).keyup(function(){
if($(this).val() == ‘value’) {
$(‘#sendForm’).attr(‘disabled’,‘disabled);
}
else {
$(‘#sendForm’).removeattr(‘disabled’);
}
});
});
But it dont work, can you help me pls?
i think you did the typo error on .removeAttr
$(document).ready(function(){
$("#solution").keyup(function(){
if($(this).val() == "value") {
$("#sendForm").attr("disabled","disabled");
}
else {
$("#sendForm").removeAttr("disabled");
}
});
});
You should try to use the "change" or the "input" event. It would look similar to
$('#solution').on('change', function(){
// validation & toggle button state
})
For further event documentations:
change
Easy one!
The code does not work since you're using quotation marks (”) but what you should be using are the String marks (" or ').
The working code:
$(document).ready(function(){
$("#solution").keyup(function(){
if($(this).val() == 'value') {
$('#sendForm').attr('disabled', 'disabled');
}
else {
$('#sendForm').removeAttr('disabled');
}
});
});
Jsbin
Hey this is working fine ,
$("#solution").keyup(function(){
if($(this).val() == 'value') {
$('#sendForm').attr('disabled',false);
}
else {
$('#sendForm').attr('disabled',true);
}
});
You can use attr method for setting disabled property as true or false as per your need.
demo
I have this div inside my page;
<div class="workspace" id="workspace">
<div data-ng-repeat="node in controller.Nodes" on-last-repeat=on-last-repeat>
</div>
</div>
On my typescript code, I have this to check if there are required fields that are not set.
if ($('#workspace').find('.ng-invalid').length != 0)
This is not working. The length is always 0. I also tried the following below but no luck:
if ($('#workspace').find('.has-error.form-control').length != 0)
if ($('#workspace').find('.invalid').length != 0)
Any ideas?
child element do not have class attribute. You can rather use has attribute selector:
if ($('#workspace').find('[data-ng-repeat]').length != 0)
Is it possible that it is because you run the JQuery part before the document is completely ready?
I have an example like this:
if ($('#workspace .ng-invalid').length != 0) {
console.log('found in FIRST');
}
// on document.ready
$(function() {
if ($('#workspace .ng-invalid').length != 0) {
console.log('found in SECOND');
}
});
and only the second triggers.
To iterate over all invalid elements with JQuery use each(index, object):
$(function() {
$('#workspace .ng-invalid').each( function (index, object) {
console.log(object);
});
});
I am creating a calendar event app where you can save people's birthday dates and edit people's names or dates whenever you want.
To display stored events I am using a forEach loop in JSP. I have a span named ld-option-okay-edit in each div. You can edit previous data after you click on that span and save your data.
But before clicking on the save button I am checking whether any field in a particular div is empty or not, using a jQuery hover function.
If any field is empty then I am disabling the span element so that it can't forward request to the servlet, but the problem is I am not able to disable it.
??????
THE PROBLEM
???????
My question is how can I disable a span through jQuery, or how can I prevent the onclick event of a span using jQuery?
Here is my code:
<c:forEach items="${relativeUser}" var="user">
<div class="elementsdiv">
<form action="<c:url value=" ******">" method="post">
<div class="cld-option-okay" >
<span class="glyphicon glyphicon-ok cld-option-okay-edit" name="cld-option-okay-edit" ></span>
</div>
<div class="cld-option-name" >
<input class="cld-name-input" value="${user.name}" placeholder="Name of the person" type="text" name="name">
</div>
</form>
</div>
</c:forEach>
What I have tried until now in jQuery is:
$(".elementsdiv").each(function (i, data) {
$($(data).find('.cld-option-okay')).hover(function (e) {
e.preventDefault();
if ($($(data).find('input[name="name"]')).val() === "") {
$($(data).find('span[name="cld-option-okay-edit"]')).addClass('disabled');//in this line i am getting trouble
}
}
});
For that line I even tried:
1)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","true");//with single quote also
2)$($(data).find('span[name="cld-option-okay-edit"]')).attr("disabled","disabled");//with single quote also
3).prop("disabled", true );
4).attr('disabled', '');
5).attr("disabled", "disabled");
6).off( "click", "**" );
7).unbind( "click", handler );
but when I apply:
`$($(data).find('span[name="cld-option-okay-edit"]')).hide()`;//it is applying
**********************
`$($(data).find('span[name="cld-option-okay-edit"]'))`till here code is working fine my problem is in applying disable.
previously i applied disable like below
$('.cld-option-okay-edit').addClass('disabled');
but it disables okay span in all divs
*************************
For enable or disable a span, you could do it like this:
var isEmpty = false;
$('#myDiv > input').keyup(function(){
isEmpty = false;
$('#myDiv > input').each(function(i,obj){
if(this.value == ""){
isEmpty = true;
return false;
}
});
// Styles for the span.
if( ! isEmpty){
$('#myDiv > span').removeClass('disabled');
} else {
$('#myDiv > span').addClass('disabled');
}
});
$('#myDiv > span').click(function(){
if(isEmpty){
alert("disabled");
} else {
alert("enabled");
}
});
I think this is what your code should look like based on what you have written, but I am not sure it is actually what you want to happen. If you want to disable it, you need to use prop()
$(".elementsdiv").each(function() {
var elem = $(this);
elem.find('.cld-option-okay').hover(function(e) {
if (elem.find('input[name="name"]').val() === "") {
elem.find('span[name="cld-option-okay-edit"]').addClass('disabled'); /*.prop("disabled",true); */
}
});
});
I have two inputs, text and checkbox:
<input type="text" id="09_1" name="09_1" class="rounded"/>
<input type="checkbox" checked id="h09_1" name="h09_1" class="rounded"/>
the textbox 09_1 is updated with a number by jquery9result of database lookup)
I want the change of the input text to trigger a javascript function that checks the checkbox h09_1.
So something like:
$("#09_1").on("change", function (event) {
alert('test');
});
This alert does not even work so this is not correct but where I am. I obviously want it to check the box rather than alert.
The checking of the checkbox must only happen if the number is greater than 0.
Thanks in advance.
If your code isn't firing, you might try putting the 'on' on the document like so:
$(document).on("change", "#09_1", function (event) {
if(!isNaN(this.value)){
if(this.value > 0)
$('#h09_1').attr('checked','checked');
else
$('#h09_1').removeAttr('checked');
}
});
I think you may want the keyup event
http://jsfiddle.net/steelywing/zkBCx/2/
$('#09_1').on('keyup', function () {
$('#h09_1').prop('checked', +$(this).val() > 0);
});
check out this jsfiddle it runs a value check when the input is changed.
$('#09_1').change(function(){
if($(this).val() > 0){
$('#h09_1').attr('checked','checked');
} else {
$('#h09_1').removeAttr('checked');
}
});
Currently Im have the following script which checks to see if a checkbox value has changed but its not working when I try to use it!
<script>
$('input[type=checkbox]').change(function () {
if ($(this).is(':checked')) {
if ($(this).prev().attr('checked') && $(this).val() != $(this).prev().val()) {
alert("previous checkbox has same value");
}
}
});
</script>
<input name="" type="checkbox" value="here"/>(if this was checked)
<input name="" type="checkbox" value="here"/>(then this)
<input name="" type="checkbox" value="there"/>(would not allow prompt alert)
<input name="" type="checkbox" value="here"/>(would allow)
you can see it working here yet it does not work when i try to use it
http://jsfiddle.net/rajaadil/LgxPn/7
The idea is to alert when a checked checkbox value is different from the previously checked checkbox value!
Currently my checkbox look like
<input type="checkbox" name="checkbox[]" onClick="getVal();setChecks(this)" value="`key`=<?php echo $rspatient['key']?>" class="chk" id="chk<?php echo $a++?>"/>
I thought the function ('input[type=checkbox]').change(function() would get these but im wrong somewhere?
To select the previous checked sibling checkbox, use this:
$(this).prevAll(":checked:first")
I expected to use :last, but :first is what works. This is counter-intuitive to me and inconsistent with how :first and :last usually work, but I tested it in several browsers and the result is consistent.
$(':checkbox').change(function() {
if (this.checked) {
var lastChecked = $(this).prevAll(":checked:first");
if (this.value == lastChecked.val()) {
alert("previous checked box has same value");
}
}
});
Demo: http://jsfiddle.net/LgxPn/15/
Edit: If by "previously checked checkbox" you mean the last box the user clicked, then you'll need to keep track of that yourself. There's no built-in jQuery method that will tell you anything about click history.
What happens when the user first checks several boxes, and then checks and immediately unchecks a box? Should the next most recently checked box be used? If so, then you need to keep track of all checked boxes, and what order they were clicked. Here's how you can keep track of the checked boxes:
var lastChecked = [];
$(':checkbox').change(function() {
if (this.checked) {
if (lastChecked.length && this.value == lastChecked[0].value) {
alert("the last box you checked has the same value");
}
lastChecked.unshift(this);
}
else {
lastChecked.splice(lastChecked.indexOf(this), 1);
}
});
Demo: http://jsfiddle.net/LgxPn/21/
Just a guess (with some better syntax), try this:
<script type="text/javascript">
$(function() {
$('input:checkbox').change(function() {
if($(this).is(':checked'))
{
if ($(this).prev().prop('checked') && $(this).val() != $(this).prev().val()) {
alert("previous checkbox has same value");
}
}
});
});
</script>
Your alert message and your if statement don't match. You check to see if the values !=, but the alert says they are equal. I'm assuming the alert is the case you want to check for. Try:
$(':checkbox').change(function() {
var $this = $(this);
var $prev = $this.prev();
if($this.is(':checked')) {
if($prev.is(':checked') && $this.val() === $prev.val()) {
alert('Previous checkbox has same value');
}
}
});
And as the others mentioned, make sure this is all within a $(document).ready() block
This seems to work for me in Chrome:
$(function() {
$('input[type=checkbox]').click(function() {
if ($(this).is(':checked')) {
if ($(this).prev().prop('checked')) {
if ($(this).val() != $(this).prev('input[type=checkbox]').val()) {
alert("previous checkbox has same value");
}
}
}
});
});
Here's a JSFiddle: http://jsfiddle.net/gy8EQ/