Get id of active textfield - javascript

If I have 4 text boxes in my form, at any point can I get id of text field in which user is filling the information at the moment.
Eg. in following context, I should be able to get id of textbox 3.
Thanks

You can get the currently active element using document.activeElement, so its ID using document.activeElement.id.
Focus on any of the textboxes in the snippet to see how it works:
setInterval(function() {
console.log("Active element: " + document.activeElement.id);
},1000);
<input type="text" name="" id="1">
<br>
<input type="text" name="" id="2">
<br>
<input type="text" name="" id="3">
<br>
<input type="text" name="" id="4">

You can use getAttribute() like the following way:
function myFunc(thatText){
console.log(thatText.getAttribute('id'));
}
<div>
<input type="text" id="txt1" onchange="myFunc(this)" placeholder="1"/><br/>
<input type="text" id="txt2" onchange="myFunc(this)" placeholder="2"/><br/>
<input type="text" id="txt3" onchange="myFunc(this)" placeholder="3"/><br/>
<input type="text" id="txt4" onchange="myFunc(this)" placeholder="4"/>
</div>

There can be an onkeyup function. pass this from the DOM and in js use that argument to get id
function getElem(elem) {
console.log(elem.id)
}
<input type="text" name="test" id="1" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="2" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="3" onkeyup="getElem(this)">
<br>
<input type="text" name="test" id="4" onkeyup="getElem(this)">

Related

Get the input value of the last input field using JQuery

