I am trying this link http://jsfiddle.net/QRj83/ to make it work on my phonegap app. The codes is working properly in the website but not in the phonegap app. There is no error shown and it's strange why is not working. Have someone encountered that problem in phonegap?
This is my code in js:
$('input').keyup(function(e) {
if(e.keyCode == 13) {
$(this).next().focus();
}
});
Html code:
<input type="textbox" />
<input type="textbox" />
<input type="textbox" />
Thank you.
<!DOCTYPE html>
<html>
<body>
<input type="textbox" id="text1" name="text1" />
<input type="textbox" id="text2" name="text2" />
<input type="textbox" id="text3" name="text3" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var name="text";
var count=3;
$( document ).ready(function() {
setIndex();
});
function setIndex() {
for(var i=1;i<=count;i++)
{
document.getElementById(name+i).tabIndex = i;
document.getElementById(name+i).onkeypress = function(event) {
myFunction(event);
}
}
}
function myFunction(event) {
var x = event.which || event.keyCode;
if(x==13)
{
var item=event.target.id;
var tabIndex=parseInt(item.replace(name,""));
if(tabIndex==count)
{
document.getElementById(name+1).focus();
}
else
{
tabIndex=tabIndex+1;
document.getElementById(name+tabIndex).focus();
}
}
}
</script>
</body>
</html>
Related
I am trying to update a textbox based on whether or not a checkbox is checked or not. Thanks to this post I got a text box working fine, but I can't get a checkbox to update the value. What am I missing?
<html>
<head>
<title>sum totals</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
$('input[name="selectedItems1"]').click(function(){
var j = document.getElementById("output");
if (this.checked) {
j.value=j.value+300
}else{
j.value=j.value-300
}
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
Place the <script> tag after <form>
Reason:
When the html page loads, it'll be interpreted line by line. When it come to click(), jQuery will try to find the element input[name="selectedItems1"] which won't be loaded into the DOM at that time. So, jQuery won't attach the click() event handle to that checkbox. That's the reason why your code didn't work.
Try this :
<html>
<head>
<title>sum totals</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script type="text/javascript">
function calculate(){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
var tons = $('#tons').val();
if ( rege.test(tons) ) {
val = parseInt(tons);
var treesSaved = val * 17;
if($('input[name="selectedItems1"]').is(":checked"))
{
treesSaved = treesSaved +300;
}
else
{
treesSaved = treesSaved -300;
}
if(isNaN(treesSaved))
j.value=0
else
j.value=treesSaved;
}
else
alert("Error in input");
}
$(function(){
$('input[name="selectedItems1"]').change(function(){
calculate();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
I tried to get value of pop up window in textbox of parent window. But it's not worked. Could any one helped on this?
Parent.jsp
<style>
a:hover, a:active {
background-color:red ;
}
</style>
<form action="FirstTest" method="post" id="TestForm">
<input type="text" id="PrintHere"/ ><br><br>
<a target="_blank" onclick="SelectName('POST')"> Repository Link </a>
</form>
<script type="text/javascript">
function SelectName(methodType) {
var win=window.open("Popup.jsp", "thePopUp", "width=300,height=100, left=24, top=24, scrollbars, resizable");
win.focus();
}
</script>
Popup.jsp
<form id="PopUpForm">
<input type="text" id="ddlNames"> <br /> <br />
<input type="button" value="Select" onclick="SetName();" />
</form>
<script type="text/javascript">
function SetName() {
if ((window.opener != null) && !(window.opener.closed)) {
var Textvalue;
Textvalue.value = document.getElementById("ddlNames").value;
var TextBox = window.opener.document.getElementById("PrintHere");
TextBox.value = Textvalue.value
}
window.close();
} </script>
Change your code like below on Popup.jsp
<form id="PopUpForm">
<input type="text" id="ddlNames"> <br /> <br />
<input type="button" value="Select" onclick="SetName();" />
</form>
<script type="text/javascript">
function SetName() {
if ((window.opener != null) && !(window.opener.closed)) {
var TextBox = window.opener.document.getElementById("PrintHere");
TextBox.value = document.getElementById("ddlNames").value;
}
window.close();
}
</script>
I would like to add code that allows me to use the enter key in addition to a cursor click to initialize a google map at the location that is submitted via a text box. I have the click part down, the enter key, not so much :(
<input id="address" type="text">
<input id="search" type="button" value="search" onClick="search_func()">
<script>
function search_func() {
var address = document.getElementById("address").value;
initialize();
}
</script>
Here is your solution:
<!DOCTYPE html>
<html>
<head>
<title>WisdmLabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<input id="address" type="text" onkeypress="handle(event)" placeholder="Type something here">
<input id="search" type="button" value="search" onClick="search_func()">
<script>
function search_func(){
address=document.getElementById("address").value;
//write your specific code from here
alert("You are searching: " + address);
}
function handle(e){
address=document.getElementById("address").value;
if(e.keyCode === 13){
//write your specific code from here
alert("You are searching: " + address);
}
return false;
}
</script>
</body>
</html>
Feel free to ask any doubts or suggestions.
You would want to add a listener to your text box that fires search_func on keydown, when the key pressed is enter (13 is the keyCode for Enter):
<input id="address" type="text" onkeydown="key_down()">
<input id="search" type="button" value="search" onClick="search_func()">
<script>
function key_down(e) {
if(e.keyCode === 13) {
search_func();
}
}
function search_func() {
var address = document.getElementById("address").value;
initialize();
}
</script>
function search_func(e)
{
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('search').click();
return false;
}
return true;
}
I have a jquery code but is not working and seems that I need prototype code.
Here is the code: http://jsfiddle.net/qKG5F/1627/
<script type="text/javascript">
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#search').attr('disabled', 'disabled');
} else {
$('#search').removeAttr('disabled');
}
});
})()
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>
Please somebody can help me to convert this jquery to prototype code?
All kind of help will be accepted.
For sake of completeness I went ahead and converted your code to PrototypeJS. I optimized the code a bit (sorry can't help it) to exit when the first empty field is found.
<script type="text/javascript">
document.observe('dom:loaded',function(){
$$('form > input').invoke('observe','keyup',function() {
var empty = false;
$$('form > input').each(function() {
if (this.value == '') {
empty = true;
throw $break;
}
});
$('search').writeAttribute('disabled',empty);
});
});
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>
The issue is that your JavaScript is executing before the DOM elements load.
A very simple fix would be to wrap your function invocation within the default jQuery function.
<script type="text/javascript">
$(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#search').attr('disabled', 'disabled');
} else {
$('#search').removeAttr('disabled');
}
});
});
</script>
<form>
FROM<br />
<input type="text"/><br />
TO<br />
<input type="text"/><br />
<input type="submit" id="search" value="GO" disabled="disabled" />
</form>
Passing a function to jQuery is the equivalent of calling $(document).ready(someFunctionHere). What this does is defer the execution of the function until the DOM has finished loading.
Alternatively, putting your script tag at the bottom of your HTML would also achieve the desired effect.
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 || numbers.indexOf(prod_id.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 || numbers.indexOf(prod_type.charAt(i)==-1)
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
This is a test page being written to only learn basics.When I am pressing Submit there is no checking happening and it goes to Submit.html page.why? What modification is needed here?
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
What exactly happens when I am pressing this button?
var prod_id=document.getElementByID("productid").value;
var prod_type=document.myform.producttype.value;
both mechanisms are same ?
This is the Modified one.But still not working. Please help
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
return false;
}
}
}
</script>
</head>
<body>
<form name="myform" action="http://localhost:8080/examples/Submit.HTML" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric(); " value="Submit">
</form>
</body>
</html>
there you go you forgot closing parenthesis for if statements:
<!DOCTYPE html>
<html>
<head>
<script>
function validateAlphaNumeric()
{
alert("function start");
var alphabets="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var numbers="0123456789";
var flag=true;
var prod_id=document.getElementByID("productid").value;
alert(prod_id);
for(var i=0;i<prod_id.length;i++)
{
if(alphabets.indexOf(prod_id.charAt(i))==-1 && numbers.indexOf(prod_id.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
var prod_type=document.myform.producttype.value;
for(var i=0;i<prod_type.length;i++)
{
if(alphabets.indexOf(prod_type.charAt(i))==-1 && numbers.indexOf(prod_type.charAt(i)==-1))
{
alert("value must be alphanumeric");
break;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="POST">
<br><br>
Prodcut ID:<input type="text" name="productid" id="productid" size="25" ">
<br><br>
Product Type:<input type="text" name="producttype" id="producttype" size="25" ">
<br><br>
</div>
<input type="submit" onclick="validateAlphaNumeric()" value="Submit">
</form>
</body>
</html>
if You want didn't go to Action page You must put return false; at end of onclick like this
onclick="validateAlphaNumeric();return false;"
or put return false; at end of function that you Call with return false; you say browser don't submit
Try returning false when validation fails