I have about 30 input all text, I have a button that I want to get the ID of the focused one when the button press.
How can I get that?
Focus is tricky. As soon as some other element (like a button is clicked), the focus my have already moved so you can't see what input field was last active by looking at the focus.
You could attach event handlers for the focus event to each input element and keep track yourself of which one last received the focus and then use that variable when the button is pressed.
Perhaps if you describe the actual problem you're trying to solve, we could offer an even better solution.
You can see an example here of remembering the last active input field: http://jsfiddle.net/jfriend00/XmqPe/. Click the button and the last active field will be highlighted in red.
var lastInput;
function gotInput() {
lastInput = this;
}
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn);
} else {
elem.attachEvent("on" + event, function() {
fn.call(elem, window.event);
});
}
}
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
addEvent(inputs[i], 'focus', gotInput);
}
addEvent(document.getElementById('test'), 'click', function() {
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.borderColor = '#000';
}
if (lastInput) {
lastInput.style.borderColor = '#F00';
}
});
You can try this workaround to get the last input with focus in a button press:
Example using jquery:
<script type="text/javascript">
$(document).ready(function () {
var lastId = null;
$(".inputTest").focus(function () {
//put the last input id in a "global" variable:
lastId = $(this).attr("id");
});
$("#btnTest").click(function () {
if (lastId) {
//if exists, do something:
alert(lastId);
}
});
});
</script>
Html example:
<body>
<input type="text" name="test1" id="test1" class="inputTest" />
<input type="text" name="test2" id="test2" class="inputTest"/>
<input type="text" name="test3" id="test3" class="inputTest" />
<input type="text" name="test4" id="test4" class="inputTest" />
<input type="text" name="test5" id="test5" class="inputTest" />
<input type="text" name="test6" id="test6" class="inputTest" />
<input type="button" value="test" id="btnTest" />
</body>
Related
I'm creating a post slug input, so when editing post title input it'll inherit it's value to the disabled slug input amd there is a button when clicking it enables the disabled input. It is working good, but I want on clicking the button it'll stop Inheriting values.
Here is my code :
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>
<script>
document.querySelector('#a').addEventListener('keyup', () => {
document.querySelector('#b').value = document.querySelector('#a').value;
});
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
});
</script>
I've googled, but i haven't found.
Thank You
You can removeEventListener of the a element keyup after clicking the button.
function onAKeyup() {
document.querySelector('#b').value = document.querySelector('#a').value;
}
document.querySelector('#a').addEventListener('keyup', onAKeyup);
document.querySelector('#btn').addEventListener('click', () => {
document.querySelector('#b').disabled = false;
document.querySelector('#a').removeEventListener('keyup', onAKeyup)
});
<input type="text" id="a"/>
<input type="text" id="b" disabled/>
<button id="btn">Stop</button>
How can i create in j query or java script if both the input values are same display popup message (That both the values are same) bootstrap please show with example.
You can do like this in html:
<input class="text" id="text1" type="text">
<input class="text" id="text2" type="text">
And using jQuery:
$("input.text").on('change paste input', function(){
if($("#text1").val()==$("#text2").val()){
alert("Equal");
}
});
You can find what you seek in this thread. It has done with id and the keyup event listner. Apart from that use jQuery will make that more easier.
$( "#text1" ).bind( "keyup", function() {
testpassword2();
});
$( "#text2" ).bind( "keyup", function() {
testpassword2();
});
function testpassword2() {
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
if ($("text1").val() == $("text2").val())
text2.style.borderColor = "#2EFE2E";
else
text2.style.borderColor = "red";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<input type="text" id="text1" size="30">
<input type="text" id="text2" size="30">
</body>
I am attaching two events to 'document' - one for some checkboxes an one button. I thought that using the jquery .on() in combination with the relevant selectors would be sufficient.
[This fiddle][1] show the example code that 'freeze' as you select the button. The checkboxed are working OK. Can anyone explain why this is happening and how this should be done?
Html:
<div id="main">main..
<p>
<input type="checkbox" class="ui-checkbox" id="checkbox0" name="inkluderfil" value="filnavn">
<input type="checkbox" id="checkbox1" name="inkluderfil" value="filnavn">
<input type="checkbox" id="checkbox2" name="inkluderfil" value="filnavn">
<br>
<br>
</p>
</div>
<div id="buttdiv">
<input type="submit" name="mybutt" value="A submit button">
</div>
<div id='result'></div>
$('document').ready(function () {
$(document).on("change", 'input[name="inkluderfil"]', function (event) {
$('#result').html('Checkbox is changed')
});
$(document).on("click", 'input[name="mybutt"]', function (event) {
$('#result').html('mybutt is clicked')
for (var i = 0; 3; i++) {
console.log('objAttach2XML:' + i)
};
});
$('#result').html('ready')
});
Change
for (var i = 0; 3; i++) {
to
for (var i = 0; i<3; i++) {
Im trying to create new input tags based on the number the user enters. My code will create the correct amount of tags, but they get removed almost immediately. Why?
<form>
<input type='text' id='input' />
<button>Submit</button>
</form>
<div id="box">
</div>
<script>
$(document).ready(function() {
$('button').click(function() {
var x = $('#input').val();
for(var i=0 ; i < x; i++) {
$('<input type="text" /><br>').prependTo('#box');
};
});
});
</script>
call preventDefault on the event to stop the button action from firing
$('button').click(function(e) {
e.preventDefault();
var x = $('#input').val();
for(var i=0 ; i < x; i++) {
$('<input type="text" /><br>').prependTo('#box');
};
});
FIDDLE
Change your existing button to an input with an id and use the id in the JS. Your problem is the form is being submitted when you click button.
http://jsfiddle.net/Delorian/65gLvfdx/
<input type="button" id="update" value="Submit" />
When I press ADD, I show the hidden #box, I hide the ADD button and show the REMOVE button.
html:
<input type="button" id="add" value="ADD">
<input type="button" class="no-display" id="remove" value="REMOVE">
<div class="no-display" id="box">
<input id="a" value="" type="text" />
<input id="b" value="" type="text" />
<input id="c" value="" type="text" />
</div>
jquery:
$('#add,#remove').click(function () {
$('#add').toggle();
$('#remove').toggle();
$('#box').slideToggle("fast");
});
see working DEMO
Now, I want to check if the input fields #a or #b or #c have a value. If they have a value, on pageload I want to show #box, hide the #add button and show the #remove button.
What is the best way to do this?
you can see a DEMO here (not finished)
using filter() to get the count of the input that has value on it... if count is greater that 0 ..means atleast one input is not empty so.. hide add, show remove buttons and the container
try this
$('#add,#remove').click(function () {
$('#add').toggle();
$('#remove').toggle();
$('#box').slideToggle("fast");
});
var count = $('#a,#b,#c').filter(function () {
return $(this).val().length > 0;
}).length;
if (count > 0) {
$('#box').show();
$('#add').hide();
$('#remove').show();
}
updated as per comment
var count = $('#a,#b,#c').filter(function () {
return this.value.length > 0; //faster
}).length;
working fiddle
Try this: Move toggle code to a function. Bind it to the click. Call it on load if any of the inputs have a value.
$(function () {
var toggleBox = function () {
$('#add').toggle();
$('#remove').toggle();
$('#box').slideToggle("fast");
};
$('#add,#remove').click(toggleBox);
if(!!$("#a, #b, #c").filter(function() {return this.value;}).length) {
toggleBox();
}
});