There are several inputs and I want it to detect the variability in the input and give it the result. Currently, it works statically, I want to make it dynamically detect the digit change in the inputs.
I can do this with only 1 input but how can I do it for multiple inputs?
var allHaveSameValue = $(".inputclass").toArray().every(function(input, index, inputs) {
return input.value === inputs[0].value;
});
console.log(allHaveSameValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
You can listen to the input event to run the check.
let $inputClass = $('.inputclass');
$inputClass.on('input', function(e){
let val = $(this).val();
let allHaveSameValue = $inputClass.toArray().every(input => input.value === val);
console.log(allHaveSameValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
<input type="text" class="inputclass" value="1"/>
Related
I have two inputs fields:
<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" />
I want a function to copy the text of the first input automatically when we click on the second input without using Jquery
Thanks
To check if the user clicks on the <input> element, add an event listener to it.
Then, get the value of the first text field using the value property.
Here is your code:
document.getElementById('two').addEventListener("click", function() {
this.value = document.getElementById('one').value;
});
<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" />
Here is a living demo: https://codepen.io/marchmello/pen/XWmezNV?editors=1010
A basic way of doing this:
<input type="text" id="one" name="one">
<input type="text" id="two" name="two" onfocus="this.value = document.getElementById('one').value">
here is the example to do this.
var one = document.getElementById("one");
var two = document.getElementById("two");
function myFunction(){
two.value = one.value;
}
<input type="text" id="one" name="one" />
<input type="text" id="two" name="two" onfocus="myFunction()" />
My page is made of several forms with several inputs called "values[]".
When modifying these inputs in one of the forms, I would like to sum the values and display the result in an other input of the same form called "total".
My html code looks like that:
<form action="index.php" method="post" id="form_1">
<input type="text" name="values[]" id="value_1_1" onkeyup="sum_values(this)" />
<input type="text" name="values[]" id="value_1_2" onkeyup="sum_values(this)" />
[... More inputs with the name "values[]" ]
<input type="text" name="total" disabled>
</form>
<form action="index.php" method="post" id="form_2">
<input type="text" name="values[]" id="value_2_1" onkeyup="sum_values(this)" />
<input type="text" name="values[]" id="value_2_2" onkeyup="sum_values(this)" />
[... More inputs with the name "values[]" ]
<input type="text" name="total" disabled>
</form>
and my javascript is :
<script type="text/javascript">
function sum_values(x){
var arr = document.getElementById(x.form.id).elements['values[]'];
var tot=0;
for(var i=0;i<arr.length;i++)
{
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById(x.form.id).elements['total'].value = tot;
}
</script>
I was very happy to finally see the first form working, but I then figured out that the second one was not...
Could you help me to understand why ?
I'm a beginner at javascript and I tried to arrange some code I found.
Thank you very much
If you'd like to get all elements within a specific form, you can do so using code similar to the following. The rest of your code should work fine, except your final result input selector.
var formId = 'form1';
var arr = document.querySelectorAll('#' + formId + ' [name="values[]"]');
var tot=0;
for(var i=0; i<arr.length; i++) {
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.querySelector('#' + formId + ' [name="total"]').value = tot;
<form id="form1">
<input type="text" name="values[]" value="5" />
<input type="text" name="values[]" value="1" />
<input type="text" name="values[]" value="6" />
<input type="text" name="values[]" value="8" />
<input type="text" name="values[]" value="2" />
<input type="text" name="values[]" value="0" />
<input type="text" name="values[]" value="1" />
<input type="text" name="values[]" value="3" />
<input type="text" name="total" disabled>
</form>
I'm doing a form with an input URL. I would like to know how do I if the URL is a Youtube video change the input values and the radio label text, if the Vimeo for example change the value and the label text and want to be your one more input radio.
<form method="post" id="form">
<label>URL: <input type="url" size="60px" name="url" ><br>
<div class="examplo">http://www.example.com/304005/name-video</div><br></label>
<b>Tamanho:</b>
<label><input type="radio" name="t" value="488" checked> 488 x 366px</label>
<label><input type="radio" name="t" value="400" > 400 x 300px</label>
<label><input type="radio" name="t" value="240" > 240 x 180px</label>
<label><input type="radio" name="t" value="180" > 180 x 135px</label>
<input type="submit" name="btn" id="buton" value="Submit" />
</form>
Just use String.prototype.startsWith e.g.
<label>URL: <input id="foo" type="url" size="60px" name="url" ><br>
With
const input = document.getElementById('foo');
const value = input.value;
const isYouTube = value.startsWith('http://www.youtube'); // for youtube
I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");
im trying to create text box which is used to enter value in other 4 text box one by one
i had tryed the below code but it copy's only to one text box...
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
</head>
<body>
<input type="text" name ="a" id="copy_from" onKeyUp="copy_data(this)"/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
enter code here
<input type="text" name ="a" id="copy_to" disabled/>
</body>
</html>
Demo http://jsfiddle.net/Cn6Rb/
Id are unique do this. i.e. use class attribute instead
*API: http://api.jquery.com/keyup/
Hope this fits your need :)
Code
$(document).ready(function () {
$('#copy_from').keyup(function(){
$('.copy_to').val($(this).val());
});
});
Html
<input type="text" name="a" id="copy_from" />
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>enter code here
<input type="text" name="a" class="copy_to" disabled/>
Try this (Hit Enter Key to copy value):
Fiddle
<input type="text" name="a" id="copy_from" onKeyUp="copy_data(this,event)"/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
enter code here
<input type="text" name="a" class="copy_to" disabled/>
<script>
var count = 0;
function copy_data(val, event) {
if (event.keyCode == 13) {
if (count <= 4) {
var a = document.getElementsByClassName('copy_to')[count];
a.value = val.value;
val.value = '';
count++;
}
}
}
</script>
Note Id should be unique, use different strategy
Using Jquery
javascript code
function copy_data(val){
$('.myKlass').val(val.value);
}
html code
<input type="text" class="myKlass" name ="a" id="copy_to1" disabled/>
<input type="text" class="myKlass" name ="a" id="copy_to2" disabled/>
<input type="text" class="myKlass" name ="a" id="copy_to3" disabled/>
Using javascript
function copy_data(val){
var elem_list = document.getElementsByName('a');
for(var i = 1; i < elem_list.length;i++){
elem_list.item(i).value = val.value;
}
}
Actually, class is not the best attribute to do that, as it is supposed to serve as a way to apply styles rather than identifying dom elements. You could use the html5 "data-*" attributes to have a cleaner HTML code, like this:
<input type="text" name ="a" data-role="source"/>
<div data-role="destination">
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
</div>
This way, you only need two "data-role" polluting your html. The "data-role" attribute is pretty common in jQuery (mainly due Twitter Bootstrap widgets).
Then, you only need this:
$("[data-role=source]").on("keyup", function(){
var that = this;
$($("[data-role=destination]").children()).each(function(index, item) {
item.value = that.value;
});
});