I am currently trying to create a JS method which sets a specific input field as readonly if another field contains a value inside it but i am having issues with getting it to work.
$(document).ready(function(){
const priceInputs = $('.price input');
priceInputs.change(function(){
if($(this).val() === ''){
$(this).parents('.price').find('input').attr('readonly', false);
$(this).attr('readonly', false);
}else{
$(this).parents('.price').find('input').attr('readonly', true);
}
});
});
but when i load a record which contains a value inside it the other field isn't automatically set to readonly
anyone got any ideas?
Use each loop for class elements.
$('.price').each(function() {
$(this).change(function() {
console.log(this.value)
if (this.value === '') {
$('input[type="text"], textarea').attr('readonly', false);
} else {
$('input[type="text"], textarea').attr('readonly', 'readonly');
this.readOnly = false;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" class="price" />
<input type="text" name="input2" class="price" />
For changing the readonly property you should use prop() like below:
$("#name").prop('readonly', false);
Related
i have one chekbox and one textfield
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input class="form-control" type="text" id="usr_zipcode" maxlength="10" name="usr_zipcode" required="required">
how to make jquery, when vehiche1 is check but usr_zipcode is empty or no value, it disable another checkbox , name checkme :
<input type="checkbox" id="checkme">
i try to use below code but not working
$('#vehicle1').change(function () {
var input1 = $('#usr_zipcode');
input1.change( function() {
var empty = ( input1.val() == '' );
$("#checkme").prop('checked', false);
$("#checkme").attr('disabled','disabled');
});
}).change();
create a separate function to check or disable another checkbox like below
function checkOrDisableAnotherCheckBox() {
if($('#vehicle1').is(':checked') && $('#usr_zipcode').val() == ''){
$("#checkme").attr('disabled', true);
} else {
$("#checkme").removeAttr('disabled');
}
}
$('#vehicle1').change(function () {
checkOrDisableAnotherCheckBox();
});
$('#usr_zipcode').keyup(function () {
checkOrDisableAnotherCheckBox();
});
You can try my code:
$('#vehicle1').change(function () {
checkEmpty();
});
function checkEmpty(){
var empty = ( $('#vehicle1').prop('checked') && $('#usr_zipcode').val() == '' );
if (empty) {
$("#checkme").prop('checked', false);
$("#checkme").attr('disabled','disabled');
}else {
$("#checkme").removeAttr("disabled");
}
}
This is a demo: https://codepen.io/phuongnm153/pen/zQavrN
I have set of input fields which are generated dynamically, hence I can't use an ID. For each of the input fields I have a focusout method which validates the value input by the end user.
If the validation fails, I would like to clear the value of the input and bring back the focus to the same input. When I tried to use this keyword scope seems to be set to the windows rather than the input control.
Input fields screenshot:
function validate(reg){
debugger;
if(isNaN(reg)==false){
return;
}
else
{
alert("The field should contain number");
$(this).val(""); //clear the value
$(this).focus();
}
}
In the above code, this keyword doesn't seem to work.
Pass the event to your validate() function, and then you can use event.target to target the input element.
function validate(reg, e){
debugger;
if(isNaN(reg)==false){
return;
}
else
{
alert("The field should contain number");
$(e.target).val(""); //clear the value
$(e.target).focus();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input onfocusout="validate(this.value, event)"/>
<input onfocusout="validate(this.value, event)"/>
<input onfocusout="validate(this.value, event)"/>
Another method:
$(document).ready(function () {
var inputs = document.querySelectorAll("input[type=text]");
for (i = 0; i < inputs.length; i++)
inputs[i].addEventListener("focusout", function () { validate(this); });
});
function validate(reg) {
if (isNaN($(reg).val()) == false) {
return;
}
else {
alert("The field should contain number");
$(reg).val(""); //clear the value
$(reg).focus();
}
}
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
I need this function to work on multiple elements in the form, right now it only works on TfDiagnosis.
How do I use it on TfDiagnosis and TfDiagnosis2 with results in TfSnowmed and TfSnowmed2?
JQUERY
$(function snowmedlist() {
$('#TfDiagnosis').on('click keyup change blur', function() {
if ($('#TfDiagnosis').val() == '[D]Anterograde amnesia (780.93)') {
$('#TfSnowmed').val(206789002);
}
if ($('#TfDiagnosis').val() == '[D]Chills with fever (780.60)') {
$('#TfSnowmed').val(206760004);
}
});
});
HTML
<input name="TfDiagnosis" type="text" id="TfDiagnosis" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed">
<input name="TfDiagnosis2" type="text" id="TfDiagnosis2" size="100" >
<input type="text" name="TfSnowmed2" id="TfSnowmed2"></td>
It's easy to work on groups of elements using class names.
<input name="TfDiagnosis" type="text" id="TfDiagnosis" class="diagnosis" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed">
js:
$('.diagnosis').on('click keyup change blur', function() {
if($(this).val() == "...") {
$(this).next().val(1.00);
}
})
This way .next() is always the next element, so you don't need to keep passing IDs around. You can then store the data outside of the function to get rid of a cluster of IF statements:
var myData = []
myData['[D]Anterograde amnesia (780.93)'] = '206789002';
myData['[D]Chills with fever (780.60)'] = '206760004';
...then substitute the look-up from the array....
$('.diagnosis').on('click keyup change blur', function() {
$(this).next().val(myData[$(this).attr(id)]);
})
You can use
$('#TfDiagnosis, #TfDiagnosis2').on('click keyup change blur', function() {
if($(this).attr('id') == 'TfDiagnosis' ){
if ($(this).val() == '[D]Anterograde amnesia (780.93)') {
$('#TfSnowmed').val(206789002);
}
if ($(this).val() == '[D]Chills with fever (780.60)') {
$('#TfSnowmed').val(206760004);
}
}else{
//Stuff to do in case it is the #TfDiagnosis2
}
});
The most efficient way to make your function work on multiple inputs is to use event delegation:
$(document).on('click keyup change blur', 'input', function() {
var value = $(this).val(); //Get the value only once
if (value == '[D]Anterograde amnesia (780.93)') {
$('#TfSnowmed').val(206789002);
}
else if (value == '[D]Chills with fever (780.60)') {
$('#TfSnowmed').val(206760004);
}
});
Which will call the function for any input on the page. You probably want to assign a class to the specific inputs you want to use like so:
HTML
<input name="TfDiagnosis" type="text" id="TfDiagnosis" class="TfInput" size="100">
<input type="text" name="TfSnowmed" id="TfSnowmed" class="TfInput">
<input name="TfDiagnosis2" type="text" id="TfDiagnosis2" class="TfInput" size="100" >
<input type="text" name="TfSnowmed2" id="TfSnowmed2" class="TfInput">
JavaScript
$(document).on('click keyup change blur', '.TfInput', function() {
var value = $(this).val(); //Get the value only once
if (value == '[D]Anterograde amnesia (780.93)') {
$('#TfSnowmed').val(206789002);
}
else if (value == '[D]Chills with fever (780.60)') {
$('#TfSnowmed').val(206760004);
}
});
I have this code that disable the button when the text is empty, but I have a textarea html code. How can I include this that when the text and textarea are both empty the button will be disabled and when both are filled it enables. I tried the code below and it works on text only. Any ideas?
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"]').on('keyup',function() {
if($(this).val() != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textField" />
<textarea rows="4" cols="30" ></textarea>
<input type="submit" value="next" />
You miss the textarea selector in jQuery
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $("#texta").val();
var text_value = $('input[name="textField"]').val();
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textField" /><br>
<textarea rows="4" cols="30" id="texta"></textarea><br>
<input type="submit" value="next" />
You can do this using the .prop() method like:
// Cache the elements first
var $text = $('input[type="text"]');
var $textarea = $('textarea');
var $submit = $('input[type="submit"]');
// Set the onkeyup events
$submit.prop('disabled', true);
$text.on('keyup', checkStatus);
$textarea.on('keyup', checkStatus);
// Set the event handler
function checkStatus() {
var status = ($.trim($text.val()) === '' || $.trim($textarea.val()) === '');
$submit.prop('disabled', status);
}
F.Y.I.
As mentioned in the .prop() API Documentation:
Before jQuery 1.6, the .attr() method sometimes took property values
into account when retrieving some attributes, which could cause
inconsistent behavior. As of jQuery 1.6, the .prop() method provides a
way to explicitly retrieve property values, while .attr() retrieves
attributes.
FIDDLE DEMO
Just check both input feild and textarea.
For that you can bind the both fields to keyup event and check the value
$('input[type="submit"]').prop('disabled', true);
$("#yourtextfield,#yourtextarea").on("keyup","#parentdiv",function(){
if($("#yourtextfield").val() == '' || $("#yourtextarea").val() == ''){
$('input[type="submit"]').prop('disabled' , true);
}
else{
$('input[type="submit"]').prop('disabled' , false);
}
})
use prop
$('input[type="submit"]').prop('disabled', true);
$('input[type="text"],textarea ').on('keyup',function() {
if($(this).val()) {
$('input[type="submit"]').prop('disabled' , false);
}else{
$('input[type="submit"]').prop('disabled' , true);
}
});
by attr we can do by
$('input[type="submit"]').attr('disabled', 'disabled');
$('input[type="text"],textarea ').on('keyup',function() {
if($(this).val()) {
$('input[type="submit"]').removeAttr('disabled');
}else{
$('input[type="submit"]').attr('disabled','disabled');
}
});
see .prop() vs .attr()
I think you have to check space.
$("textarea").on('mouseout', function(){
if (!$.trim($("textarea").val())) {
alert("empty");
}
});
test it : http://jsfiddle.net/mehmetakifalp/ef5T9/
<input type="text" name="textField" />
<textarea rows="4" cols="30" id="texta"></textarea>
<input type="submit" value="next" />
<script type="text/javascript">
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $("#texta").val();
var text_value = $('input[name="textField"]').val();
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled' , false);
}else{
$('input[type="submit"]').attr('disabled' , true);
}
});
});
</script>
The selected answer does the job but it is not enough. A text area and text field filled with spaces ( pressing the space bar several times) will enable the submit button.
You therefore need to apply $.trim() to the values from these fields before passing them to the if statement as shown below
$(document).ready(function() {
$('input[type="submit"]').attr('disabled', true);
$('input[type="text"],textarea').on('keyup',function() {
var textarea_value = $.trim($("#texta").val());
var text_value = $.trim($('input[name="textField"]').val());
if(textarea_value != '' && text_value != '') {
$('input[type="submit"]').attr('disabled', false);
} else {
$('input[type="submit"]').attr('disabled', true);
}
});
});
I needed a solution where there are 2 text fields and a Submit button. The business logic was that the user should type in a value in any one of the text fields at a minimum to enable the Submit button.
Here is my solution which I used in my code. It is not the best/optimal solution possibly but it did the job. Do comment if you have a better way.
//Enable Submit button for search only on text input
$(".inputFieldCSSClass").on('keyup', function(){
var isEmpty = !($.trim($("#inputText1").val()).length > 0 ||
$.trim($("#inputText2").val()).length > 0);
$("#btnSubmit").prop('disabled', isEmpty);
});
I am very new to JQuery: I am a little perplexed to ask but asking is better than the alternative:
I am trying to disable a button but enable it when something is in the field/textbox.
This is simply experimental, just getting my feet wet here.
Alternatively I could disable the button on windows load or apply the attribute directly on the form element.
$(document).ready(function() {
$('#btnSubmit').attr('disabled', true);
$('#myForm :input').blur(function(){
if($('#myField').val() == '')
{
$('#btnSubmit').attr('disabled', true);
}
else
{
$('#btnSubmit').attr('disabled', false);
}
});
});
The problem is after I enter a value and leave the field the button is enabled but as soon as I click the button it is disabled again:
What am I missing?
Thanks my friends.
It is because the button is also considered an input field.
Try
$('#myForm :input:not(:button)').
Demo: Fiddle
Also use .prop() instead of .attr() to set disabled state
try using this:
$('#btnSubmit').attr('disabled', 'disabled'); // to disable buttons
$('#btnSubmit').removeAttr('disabled'); // to enable them
Try this one, this should work
HTML sample
<input type = "text" id = "txt1">
<button class = "btnSubmit">Submit</button>
And the jquery
$(".btnSubmit").attr("disabled", "disabled");
$("#txt1").keyup(function() {
if(jQuery.trim($(this).val()) != '') {
$('.btnSubmit').removeAttr('disabled');
}
});
$('#myForm:input').on('keyup' , function() {
if($.trim($('#myField').val()).length > 0){
$('#btnSubmit').prop('disabled', false);
}
else {
$('#btnSubmit').prop('disabled', true);
}
});
*This would work. Please try*
You can try this,onkeyup check if the textbox is empty is so disbale the button , else enable the button.
HTML:
<form id="myForm">
<input id="myField" type="text"/>
<input id="btnSubmit" value="hi" type="button"/>
</form>
jQuery:
$(document).ready(function() {
//Load with button disabled,since the value of the textbox will be empty initially
$('#btnSubmit').attr('disabled', true);
//onkeyup check if the textbox is empty or not
$('#myForm input[type="text"]').keyup(function(){
if($('#myField').val() == '')
{
$('#btnSubmit').prop('disabled', true);
}
else
{
$('#btnSubmit').prop('disabled', false);
}
});
});
$(document).ready(function() {
$('#btnSubmit').prop('disabled', true);
$('#myForm input[type="text"]').keyup(function(){
if($('#myField').val() == '')
{
$('#btnSubmit').prop('disabled', true);
}
else
{
$('#btnSubmit').prop('disabled', false);
}
}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input id="myField" type="text"/>
<input id="btnSubmit" value="hi" type="button"/>
</form>