Targeting multiple input fields with using same name - javascript

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.

Related

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.

How to get inputs with array name

Just I want to get the inputs with name like this: name[], and just append to formdata the this kind inputs (name[]) with values.
P.D. Sorry for my bad english, it´s not my native language
<input name="name[]" type="text" value="1"></input>
<input name="name[]" type="text" value="2"></input>
<input name="name[]" type="text" value=""></input>
In this case, just to apped to formdata first and second inputs
name[]=1,2
You could use querySelectorAll() to retrieve the given inputs:
console.log(Array.from(document.querySelectorAll(`input[name='name[]']`)));
<input name="name[]" type="text" value="1"></input>
<input name="name[]" type="text" value="2"></input>
<input name="name[]" type="text" value=""></input>

change the attribute value on blur for text boxes

I have multiple textboxes and I want to update a data-price attribute on blur.
If I change the value need to change specific 'data-price' attribute.
$(document).ready(function() {
$('#price').blur(function(){
$test=$(this).attr('data-price');
$test=$(this).val();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="342" name="price" type="text" value="342">
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="3" name="price" type="text" value="3">
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="25" name="price" type="text" value="25">
<input id="price" class="default used_asset1" maxlength="8" placeholder="Amount" data-price="32" name="price" type="text" value="32">
Is it possible to update attribute value in jquery.What I did wrong in my code
Use price as class because element IDs should be unique within the entire document.
$(document).ready(function() {
$('.price').blur(function(){
//$test=$(this).attr('data-price');
//$test=$(this).val();
$(this).attr('data-price', $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="342" name="price" type="text" value="342">
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="3" name="price" type="text" value="3">
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="25" name="price" type="text" value="25">
<input class="price efault used_asset1" maxlength="8" placeholder="Amount" data-price="32" name="price" type="text" value="32">
You can't select an element by ID if the ID has been duplicated. It will work on the first one and ignore the rest. Selecting by class or element name will select all of them.
https://jsfiddle.net/5n71z2uq/
I'm selecting the inputs but you can put a class in and select VIA class.
$(document).ready(function() {
$('input').blur(function(){
$(this).attr('data-price', this.value);
});
});
Yeah you can. It's very easy, just try it.
$(document).ready(function(){
$('#price').blur(function(){
$(this).data('price', $(this).val());
});
});

Select last input with a value greater than zero jquery

I have a form with a bunch of inputs set with value zero like
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">
The user then types in quantities of products they want. I want to select the last input where they entered a quantity. I was able to do something similar with checkboxes like this.
$('.product-checkbox:checkbox:checked:last')
But how can I put in a condition for an input box to select the last input with value greater than zero? Thanks.
You could use :not() and the Attribute Selector [attribute]
:not([value='0'])
JavaScript example
let qtyGT0 = [...document.querySelectorAll(".qty:not([value='0'])")].reverse()[0];
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
Another JavaScript example
in pure JavaScript ES6 it would look like
let qtyGT0 = [...document.querySelectorAll(".qty")].filter( el => el.value > 0 ).pop();
// Just to test
if (qtyGT0) qtyGT0.classList.add("red");
.red{ background:red; }
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
jQuery:
var $qtyGT0 = $(".qty").filter((i, el) => el.value > 0 ).last();
// Just to test
$qtyGT0.addClass("red");
.red{ background:red; }
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="qty" value="0">
<input class="qty" value="1">
<input class="qty" value="1">
<input class="qty" value="0">
http://api.jquery.com/filter/
https://api.jquery.com/last/
A pure JavaScript answer is that you would just iterate them in reverse and stop at the first one you find.
var inputs = document.querySelectorAll("input");
for(var len = inputs.length-1; len >=0; len--){
if(inputs[len].value > 0){
console.log(inputs[len].name);
inputs[len].style.backgroundColor = "yellow";
break;
}
}
<input type="text" name="qty" size="4" autocomplete="off" class="form-control quantity_wanted text" value="1">
<input type="text" name="qty2" size="4" autocomplete="off" class="form-control quantity_wanted text" value="2">
<input type="text" name="qty3" size="4" autocomplete="off" class="form-control quantity_wanted text" value="3">
<input type="text" name="qty4" size="4" autocomplete="off" class="form-control quantity_wanted text" value="0">

On Selection of Radio Button the form should appear without reloading the page

Hi I am an amateur programmer. I want to have the form appear dynamically without reloading the page once user clicks the radio button. Is there any reference I can find. Can someone help me with this please.
Here's the HTML code
<p>First Name: <input type="text" name="fname" size="15" maxlength="20"/> </p>
<p>Term <select name="term">
<option value="noterm">No Term</option>
<option value="1year">1 Year</option>
</select></p>
<p>Enter IMEI: <input type="text" name="imei" size="15" maxlength="20" value=""/> </p>
<p>Selling Price: <input type="text" name="sprice" size="15" maxlength="20" value=""/> </p>
<p>Rep: <input type="text" name="rep" size="5" maxlength="3" value=""/> </p>
<p><input type="submit"name="submit" value="Tender" /></p>
</form>
<!--This is where I need the action to HAPPEN-->
<form>
<input type="radio" name="Credit" value="ISC" /> ISC<br />
<input type="text" name="credit1" size="15" maxlength="10" value=""/>
</form>
The easiest way will be to give your radio input and the hidden text input an id, and then use the following JavaScript:
document.getElementById("Credit").onclick = function() {
document.getElementById("credit1").style.display = "block";
}
You will need to hide the text input initially, which you can do from in your CSS with display:none. You can see an example of that here.
If you are able to use jQuery it will be even easier, without adding an id to your input elements, assuming your name attributes are unique:
$("input[name=Credit]").click(function() {
$("input[name=credit1]").show();
});

Categories