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.
Related
This question already has answers here:
Implement siblings() in vanilla javascript
(5 answers)
Closed 8 months ago.
I have this html:
<form action="/action_page.php">
<label for="qsearch">Qsearch</label>
<input id="search1" type="search" value="" name="s">
<br>
<label for="num">Num</label>
<input type="number" value="" name="Num">
<br>
<label for="a">A</label>
<input type="text" value="" name="a">
<br>
<label for="a">B</label>
<input type="text" value="" name="b">
<input type="submit">
</form>
<script>
console.log( document.getElementById("search1").closest("input[type='text']") );
</script>
I want to get the next text input closest to search input without knowing the ID. But i can't seems to use closest()
What is the correct way to do it using vanilla javascript?
closest looks up in the DOM. In your case input#search1 is fist element in the DOM. You may try a recursive function like this and check if the element have next sibling. If it has next sibling and matches the type then return it else call the recursive function
function getNextSibling(elem, selector) {
let sibling = elem.nextElementSibling;
// check if the element have next sibling
while (sibling) {
if (sibling.matches(selector)) {
return sibling;
}
sibling = sibling.nextElementSibling;
}
};
const x = document.getElementById("search1")
.nextElementSibling;
console.log(getNextSibling(x, "input[type='text']"))
<form action="/action_page.php">
<label for="qsearch">Qsearch</label>
<input id="search1" type="search" value="" name="s">
<br>
<label for="num">Num</label>
<input type="number" value="" name="Num">
<br>
<label for="a">A</label>
<input type="text" value="" name="a">
<br>
<label for="a">B</label>
<input type="text" value="" name="b">
<input type="submit">
</form>
This question already has answers here:
Why does the reset button on html forms not reset hidden fields?
(5 answers)
Closed 2 years ago.
I need to empty all the values, all the checked boxes and all the selected items (reset the values inside )
except the inputs with type="hidden" attribute.
<form id="formname">
<input type="text" value="1232423"/>
<input type="password" value="abcdefgh"/>
<input type="file"/>
<textarea>some inputed text</textarea>
<input type="checkbox" checked="checked" />
<select>
<option>a</option>
<option selected="selected">b</option>
<option>c</option>
</select>
<input type="hidden" value="storeddata1"/>
<input type="hidden" value="storeddata2"/>
<input type="hidden" value="storeddata3"/>
</form>
Try this (https://codepen.io/AlibiGhazi/pen/XWddyPR)
$(':input','#formname')
.not(':hidden')
.val('')
.prop('checked', false)
.prop('selected', false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formname">
<input type="text" value="1232423"/>
<input type="password" value="abcdefgh"/>
<input type="file"/>
<textarea>some inputed text</textarea>
<input type="checkbox" checked="checked" />
<select>
<option>a</option>
<option selected="selected">b</option>
<option>c</option>
</select>
<input type="hidden" value="storeddata1"/>
<input type="hidden" value="storeddata2"/>
<input type="hidden" value="storeddata3"/>
</form>
You can also make use of form.reset(). This method when called on a form element, resets all its children to have the initial value that were given to these children.
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
I have a number of
<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">
I also have a input field
<input type="text" name="Add" value="">
I want
each price[] input field to have their own Addition Button next to it that will get the value from that specific price[] input field
add the value from the Add input field to it
update the value of that specific price[] input field in the end
How can I do that?
to iterate through the price[]-boxes for adding buttons right to them and set the value from price[] to the button, do it like this
<input type="text" name="price[]" value="100">
<input type="text" name="price[]" value="50">
<input type="text" name="price[]" value="10">
<input type="text" name="price[]" value="90">
<script type="text/javascript">
$(document).ready(function() {
$('input[name="price[]"]').each(function(i) {
$(this).after('<button class="additionButton" price="'+$(this).val()+'">'+$(this).val()+'</button>');
});
//click
$(".additionButton").on('click',function() {
//original price, set on load
alert($(this).attr('price'));
//price in the input-field before the button (could be changed, think this is the idea)
alert($(this).prev('input').val());
});
});
</script>
for the rest, i am not sure what you mean, "Add" has no value and you seriously want some kind of calculation? But try yourself, here was at least the iteration.
I am trying to get all class call Position $(".Position") and get then find the value that == 4 and then show the id.
<input type="Text" id="#34" value="1" class="Position">
<input type="Text" id="#22" value="2" class="Position">
<input type="Text" id="#37" value="3" class="Position">
<input type="Text" id="#41" value="4" class="Position">
Thanks
Use the Attribute Equals Selector
alert($("input.Position[value='4']").attr("id"));
First, you have to take off the '#' from your id's.
<input type="Text" id="34" value="1" class="Position">
Then you can find the input you are looking for with the following selector:
$('input.Position[value=4]').attr('id')