Calling document.getElementByName.Value inside html event handler [duplicate] - javascript

This question already has answers here:
How to use document.getElementByName and getElementByTag?
(6 answers)
Closed 5 years ago.
Just wondering if this would be a valid syntax.
<input type="text" name="memtype" value="1" onkeyup="javascript:gettype(document.getElementsByName('memtype').value);>

This will not be valid because getElementsByName is a collection and need to pass the index like
document.getElementsByName('memtype')[0]
function gettype(val) {
console.log(val)
}
<input type="text" name="memtype" value="1" onkeyup="javascript:gettype(document.getElementsByName('memtype')[0].value);">
The same operation can be done by just passing the value using this.value
function gettype(val) {
console.log(val)
}
<input type="text" name="memtype" value="1" onkeyup="gettype(this.value)">

getElementsByName returns collection. To get the value from that collection you have to use specific index, like:
document.getElementsByName('memtype')[0].value
But why to write document.getElementsByName('memtype').value when you can write this.value.
function getvalue(val){
console.log(val)
}
<input type="text" name="memtype" value="1" onkeyup="javascript:getvalue(this.value);"/>

Related

How to select inputs of type file that have been loaded by the user? [duplicate]

This question already has answers here:
How do I select elements on multiple attribute values
(6 answers)
Closed 3 years ago.
Assuming you have a large number of inputs of type 'file', like so:
<input type="file" id="fileSomething1" />
<input type="file" id="fileSomething2" />
Is it possible to select all inputs of type 'file' that the user has loaded at least 1 file into?
I tried this, but it didn't work:
$("input[type='file' && value!='']").length
You have incorrect syntax for chaining of multiple attribute equals selector. It should be:
$("input[type='file'][value!='']").length
Working Demo
I would also suggest you to consider using .filter() selector for comparing value condition.
This code enable loop checking for input type file,If any of it find having value then it would print
$("#butn").on("click", function() {
$("input[type=file").each(function() {
if ($(this).val() != "") {
console.log($(this).attr('id'))
}
});
})
$("input[type=file").on("change", function() {
if ($(this).val() != "") {
console.log($(this).attr('id'))
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="fileSomething1" />
<input type="file" id="fileSomething2" />
<button id="butn">click</button>

convert array of numbers to written form - e.g. 0 -> "zero" [duplicate]

This question already has answers here:
Transform numbers to words in lakh / crore system
(34 answers)
Closed 4 years ago.
How to accepts an array of numbers and returns an array of numbers in written form e.g.
[0,0,6,2,7] → [“zero”, “zero”, “six”,"two","seven"]
I want to input and return array of values not one value?
<div>
<input type="text" [(ngModel)]="number" placeholder="Input Number"/>
<div id="word">{{words[number]}}</div>
</div>
{{numbers[number]}}
<input type="text" [(ngModel)]="stringOfNumbers" placeholder="Input Number"/>
{{stringOfNumbers}}
<br>
{{arrayOfNumbers}}
words= ['zero','One','Two','Three','Four','Five','Six','seven','eight'];
stringOfNumbers = "1,2,3,4";
arrayOfNumbers = this.stringOfNumbers .split(',');
Improve my comment: (the stackblitz here)
//The .html
<input [ngModel]="numbers" (ngModelChange)="calculeNumber($event)">
{{result|json}}
//The .ts
export class AppComponent {
numbers:string;
result:string[]=[];
words= ['zero','One','Two','Three','Four','Five','Six','seven','eight'];
calculeNumber( numbers:any){
this.result=numbers.split(',').map(x=>
{
return this.words[+x]
});
}
}
I suggest you use a middleware for this (check out this answer: Convert digits into words with JavaScript, it's pretty much hardcoding. Add an event listener every time the input value changes and loop through the array.
document.getElementsByTagName("input")[0].addEventListener('change', function(){
alert("Input changed!");
// Code goes here
});

Turn a form into an associative array in Jquery [duplicate]

This question already has answers here:
Convert form data to JavaScript object with jQuery
(58 answers)
Closed 9 years ago.
I have the following form:
<form id="editForm">
<input class="span12" name="name" type="text" placeholder="Product name...">
<input class="span12" name="sku" type="text" placeholder="SKU...">
<input name="basePrice" class="span12" type="text" placeholder="Base price...">
</form>
How do I turn that into an associative array that can be accessed like the following?
formArray['name'], formArray['sku'], etc.
Here's a dead-simple way:
$.fn.form = function() {
var formData = {};
this.find('[name]').each(function() {
formData[this.name] = this.value;
})
return formData;
};
// use like
var data = $('#editForm').form();
This is totally unsafe and just grabs everything with a name, but it should get you started.

How to find out whether the check box is checked or not checked? [duplicate]

This question already has answers here:
How do I check whether a checkbox is checked in jQuery?
(68 answers)
Closed 9 years ago.
I have below code in my jsp.
<input type="checkbox" name="transport" id="bike" value="Bike"> I have a bike
<input type="checkbox" name="transport" id="car" value="Car"> I have a car
<input type="checkbox" name="transport" id="cycle" value="cycle"> I have a cycle
using jQuery I have to get all values whose check box is checked. How can I get the values whose check box is checked?
I'm not too familiar with jQuery, but try this:
var values = [];
$('input[name="transport"]').each(function () {
if ( $(this).is(':checked') ) {
values.push( $(this).attr('value') );
}
});
alert(values);
Try this:
$('#bike').is(':checked');
$(':checkbox[name=transport]:checked').each(function (i, ele) {
var value = $(ele).val();
console.log(value);
});

How to get index of textfield array in the form by using Javascript? [duplicate]

This question already has answers here:
Get child node index
(13 answers)
Closed 9 years ago.
I have a form with dozen of textfield elements. Any change of their values shall execute Javascript function. And until now I know what I shall to do, but I can't detect index of textfield that triggered function. I tried some solution I saw here & there but wasn't successful.
<form action="" method="post" enctype="multipart/form-data" name="myforma1" target="_self" id="myforma1">
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
<input name="txtfield" type="text" id="txtfield" onchange="detect_it(this);" value="name of person" size="20" maxlength="25" />
...
<script>
function detect_it(oo)
{
alert('Index of triggered element is: ' + oo.index);
/* rest of code */
}
</script>
You probably shouldn't give all your inputs the same name and id.
However, you can still look for the parent node, then iterate over the parent's children until you found your node to retrieve its index.
Try this getIndex() function:
<script>
var getIndex = function (node) {
for (var i =0;i<node.parentNode.children.length;i++) {
if (node.parentNode.children[i] === node) {
return i;
}
}
}
function detect_it(oo) {
alert('Index of triggered element is: ' + getIndex(oo));
}
</script>
See this Fiddle: http://jsfiddle.net/LkJxV/
edit: corrected code (again) (thx #Felix)
Your problem here is that index is not a property of the element. It can have differnet indexes depending on context but you can try
Try something like:
function detect_it(oo){
var inputs = document.getElementsByTagName('input')
for (var i = 0 ; i<inputs.length ; i++){
if(oo == inputs[i]{
alert('Index of triggered element is: ' + i);
}
}
//enter code here
}

Categories