We Keep Coding

jQuery: select id by matching only part of its name [duplicate]

This question already has an answer here:
jQuery: Finding partial class name [duplicate]
(1 answer)
Closed 2 years ago.
In my code I've got pleny of inputs with the following pattern:
<input type="text id="Order_Products_0_quantity" value="0">
<input type="text id="Order_Products_1_quantity" value="1">
<input type="text id="Order_Products_2_quantity" value="2">
etc
The only difference between them is the number in the middle which stands for their place in the row. Is it possible to somehow match all of them and select their values with jQuery?

The correct way to do this would be:
<input type="text" data-order-qty="0" class="Order_Products_quantity" value="0">
<input type="text" data-order-qty="1" class="Order_Products_quantity" value="1">
<input type="text" data-order-qty="2" class="Order_Products_quantity" value="2">
You can then retrieve the element like so:
$(".Order_Products_quantity[data-order-qty=2]");
Or fetch the order qty like so:
$(".Order_Products_quantity").eq(1).attr('data-order-qty');
Here's more info on using custom attributes:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

You can try using Attribute Starts With Selector [name^="value"].
Demo:
$('[id^=Order_Products_]').each(function(){
console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Order_Products_0_quantity" value="0">
<input type="text" id="Order_Products_1_quantity" value="1">
<input type="text" id="Order_Products_2_quantity" value="2">

Attribute selectors to the rescue:
Attribute Starts With Selector [name^=”value”]
Attribute Ends With Selector [name$=”value”]
var inps = $('input[id^="Order_Products_"][id$="_quantity"]')
console.log(inps.map(function () { return +this.value }).get())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Order_Products_0_quantity" value="0">
<input type="text" id="Order_Products_1_quantity" value="1">
<input type="text" id="Order_Products_2_quantity" value="2">
<input type="text" id="Order_Products_0_foo" value="4">
<input type="text" id="Order_Products_1_foo" value="5">
<input type="text" id="Order_Products_2_foo" value="6">
It would be better to add a class, but this selector will work.

JQuery "onchange" event on just one checkbox among multiple in a group based on label text

I have a group of checkboxes as -
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Due to variable values of id and name, I'm unable to handle onclick event on checkbox with label One.
I've tried this which works fine, but I don't want to use check_1 since the number 1 is variable and could be changed.
$("#check_1").change(function() {
alert('Checkbox One is clicked');
});
How do I do this as I have no access to modify the html ?

You can use a selector like this $('input[type="checkbox"]:has(+ label:contains("One"))') with the label text as below,
$('input[type="checkbox"]:has(+ label:contains("One"))').on('click', function(){
alert('Checkbox One is clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>

Looks like your only criteria is the text of the label so you could target the input based on that label like :
$('label:contains("One")').prev('input:checkbox').change(function(){
console.log('One changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Hope this helps.

Angular directive to enable textbox

In the following if checkbox is clicked the readonly attribute from the textbox must be removed and on unclicking git should be added.Can this be done by angular directive
<div class="radio">
<label>
<input type="radio">Project</label>
<input type="text" name="project" id="project" readonly/>
</div>

You can just use the built-in directive ngReadonly:
<input type="checkbox" ng-model="readonly">Project</label>
<input type="text" name="project" id="project" value="" placeholder="Project" ng-readonly="!readonly"/>
Here's a working plunkr.

Take a look on https://docs.angularjs.org/api/ng/directive/ngReadonly:
<label>Check me to make text readonly: <input type="checkbox" ng-model="checked"></label><br/>
<input type="text" ng-readonly="checked" value="I'm Angular" aria-label="Readonly field" />

Remove disable attribute when selecting a radio button

I am sure this has been answered before but I am not able to find what I need. The jsfiddle below is a basic idea of what I am trying to do. I want the user to come to the page and the text/select fields are disabled.
If they select EITHER of the radio buttons in the 'radio' class, I want the disable attribute to be removed from all 3 fields in the 'fields' class. I have tried different onClick events and cannot seem to get it to work but I am not that familar with javascript and jquery.
Can anyone give me an idea of how I can make this happen?
http://jsfiddle.net/q5jqqgnt/
<input class="radio" name="radio" type="radio">Radio 1
<input class="radio" name="radio" type="radio">Radio 2
<br>Field 1
<input class="fields" disabled="disabled" name="field1" type="text">
<br>Field 2
<input class="fields" disabled="disabled" name="field2" type="text">
<br>Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>

you need to remove the disabled attribute with the .removeAttr() function in jQuery
$('.radio').change(function(){
$('.fields').removeAttr('disabled');
});
JSfiddle demo

At its simplest, I'd suggest using prop(), rather than removeAttr():
$('.radio').on('change', function(){
$('.fields').prop('disabled', false);
});
$('.radio').on('change', function() {
$('.fields').prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" disabled="disabled" name="field1" type="text" />
<br />Field 2
<input class="fields" disabled="disabled" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
You could, in compliant browsers, also somewhat emulate the disabled property's presence, and removal, with just CSS:
.radio ~ input.fields {
pointer-events: none;
opacity: 0.4;
background-color: #ccc;
}
.radio:checked ~ input.fields {
pointer-events: auto;
opacity: 1;
background-color: #fff;
}
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" name="field1" type="text" />
<br />Field 2
<input class="fields" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
Unfortunately, while this works to prevent mouse-interaction (the user cannot focus the fields with via a mouse-click), they can still use the tab button to focus the field and enter text, and, of course, the form-elements would still be considered 'successful' (albeit with potentially empty-values), and would be submitted to the server when the form is submitted.
So, while potentially useful under some very specific circumstances, it's almost certainly not to be used for most situations.
References:
CSS:
pointer-events.
jQuery:
on().
prop().

jQuery Change Input text upon selection of radio button having multiple forms in same page

Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?

Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.

A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example