Keyboard enter button on input - javascript

Anyone can teach me how to make input button onlick when press the keyboard "Enter" ?
What i have study from web is something like this , but it's does't work when i press enter from keyboard . Anyone can show me how ??
<input type="text" id="info" name="info" />
<input type="button" id="bn" name="bn" value="click" onclick="read()" />
<script>
$(document).ready(function(){
$('#info').keypress(function(e){
if(e.keyCode==13)
$('#bn').click();
});
});
function read()
{
// do smth
}
</script>

Try this code:
<input type="text" id="info" name="info" />
<input type="button" id="bn" name="bn" value="click" onclick="read()" />
<script>
$(document).ready(function(){
$('#info').keyup(function(e){
if(e.keyCode==13)
$('#bn').trigger("click");
});
});
function read()
{
alert('clicked')
}
</script>

I am adding fiddle : http://jsfiddle.net/nzu27rw4/1/
make sure that you have added jquery reference on the top of this script
$(document).ready(function(){
$('#info').keypress(function(e){
if(e.keyCode==13)
$('#bn').click();
});
});
function read()
{
alert('read')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="info" name="info" />
<input type="button" id="bn" name="bn" value="click" onclick="read()" />

Related

After form button is clicked, hide the button div and reveal a hidden div

I am trying to hide the button div and reveal a hidden div after a form button has been clicked plus delay the submission/redirect. Below is what i have come up with but doesn't seem to work 100%.
$('form').submit(function(e) {
e.preventDefault();
$('#checking').show();
$('.button').hide();
setTimeout(() => {}, 7000);
return true;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" placeholder="Enter Name" name="details" />
<input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
CHECKING DETAILS... Please wait
</div>
Any advice is much appreciated
Assuming you want to show the message and then submit, do this
$('form').on("submit", function(e) {
e.preventDefault();
$('#checking').show();
$('.button').hide();
setTimeout(() => {
// submit the DOM form
document.getElementById("myForm").submit(); // or $("#myForm")[0].submit()
}, 7000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input type="text" placeholder="Enter Name" name="details" />
<input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
CHECKING DETAILS... Please wait
</div>
In your timer callback, you need to submit the form, but when you do the sumbit callback will run again and again call e.preventDefault(), so you can use a variable as a "flag" to check as to whether you should cancel the event or not.
let flag = false;
$('form').on("submit", function(e) {
if(!flag){
e.preventDefault();
$('#checking').show();
$('.button').hide();
flag = true;
}
setTimeout(function(){
$('form').submit();
}, 7000);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://www.example.com" method="Post">
<input type="text" placeholder="Enter Name" name="details" />
<input type="submit" class="button" value="CHECK" />
</form>
<div id="checking" style="display: none;">
CHECKING DETAILS... Please wait
</div>

In which TextBox is the cursor.?

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>

How can i enable checkbox by clicking Reset button in Javascript?

Hi i'm new to JS and i'm trying to do a BMI(Body/Mass Index) calculator for my website.
What i want to do is when a user clicks to Temizle(Reset) button disabled checkbox should be usable again. I wrote a function which is called "temizle" but it didn't work. I want to know 2 things for the solution.
If there is a easy way to do what i ask, please tell me.
If there is not, how should i change my code?
<html>
<head>
<script language="JavaScript">
<!--
function temizle(){
if(document.getElementById('e').disable=true)
{
document.getElementById('e').disable=false
}
if(document.getElementById('k').disable=true)
{
document.getElementById('k').disable=false
}
}
//-->
</script>
</head>
<body>
<form name="bmiForm">
Cinsiyetiniz: Erkek<input type="checkbox" id="e" name="erkek" onclick="if (this.checked) document.getElementById('k').disabled=true; else document.getElementById('k').disabled = false;"/> Kadın<input type="checkbox" id="k" name="kadın" onclick="if (this.checked) document.getElementById('e').disabled=true; else document.getElementById('e').disabled = false;"/><br />
Kilonuz(kg): <input type="text" name="kilo" size="10" /> Örn:75<br />
Boyunuz(cm): <input type="text" name="boy" size="10" /> Örn:183<br />
<input type="button" value="Kütle/Vücut İndeksi Hesapla" onClick="bmihesaplama()" /><br />
Kütle/Vücut İndeksiniz(BMI): <input type="text" name="bmi" size="10" /><br />
Bunun Anlamı: <input type="text" name="sonuc" size="45" /><br />
<input type="reset" value="Temizle" onclick="temizle()" />
</form>
</body>
</html>
Thx for your help.
You've typed disable as the property, but it's disabled. You need to change that; it's important.
if(document.getElementById('k').disable=true)
Should also be changed; this is an assignment. You could use ==, but you can also just do:
if (document.getElementById('k').disabled)
http://jsfiddle.net/ExplosionPIlls/3AMtG/2/

Making a button appear when a number is entered into the form

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>

How to get innerhtml value in mozilla

I have below html code
<div id="divTest">
Hello
<input type="text" id="txtID" value="" />
<input type="button" onclick="getForm();" value="Click" />
</div>
And I have below javascript function to get innerHtml value
<script language="javascript" type="text/javascript">
function getForm()
{
var obj = document.getElementById('divTest');
alert(obj.innerHTML);
}
</script>
I am trying to get the complete innerHtml value. When user put some value in "txtId" and when he clicks on button it should show all the innerHtml with txtId value in it. It is working fine in Internet Explorer but failing in Mozilla.
Please suggest what type of changes I need to do in javascript function or I need some Jquery for this.
Thanks.
Best Regards,
I've run across this myself - try using obj.innerHtml (note capitalisation) instead.
I solved my problem by using below jQuery
<script type="text/javascript">
$(document).ready(function()
{
var oldHTML = $.fn.html;
$.fn.formhtml = function() {
if (arguments.length) return oldHTML.apply(this,arguments);
$("input,textarea,button", this).each(function() {
this.setAttribute('value',this.value);
});
$(":radio,:checkbox", this).each(function()
{
if (this.checked) this.setAttribute('checked', 'checked');
else this.removeAttribute('checked');
});
$("option", this).each(function()
{
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected');
});
return oldHTML.apply(this);
};
$.fn.html = $.fn.formhtml;
});
$(document).ready(function()
{
$('input[type=button]').click(function() {
alert($('#divTest').html());
});
});
</script>
and the html was as below:
<div id="divTest">
Hello
<input type="text" id="txtID" />
<input type="text" id="txtID" />
<input type="text" />
<input type="text" id="Text1" />
<input type="text" id="Text1" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" id="Text5" />
<input type="text" id="Text6" />
</div>
<input type="button" value="Click" />

Categories