I have 4 textboxes and a submit button in my web page.
Suppose the user enters data in 2 fields and then clicks the submit button.
I now want to know in which textbox the cursor was located just before the submit button was clicked.
Any idea on how to do this in Javascript?
You're looking for document.activeElement, which returns the currently focused element.
Your question does specifically say in javascript, but FWIW here is another option in jQuery:
Working jsFiddle here
HTML:
<input id="in1" type="text" /><br />
<input id="in2" type="text" /><br />
<input id="in3" type="text" /><br />
<input id="in4" type="text" /><br />
<input type="button" id="mybutt" value="Submit" />
jQuery:
var inFocus = false;
$('input, textarea').focus(function() {
inFocus = $(this).attr('id');
});
$('#mybutt').click(function() {
alert('Cursor was last in element id: ' + inFocus);
});
you can use document.activeElement
here is the simple example for the same.
<head>
<script type="text/javascript">
function GetActive () {
if (document.activeElement) {
var output = document.getElementById ("output");
output.innerHTML = document.activeElement.tagName;
}
}
</script>
</head>
<body onclick="GetActive ();">
Click anywhere on the page to get the active element
<input id="myInput" value="input field" />
<button>Sample button</button>
<div id="output"></div>
</body>
Related
I'm coding a form on HTML with JS that asks for the user to enter their name and displays it. I would like the form and the button to disappear when they hit submit.
<form>
<br/>What is your name: <input type="text" id="name" />
<input type="button" value="done" onclick="write_name();" />
</form>
<h4 id=welcome></h4>
The script is below:
function write_name() {
var welcome_parra = document.getElementById('welcome');
var name = document.getElementById('name');
welcome_parra.innerHTML = "Welcome " + name.value + "!";
}
Jquery Code
$(document).ready(function () {
$("#btn_sbumit").click(function () {
$(this).next().text($("#name").val());
$("#name").hide();
$(this).hide();
});
});
HTML Code
<input type="text" id="name" value="" />
<input type="button" id="btn_sbumit" value="Submit" />
<span></span>
I have a form with two buttons and some text inputs. By default if you press enter it will "click" the first button. I'd like to make it so that if you type in either of the text boxes, if you press enter the second button will be the one to be clicked.
In the simplified example below, pressing enter will by default "click" the log in using facebook button. This will happen even if something is entered in the email or password text inputs. I'd like it so that if something is entered in either the email or password inputs, then pressing enter will "click" the login with email/password button.
<form>
<button class="login-facebook">Log in with Facebook</button>
<input type="text" class="email" placeholder="email"><br>
<input type="password" class="password" placeholder="password"><br>
<button class="login-password">Log in with email/password</button>
</form>
Goal is something like:
$('.email').add('.password').on('change', function() {
$('.login-password').setToBeNewDefaultClickIfEnterIsPressed();
});
Where setToBeNewDefaultClickIfEnterIsPressed() changes the default enter.
See: Multiple submit buttons on HTML form – designate one button as default
You can also make them separate forms and play with that. See also: preventDefault
Try this.
I threw in a field that let's you select the button you want to be the default, just to show how it works. If that field is empty, I made the default button #2.
jsFiddle here
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var defaultbutt = 2;
$(document).ready(function() {
$('[id^=txt]').blur(function() {
if ($(this).val() != '') {
defaultbutt = $('#pickabutt').val();
if (defaultbutt=='') defaultbutt = 2;
}
});
$('#pickabutt').blur(function() {
defaultbutt = $('#pickabutt').val();
if (defaultbutt=='') defaultbutt = 2;
});
$(document).keypress(function(e) {
if(e.which == 13) {
$('#mybutt' + defaultbutt).click();
}
});
$('[id^=mybutt]').click(function() {
var num = $(this).val();
alert('You clicked button: ' + num);
});
}); //END $(document).ready()
</script>
</head>
<body>
Login:<br /><input id="txtLogin" type="text" /><br />
PWord:<br /><input id="txtPassword" type="password" /><br />
<input type="button" id="mybutt1" value="One" />
<input type="button" id="mybutt2" value="Two" />
<input type="button" id="mybutt3" value="Three" />
Default button Number:<br /><input id="pickabutt" type="text" /><br />
</body>
</html>
From this topic: how do i make an invisible text input box visible on hover?
I read this problem and it helps me a lot and I came with this code:
HTML:
<div id="box1">
<form action="">
<input type="string" name="amount" />
</form>
</div>
CSS:
#box1 {
width:100px;
height:30px;
}
#box1:hover input {
display:block;
padding:3px;
}
#input {
display:none;
}
My problem is that once I input the amount, I want the confirm button to show up. Is this possible?
Thanks in advance.
This should accomplish what you are after:
<!-- In the head of your document: -->
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').hide();
$('#amount').keyup(function() {
if ($(this).val() == '') {
$('#submit').hide();
}
else {
$('#submit').show();
}
});
});
</script>
<!-- For your form in the body: -->
<div id="box1">
<form action="">
<input type="string" name="amount" id="amount" />
<input type="submit" name="submit" id="submit" />
</form>
</div>
Based on your question I am guessing you are looking to make the confirm button appear as soon as a key is pressed in the text box. JQuery is a very helpful library for handling browser events, you should look into using that.
html:
<div id="box1">
<input type="text" id="txtAmount" />
<input type="button" id="btnConfirm" value="Confirm"/>
</div>
javascript/jquery:
//self invoking javascript function
$(function() {
//hide the button on page load
$('#btnConfirm').hide();
//listen for a keypress event
$('#txtAmount').on('keypress', function() {
$('#btnConfirm').show();
});
});
here is the jsfiddle if you would like to try it http://jsfiddle.net/49Dhc/5/
Actually make the "confirm" button.
<div id="box1">
<form action="">
<input type="string" name="amount" />
<input type="submit" value="confirm" id="submit" style="display:none"/>
</form>
</div>
Anytime the element with name "amount" is changed or a key is pressed (onchange for backspaces) if the value is not "" or nothing then it'll display the submit button using inline css.
<script>
amount.onchange=amount.onkeyup=function(){
document.getElementById("submit").style.display=this.value==""?"none":"block";
}
</script>
The problem: I have a page with many <input> fields (just say all are text fields)
I would like to have a button, when click on it, all input fields will become plaintext only.
e.g. <input type="text" value="123" /> becomes 123
and if I click on another button, the text will change back to
e.g. 123 becomes <input type="text" value="123" />
Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.
Thank you!
Edited
Seems you guys are getting the wrong idea.
Read what I have written again: e.g. <input type="text" value="123" /> becomes 123
I have value="123" already, why would I want to set the value again???
What I want is e.g.
<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>
Use this to go one way,
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
and this to go the other.
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
Check this link http://jsfiddle.net/Evmkf/2/
HTML:
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript:
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
Try this FIDDLE
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();
Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>
According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.
jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});