This question already has answers here:
CSS selector to match elements by attribute's name start
(2 answers)
Closed 1 year ago.
For example I have these attributes in my html file <input type="number" data-input-primary-people /> and <input type="number" data-input-primary-amount /> how to select these starting with data-input-primary-
You can use spread operator and filter like this:
var res = [...document.querySelectorAll("*")].filter(t => [...t.attributes].filter(({ name}) => name.startsWith("data-input-primary-")).length > 0)
console.log(res);
<input type="number" data-input-primary-people" />
<input type="number" data-input-primary-amount" />
<input type="number" data-input-primary1-amount" />
Related
This question already has answers here:
jQuery access input hidden value
(9 answers)
Closed 1 year ago.
console.log($('.package_ids').val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="package_ids[]" name="package_ids[]" value="6" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="775" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="7207" />
I'm getting the right results when submitting this as a form. But when I get the value using jQuery I'm getting undefined.
I'm hoping to get something like an array [6, 775, 7207].
package_ids[] cannot be a class name. To get the expected array, you can use .map as follows:
const arr = $('.package_ids').map((i,elem) => +$(elem).val()).get();
console.log(arr);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="package_ids" name="package_ids[]" value="6"/>
<input type="hidden" class="package_ids" name="package_ids[]" value="775"/>
<input type="hidden" class="package_ids" name="package_ids[]" value="7207"/>
You could select the items with their name property, e.g.:
let values = [];
$('[name="package_ids[]"]').each(function (i, v) {
values.push($(v).val());
});
console.log(values);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" class="package_ids[]" name="package_ids[]" value="6" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="775" />
<input type="hidden" class="package_ids[]" name="package_ids[]" value="7207" />
This question already has answers here:
Is there a float input type in HTML5?
(14 answers)
Closed 5 years ago.
I need a simple input box to be a floating point number (anything with a . really). As it is right now, it doesn't allow me to put the dot and do a floating point. Should be simple but I can't find much on this.
Here is roughly the current code:
class MyComponent extends React.Component {
render () {
return (
<td>
<label> Value: </label>
<input
type='number'
min='0'
max='20'
className='form-control'
value={this.state.value}
onChange= {(evt) => this.onValueChange('value', evt.target.value)}
/>
</td>
)
}
}
The number type has a step value controlling which numbers precision which defaults to 1.
You can use this to set the floating point precision
<input type="number" step="0.1">
You will have
class MyComponent extends React.Component {
render () {
return (
<td>
<label> Value: </label>
<input
type='number'
step="0.1"
min='0'
max='20'
className='form-control'
value={this.state.value}
onChange= {(evt) => this.onValueChange('value', evt.target.value)}
/>
</td>
)
}
}
This question already has answers here:
Find html label associated with a given input
(22 answers)
Closed 5 years ago.
I have the following HTML, how can I retrieve the ID of the input from the tag's name in JavaScript?
<div class="named-tags">
<label for="radio_01" class="radio" >
<input type="radio" name="Name[labeled_tags][]" value="01" id="radio_button_01">
Fblabel
<span class="control-indicator"> </span>
</label>
</div>
Using document.getElementsByName('Name[labeled_tags][]') will return an array of elements with the specified tag.
You're most likely wanting to select the very first element with the tag name, in this case you would use document.getElementsByName('Name[labeled_tags][]')[0]
let inputElem = document.getElementsByName('Name[labeled_tags][]')[0];
console.log(inputElem.outerHTML);
<div class="named-tags">
<label for="radio_01" class="radio">
<input type="radio" name="Name[labeled_tags][]" value="01" id="radio_button_01"> Fblabel
<span class="control-indicator"> </span>
</label>
</div>
This question already has answers here:
HTML 5 - number regular expression
(5 answers)
Closed 5 years ago.
Please i have a field that enables user to enter numeric field. Thus,
<input class="form-control input-sm" id="first" name="first" onkeyup="calculate();javascript:checkNumber(this);" $type="text" value="<?php echo (isset($cur)) ? cur->FIRST : 'FIRST' ;?>">$
I want a number limitation let say from 0-30 on that field where by you can type number above 30.
<input class="form-control input-sm" id="first" name="first" onkeyup="calculate();javascript:checkNumber(this);" type="text" value="<?php echo (isset($cur)) ? $cur->FIRST : 'FIRST' ;?>">
With Simple Form and input tag you can do:
<form>
Quantity (between 1 and 30):
<input type="number" name="quantity" min="1" max="30"><br> </form>
I am using the code below in a html form:
<input type="text" name="cars[]" required>'
Note the use of "cars[]" for the name.
This allows me to have multiple inputs with the same name.
I would like to get the answers from all the inputs in JavaScript.
How can this be done?
I have the following WRONG code for this:
var element = document.getInput("cars[]");
for (i = 0; i < element.length; i++) {
alert(element[i].value);
}
You have to use document.getElementsByName() like this:
var element = document.getElementsByName("cars[]");
for(i=0; i<element.length;i++){
alert(element[i].value);
}
<input type="text" name="cars[]" value="a" required>
<input type="text" name="cars[]" value="b" required>
<input type="text" name="cars[]" value="c" required>
These two things in pure JavaScript net approximately the same result. The first is using the HTML form element to find all of the input elements attached to it. However, the syntax for finding the array called "cars[]" is troublesome and in my opinion a tad annoying. If I was going to do something in pure JavaScript I'd probably prefer the second way, using document.querySelectorAll.
window.addEventListener('load', function() {
var form = document.getElementById('thing');
form.elements['cars[]'].forEach(function(el, i) {
console.log("value is ", el.value)
}); //Form.elements[] array has been available since Chrome 7 or so. It should be available for use in just about any browser available.
var items = document.querySelectorAll('[name="cars[]"]');
items.forEach(function(el, i) {
console.log("Item Value is ", el.value)
});
});
<form id="thing">
<input type="text" name="cars[]" value="1" />
<br />
<input type="text" name="cars[]" value="2" />
<br />
<input type="text" name="cars[]" value="3" />
<br />
<input type="text" name="cars[]" value="4" />
<br />
<input type="submit" value="submit" />
</form>
You write
Note the use of "cars[]" for the name.
This allows me to have multiple inputs with the same name.
In HTML, you can have many inputs in the same form with the same name, regardless of that name having a [] suffix or not. This has always been used for, say, checkboxes. Most server-side libraries will then return the values for those inputs as an array.
An example of gathering all values for inputs with a given name could be the following:
document.querySelector("#b").addEventListener("click", () => {
const values = [];
document.querySelectorAll("input[name='color']").forEach(e => values.push(e.value));
console.log(values); // outputs ["foo", "bar", "baz"] if values unchanged
});
input { display: block; margin: 5px; }
<label>Enter your favorite colors
<input type="text" name="color" value="foo"/>
<input type="text" name="color" value="bar"/>
<input type="text" name="color" value="baz"/>
</label>
<label>
Enter your favorite food
<input type="text" name="food" value="flub"/>
</label>
<button id="b">Click me to output favorite colors</button>
You can give same id to all inputs like
<input type="text" id="inputId" name="cars[]" required>'
In Javascript iterate the element to get the value
var element = document.getElementsByName("cars[]");
for(i=0; i<element.length;i++){
console.log(element[i].value);
}