Switch HTML ID Attribute Value Between HTML Text-Boxes Using JavaScript - 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>

Related

How to Copy Value from one Input Field to Another Using JS

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()" />

Get id of active textfield

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

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

Auto-complete input2 with the value from input1

On page 1.html I have this form:
<form id="my_form" action="2.html">
<input type="text" id="input1" value="" />
<input type="submit" />
</form>
After the user presses the button he is redirected to 2.html. On this page I have this input:
<input type="text" id="input2" value="" />
How can I get input2 "auto-completed" with the value inserted by the user in input1 ?
Tried this:
Changed 2.html to 2.php and <input type="text" id="input2" value="" /> to <input type="text" id="input2" value="<?php echo htmlspecialchars($_POST['input1'])?>" /> - no luck
Different approaches using sessionStorage - no luck.
I must be missing something simple, please help...

In the form on page 1.html you didn't provide a submission method. Try changing it to
<form id="my_form" action="2.html method="POST">
<input type="text" id="input1" name="input1" value="" />
<input type="submit" />
</form>

The reason your script is not working is because #input1 is missing name attribute .. try changing html of #input1 to this :
<input type="text" id="input1" name="input1" value="" />
Also, you were not declaring any method on form, by default if the method is not declared then it is set as GET. As you are getting values on second page by POST, declare form method to POST.
So, the html of form will be:
<form id="my_form" action="2.php" method="POST">
<input type="text" id="input1" name="input1" value="" />
<input type="submit" />
</form>

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