Input live check - javascript

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

Related

Deleting value in hiddenfield when checkbox is unchecked jquery

I am pretty new with jquery and javascript. But i have made this function. When a checkbox is checked, it's value get set in a hiddenfield. Here is the function.
<script>
$('#checkDk').on('change', function () {
$('#MainContent_hiddenTargetDk').val($(this).val());
console.log($("#MainContent_hiddenTargetDk").val());
});
</script>
I dont know if this is the best way of doing it, but it works. The problem is when the checkbox is unchecked the value does not get deleted from the hiddenfield. I have been searching a bit around and found this.
var value = this.checked ? this.value : "";
Can you somehow use this to check if it is checked or not? And if yes how do i incorporate it in my function?
Here is the checkbox html.
<input id="checkDk" type="checkbox" value="208" onselect="getvalue()" autocomplete="off">
This should work:
<script>
$('#checkDk').on('change', function () {
$('#MainContent_hiddenTargetDk').val( $(this).prop("checked") ? $(this).val(): "");
console.log($("#MainContent_hiddenTargetDk").val());
});
</script>
$('#checkDk').on('change', function () {
if(this.checked){
var hidden = $('<input />').attr('type', 'hidden')
.addClass('chooseNameHere')
.val($(this).val());
$('#yourFormId').append(hidden);
}else{
$('#yourFormId').find('input[name=chooseNameHere]').remove();
}
});
$("#your_checkbox").prop("checked") should return true or false indicating if the checkbox is checked or not.
Try that instead of val()
Try
<script>
$('#checkDk').on('change', function () {
if (this.checked) {
$('#MainContent_hiddenTargetDk').val($(this).val());
console.log($("#MainContent_hiddenTargetDk").val());
} else { $('#MainContent_hiddenTargetDk').val(''); }
});
</script>

How to check if value of input is empty after browser refresh?

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

JQuery: If Checked Enable else Disable

Fiddle - http://jsfiddle.net/XH5zm/
JSBin - http://jsbin.com/UKIweJE/1/edit
I'm trying to enable/disable an input textbox by toggling if a checkbox is checked or not.
$(document).ready(function() {
if ($('.enable-padding').attr('checked') === true) {
$('.grab-padding').attr('enabled','enabled');
$('.grab-padding').val("13px");
} else {
$('.grab-padding').attr('disabled','disabled');
$('.grab-padding').val(" ");
}
});
What exactly am I'm doing wrong?
Any help is greatly appreciated.
You don't listen to the change event.
There is no enabled property.
.attr() doesn't return a boolean value and it doesn't change the properties.
$('.enable-padding').on('change', function() {
$('.grab-padding').prop('disabled', !this.checked)
.val(this.checked ? "13px" : "");
});
You have to add an event for change the state of checkbox:
$(document).ready(function() {
$('.enable-padding').on('change',function(){
if ($('.enable-padding').is(':checked')) {
$('.grab-padding').removeAttr('disabled');
$('.grab-padding').val("13px");
} else {
$('.grab-padding').attr('disabled','disabled');
$('.grab-padding').val(" ");
}
});
});
and modifiy the input for this:
<input class="grab-padding" type="text" value="13px"></td>
$('#chbox').click(function () {
if ( $('#txt_data').attr('disabled') =='disabled' ){
$('#txt_data').removeAttr('disabled');
}else{
$('#txt_data').attr('disabled','disabled');
}
});

Click off input area function using jQuery

I have an input field I want cleared. My jQuery works there but if I click the input field and then click off of it the value is back. What's the fix?
$('input').val('');
$('input').click( function() {
$('input').val('');
});
JS fiddle here. http://jsfiddle.net/thomasp423/HqvmD/
It seems that normally the one line I have would work BUT I'm working with some software that probably has js overriding this and adding it back on. Does anyone have a solution?
$('input').click( function() {
$(this).val('');
});
What you're saying is: clear all inputs when clicked on one input.
I think this is what you are looking for http://jsfiddle.net/HqvmD/1/
//$('input').val('');
$('input').focus( function() {
if ($(this).val() == 'search' ) {
$(this).val('');
}
});
$('input').focusout(function () {
if ($(this).val() == '' ) {
$(this).val('search');
}
});

Form validation using jquery and javascript codes

i am trying to validate my form for empty fields but i am not sure what code i should use can someone please direct me
i have tried the following code but its not working
$("validate").submit(function(event){
$(".offset2").each(function(index) {
if ($(this).val() == 0) {
$("#error").css({"display": "inline"}).text("Some of the fields are empty");
event.preventDefault();
}
});
});
Just use a plugin.... More flexibility as you grow.
Here's free one after 1 minute of google.
http://jqueryvalidation.org/
Check this
if ($(this).val().length == 0) { // .length is missing in your code
// Show Error
}
// Or
if (!$(this).val()) { // Empty string is consider as false type in JavaScript
// Show Error
}
Try this,
$(function(){
$("validate").submit(function(event){
event.preventDefault();
var status=true;
$(".offset2").each(function(index) {
if (!$(this).val()) {
$("#error").css({"display": "inline"}).text("Some of the fields are empty");
status=false;
}
});
return status;
});
});
aren't you missing a "#" before "validate".
$("#validate").submit(function(event){
$(".offset2").each(function(index) {
if ($(this).val() == 0) {
$("#error").css({"display": "inline"}).text("Some of the fields are empty");
event.preventDefault();
}
});
}
);
http://api.jquery.com/submit/
I would definitely recommend H5Validate http://ericleads.com/h5validate/
It allows you to use the proper HTML5 attributes for validation.
#CodeMonkeyForHire suggested using a Plugin.
The most used one is jQueryValidation. It will let you write markup like this:
<input id="cname" name="name" minlength="2" type="text" required/>
And then on your submit button you make one single call to validate all elements inside the form:
$("#commentForm").validate();
There are many other frameworks like ParselyJs or ValidateJs that you can try out.
P.S. Google is your friend, always look for plugins (probably someone else had the same problem you did)

Categories

Resources