Is there a way to get the last value of input text fields inside the menus class?
The values are dynamic and the number of input fields are also dynamic.In this example we have 4 input fields inside the menus class and the last value I want to get is 4.
<p class="menus">
<input type="text" name="test" class="test" value="1">
<input type="text" name="test" class="test" value="2">
<input type="text" name="test" class="test" value="3">
<input type="text" name="test" class="test" value="4">
</p>
You can use jquery last-child-selector
function getValue() {
console.log($(".menus input:last-child").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="menus">
<input type="text" name="test" class="test" value="1">
<input type="text" name="test" class="test" value="2">
<input type="text" name="test" class="test" value="3">
<input type="text" name="test" class="test" value="4">
</p>
<button type="button" onclick="getValue()">Get Value</button>

jQuery to populate array-named form fields based on first entered text box value

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");

jQuery getting ID of input with class on keyup not working

I have a bit of problem with my code here. What I am trying to accomplish is to get the ID of an input field on key up. All the input fields of interest have a class "count". All of them also have the same ID but it increments, say field1, field2, field3. I also have some "answer" inputs.
The mechanism I am trying to accomplish is to first get the ID from the input where I am typing (keyup). Then I proceed to pass in that value (var valueField) to the function updateFields(idNumber). After that, I just simply add 100 to the value of the field#x and finally I append the final value to its matching input with the id of answerx.
My code is not working. Does anybody know why? Is this approach correct? Or would you advise me to change something?
Here's my code:
HTML:
<input type="text" placeholder="" class="count" name="input1" id="1"/>
<input type="text" placeholder="" class="count" name="input2" id="2"/>
<input type="text" placeholder="" class="count" name="input3" id="3"/>
<input type="text" placeholder="" class="answer" name="ans1" id="answer1"/>
<input type="text" placeholder="" class="answer" name="ans2" id="answer2"/>
<input type="text" placeholder="" class="answer" name="ans3" id="answer3"/>
JavaScript:
$(document).on('keyup','.count',function(){
var valueField = $(this).attr('id').val();
updateFields(valueField);
});
function updateFields(idNumber){
var rawVal = $('#field' + idNumber).val();
var final = rawVal + 100;
$('#answer' + idNumber).val(final)
}
Thanks in advance!
When you get the attr('id') you don't need to call .val(). Also your code to get the field assumes a id that starts with 'field' and finally if you are going to take text input and treat is a number you should call parseInt() (with a radix of 10 for decimal), this will work:
$(document).on('keyup', '.count', function() {
var valueField = $(this).attr('id');
updateFields(valueField);
});
function updateFields(idNumber) {
var rawVal = parseInt($('#' + idNumber).val(), 10);
var final = rawVal + 100;
$('#answer' + idNumber).val(final)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="" class="count" name="input1" id="1" />
<input type="text" placeholder="" class="count" name="input2" id="2" />
<input type="text" placeholder="" class="count" name="input3" id="3" />
<input type="text" placeholder="" class="answer" name="ans1" id="answer1" />
<input type="text" placeholder="" class="answer" name="ans2" id="answer2" />
<input type="text" placeholder="" class="answer" name="ans3" id="answer3" />

Switch HTML ID Attribute Value Between HTML Text-Boxes Using JavaScript

I have stack of HTML Text-Boxes (More than 2) in my HTML Form. When the HTML Page loads for the 1st time the ID attribute is empty. But when a user clicks on a text-box the ID should be "active". Others should be empty. When the user clicks on another, the previous text-box's id should be empty. The new text-box's id should be "active".
<input type="text" name="test" id="active">
<input type="text" name="test" id="">
<input type="text" name="test" id="">
<input type="text" name="test" id="">
<input type="text" name="test" id="">
<input type="text" name="test" id="">
How can I do this using JavaScript? Could you someone can help me to solve this matter?
Thanks and regards,
Chiranthaka.
You can use .focus() to detect focus event on textbox along with removeAttr() and .attr() to set id to focused element:
$("[name='test']").focus(function() {
$('#active').removeAttr('id');
$(this).attr('id','active');
});
Working Demo
You should use the class attribute instead of the id attribute. So you can do something like this:
var inputs = $('input[type="text"]');
inputs.click(function(){
inputs.removeClass(active);
$(this).addClass('active');
});
Try this, this is a pure javascript solution.
<html>
<head>
<script>
function changeIds(selectedEle)
{
var elements = document.getElementsByName("test");
for(var index = 0 ; index < elements.length ; index++ )
{
elements[index].id="";
}
selectedEle.id="active";
}
</script>
<body>
<form id="myForm" >
<input type="text" onclick="changeIds(this)" name="test" id="active">
<input type="text" onclick="changeIds(this)" name="test" id="">
<input type="text" onclick="changeIds(this)" name="test" id="">
<input type="text" onclick="changeIds(this)" name="test" id="">
<input type="text" onclick="changeIds(this)" name="test" id="">
<input type="text" onclick="changeIds(this)" name="test" id="">
</form>
</body>
</html>

Use jQuery selector as method

I have page with many inputs inside a set of different divs.
A subset of those inputs are created dinamically and they can be also deleted.
By creating and deleting elements i could have a list of inputs named as shown:
<div id="first">
<input type="text" name="elem[0][elem_option][0][price]" value="">
<input type="text" name="elem[0][elem_option][1][price]" value="">
<input type="text" name="elem[0][elem_option][5][price]" value="">
<input type="text" name="elem[0][elem_option][21][price]" value="">
<input type="text" name="elem[3][elem_option][0][price]" value="">
<input type="text" name="elem[3][elem_option][1][price]" value="">
<input type="text" name="elem[3][elem_option][3][price]" value="">
<input type="text" name="elem[3][elem_option][8][price]" value="">
</div><!-- first -->
<div id="second">
<input type="text" name="elem[1][elem_option][1][price]" value="">
<input type="text" name="elem[1][elem_option][2][price]" value="">
<input type="text" name="elem[1][elem_option][7][price]" value="">
<input type="text" name="elem[1][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][5][price]" value="">
<input type="text" name="elem[5][elem_option][6][price]" value="">
<input type="text" name="elem[5][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][9][price]" value="">
</div><!-- second-->
....
I need to select all elements with a name that ends with [price] and save in a different variable of each div.
I tried a jQuery selector used as method of getelementbyid:
first_price_inputs = document.getElementById('first').jQuery('input[name$="[price]"]')
second_price_inputs = document.getElementById('second').jQuery('input[name$="[price]"]')
But i get this error:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'jQuery'
please help!
Try this:
first_price_inputs = jQuery('#first input[name$="[price]"]');
second_price_inputs = jQuery('#second input[name$="[price]"]');
Look here: http://jsfiddle.net/qRDkq/
try
first_price_inputs = jQuery('#first > input[name$="[price]"]')
#Cherniv: its not an input of ID #first, but a child of the element with ID #firstof type input. So the descendant selector should be used afaik?

Categories

Resources