Develop Reference

set input as readonly in javascript

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);

if checkbox check but input empty disable another checkbox

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

Preventing global jQuery event on single form item

When my JS code loads I call the following which adds a onkeypress event to all text inputs:
$('#myForm input[type=text]').keypress(function(event) {
sysOnEnter(event, $('#myForm input[type=text]').attr('id'), modalId);
});
The function sysOnEnter is to click a button when the user presses the Enter/Return key:
function sysOnEnter(event, id, modalId) {
var key = event.key || event.keyCode;
if (key == 'Enter' || key == 13) {
var val = $('#' + id).val();
setTimeout(function() {
if ($('#' + id).val() == val)
document.querySelector('#' + modalId + ' .btn-primary').click();
},0);
event.preventDefault();
return false;
}
}
The time that I don't want this to happen is when using Google's auto-suggest address form:
<input
id = "autocomplete"
class = "form-control"
placeholder = "Start typing..."
onFocus = "initAutocomplete();geolocate();"
type = "text"
>
Is there an easy way to exclude this particular field from the javascript function?

Use the selector :not(#autocomplete) to exclude the element with the autocomplete id:
$('#myForm input[type=text]:not(#autocomplete)').keypress(function(event) {
console.log('firing event');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="text">
<input type="text">
<input type="text" id="autocomplete" placeholder="autocomplete">
<input type="text">
</form>

If the field you want to exclude is known beforehand you can use JQuery .not():
$('#myForm input[type=text]').not("#autocomplete").keypress(function(event) {

Jquery - check the value of inputs texts

I have some input texts like this :
<input type="text" value="5" maxlength="12" id="qty" class="input-text qty" name="qty2050" tabindex="1">
and
<input type="text" value="0" maxlength="12" id="qty" class="input-text qty" name="qty2042" tabindex="1">
And I want to check with jquery the values of each input, to execute a function if there is a quantity different from 0 in one input.
EDIT
How can I do that on page before unlod?
Thanks for help.

try in this way-
$(window).unload(function() {
$('.input-text qty').each(function (){
var val = parseInt($(this).val(),10);
// you can use math.floor if your input value is float-
//var val = Math.floor($(this).val());
if(val !== 0)
alert(val);
});
});

$('.input-text').change( function() {
if($(this.val() != "0")){ //
action here
}
});

You shouldn't have two same IDs on a page.
Quite simple should be:
$('input.input-text.qty').each(function(){
if ($(this).val() !== '0') {
alert('Gotcha!');
return false; //quit loop since we're ok with 1 occurance
}
});

Use change(): http://api.jquery.com/change/
Example: To add a validity test to all text input elements:
$("input[type='text']").change( function() {
// check input ($(this).val()) for validity here
});

var checkInput = function() {
if(this.value !== '0') {
// do something
}
}
$(window).bind('unload', checkInput);
$('input[type=text]').change(checkInput);
I hope this helps.

If you really want this on the unload event then something like this will work (its untested), otherwise bind to whatever event you want:
$(window).unload( function() {
$('.input-text qty').each(function (){
if( $(this).val() !== '0' ) {
alert("there is a 0");
return false;//breaks out of the each loop, if this line present will only get one alert even if both fields contain 0
}
});
});

How to save the value of INPUT in variable?

How to save the value of INPUT in variable to not to write a lot of duplicate code?
like var input = $(this).val();
full example
<div id="form">
1. <input type="text" value="title" />
2. <input type="text" value="value" />
</div>
$(function(){
$('#form input:eq(0)').bind({
focus: function(){
if($(this).val()=='title'){
$(this).val('');
}
},
blur: function(){
if($(this).val() == ''){
$(this).val('title');
}
}
});
$('#form input:eq(1)').bind({
focus: function(){
if($(this).val()=='value'){
$(this).val('');
}
},
blur: function(){
if($(this).val() == ''){
$(this).val('value');
}
}
});
});

I'm not exactly sure what you are asking, but this refactoring will work for toggling the value. EDIT: added default attribute to the html elements and shortened jQuery (still readable though) http://jsfiddle.net/UmZeZ/
<div id="form">
1. <input type="text" value="title" default="title" />
2. <input type="text" value="value" default="value" />
</div>
$(function() {
$('#form input').bind('focus blur', function() {
var value = $(this).attr('default');
if ($(this).attr('value') == value) {
$(this).attr('value', '');
} else if ($(this).attr('value') === '') {
$(this).attr('value', value);
}
});
});

To accomplish what you want, I would suggest using the HTML5 placeholder attribute. With Modernizr, we can detect browser support for this feature, and with this simple piece of code, we can get it to work even for browsers that do not support placeholder.
if(!Modernizr.input.placeholder){
var input = $('input[type="text"]');
input.focus(function(){
if(this.value === this.getAttribute('placeHolder')) this.value = '';
}).blur(function(){
if(this.value === '') this.value = this.getAttribute('placeHolder');
}).blur();
}
See a live demo of this here: http://www.jsfiddle.net/yijiang/cTDsL/1

Here is my solution. I would work to any field which has class="set-default"
Checkout the working example
Here is the code:
$(function(){
$('.set-default').bind({
focus: function(){
if(typeof($(this).data('def')) == 'undefined'){
$(this).data('def', this.value)
}
if(this.value == $(this).data('def')){
this.value = '';
}
},
blur: function(){
if(this.value == ''){
this.value = $(this).data('def');
}
}
})
});
basically all fields which had the class set-default will act as you like. You can always change the selector to $('#form input') but I think it's not useful.
HTH