Phonegap - events such as focus(),blur() not called in JavaScript - javascript

I have just started using Phonegap, I wanted to clear the textbox content when the user clicks on the textbox.
HTML:
<input type="text" class="clear" id="dateVal" name="date" value="date" onblur="clear();"/>/
JavaScript
function clear() {
document.getElementsByTagName('input').value = '';
}
But the clear function is not getting called. Also, just tried putting alert in clear()
function(did not help). Everything else working okay. Any help would be appreciated.
Full HTML Code:
<!DOCTYPE html> <html> <head>
<title>Age Calculator</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
alert('welcome');
}
function calAge() {
var x = confirm('Click here to calculate the age');
if(x == true) {
document.getElementById('ageId').style.display = block';
} else {
navigator.app.exitApp(); }
}
function submitValues() {
var todaysDate = new Date();
var y = todaysDate.getFullYear();
var m = todaysDate.getMonth() + 1;
var d = todaysDate.getDate() + 1;
var myYear = document.getElementById('yearVal').value;
var myMonth = document.getElementById('monthVal').value;
var myDate = document.getElementById('dateVal').value;
var myYear = (y-myYear);
var myMonth = (m-myMonth);
var myDate = (d-myDate);
document.getElementById('ageId').style.display = 'none';
document.getElementById('result').innerHTML = 'You are '+myYear+'years '+myMonth+' months and '+myDate + ' days old :-)';
} function clear() { document.getElementsByTagName('input').value = ''; }
</script> </head> <body>
<button onclick="calAge();">Age Calculator</button> <br>
<div id="ageId" style="display:none;">
<b>Please Enter your Date Of Birth in (dd/mm/yyyy) format:</b>
<input type="text" class="clear" id="dateVal" name="date" value="date" onblur="clear();"/>/
<input type="text" class="clear" id="monthVal" name="month" value="month" />/
<input type="text" class="clear" id="yearVal" name="year" value="year" />
<input type="button" value="submit" onclick = "submitValues();" />
</div>
<div id="result">
</div> </body> </html>

In HTML5 there is a placeholder attribute.
Ex:
<input type="text" placeholder="Enter Date" id="dateVal" name="date" />
We could use this to get what I desired.
Thanks, might be helpful to somebody.

Related

Javascript function with substrings

I attend a Javascript course and I have some exercises as homework. In one of them I have to create a Javascript function with the following role: when I press the button, the function should take the data from the first field of text and put it in the next 3 input fields (day, month and year).
I wrote the function, but it doesn't work. Can you tell me why? Thank you.
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" value="20/12/2015" />
<button onclick="calendar()">Push the button</button><br/>
<input type="text" placeholder="day" /><br />
<input type="text" placeholder="month" /><br />
<input type="text" placeholder="year" />
<script>
function calendar() {
var x = "20/12/2015";
var day = x.substring(0, 2);
var month = x.substring(3, 5);
var year = x.substring(6);
document.getElementsByTagName("input")[1].innerHTML = day;
document.getElementsByTagName("input")[2].innerHTML = month;
document.getElementsByTagName("input")[3].innerHTML = year;
}
</script>
</body>
</html>
You need to use the value property to set/get the value of an <input> element.
function calendar() {
var x = "20/12/2015";
day = x.substring(0, 2);
month = x.substring(3, 5);
year = x.substring(6),
inputs = document.getElementsByTagName("input");
inputs[1].value = day;
inputs[2].value = month;
inputs[3].value = year;
}
<input type="text" value="20/12/2015" />
<button onclick="calendar()">Push the button</button><br/>
<input type="text" placeholder="day" /><br />
<input type="text" placeholder="month" /><br />
<input type="text" placeholder="year" />
To set an input element's value, you have to assign to its value. This is also true for textarea elements.
Assign to innerHTML when dealing with pretty much any other kind of element, but not for inputs.
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="text" value="20/12/2015" />
<button onclick="calendar()">Push the button</button><br/>
<input type="text" placeholder="day" /><br />
<input type="text" placeholder="month" /><br />
<input type="text" placeholder="year" />
<script>
function calendar() {
var x = "20/12/2015";
var day = x.substring(0, 2);
var month = x.substring(3, 5);
var year = x.substring(6);
document.getElementsByTagName("input")[1].value = day;
document.getElementsByTagName("input")[2].value = month;
document.getElementsByTagName("input")[3].value = year;
}
</script>
</body>
</html>

live update value if checkbox is checked or not

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>

Create an HTML form with one field and button

I'm new in coding , there is a question that someone gave me and I can't find the right answer , this is the question :
Create an HTML form with one field and button.On button click,get the input,and return the sum of the previous value and the current input value.The value is 0 and input is 5->output is 5,then value is 5,input is 6-> output is 11 and etc.
I tried few things nothing even close ,
if someone can give me the answer Ill be much appreciated , thanks.
There you go, but you should try doing it yourself. it's pretty easy to google things like "on button click" etc.
var total = 0;
$('.js_send').click(function(){
total += parseInt($('.number').val());
$('.total').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="0" class="number"/>
<input type="button" value="send" class="js_send"/>
<div class="total">0</div>
Here's a JQuery free version
var oldInput = 0,
newInput,
outPut;
document.querySelector("#showSum").onclick = function() {
newInput = parseInt(document.querySelector("#newInput").value),
outPut = newInput + oldInput,
oldInput = outPut,
document.querySelector("#result").innerHTML = outPut;
};
#result {
width: 275px;
height: 21px;
background: #ffb6c1;
}
<input type="number" value="0" id="newInput">
<button id="showSum">Show Results</button>
<br>
<div id="result"></div>
Here is the solution to your problem. Put all below code into a html file and name it as index.html, then run the html page.
<html>
<head>
<title></title>
</head>
<body>
Output : <label id="output">0</label>
<form method="get" action="index.html">
Your Input: <input type="text" id="TxtNum"/>
<input type="hidden" id="lastvalue" name="lastvalue" />
<input type="submit" onclick="return doSum();" value="Sum" />
</form>
<script>
//- get last value from querystring.
var lastvalue = getParameterByName('lastvalue');
if (lastvalue != null) {
document.getElementById("lastvalue").value = lastvalue;
document.getElementById("output").innerHTML = lastvalue;
}
/*
* - function to calculate sum
*/
function doSum() {
var newvalue = 0;
if(document.getElementById("TxtNum").value != '')
newvalue = document.getElementById("TxtNum").value;
var lastvalue = 0;
if(document.getElementById("lastvalue").value != '')
lastvalue = document.getElementById("lastvalue").value;
document.getElementById("lastvalue").value = parseInt(newvalue) + parseInt(lastvalue);
output = parseInt(newvalue) + parseInt(lastvalue);
}
/*
* - function to get querystring parameter by name
*/
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</body>
</html>
If you are doing it in server side, You could have a static variable and update it on button click. More like
public static int prevValue;
public int buttonclick(.....){
int sum = textboxValue + prevValue;
prevValue = textboxValue;
return sum;
}
here is your solution
<script type="text/javascript">
var sum=0;
function summ()
{
localStorage.setItem("value",document.getElementById("text").value);
var v=localStorage.getItem("value");
sum=sum+parseInt(v);
alert(sum);
}
</script>
<html>
<input id="text">
<button id="submit" onclick="summ()">sum</button>
</html>
It will be pretty easy.
Created CodePen
http://codepen.io/anon/pen/eJLNXK
function getResult(){
var myinputValue=document.getElementById("myinput").value;
var resultDiv=document.getElementById("result");
if(myinputValue && !isNaN(myinputValue)){
resultDiv.innerHTML=parseInt(myinputValue) + (resultDiv.innerHTML ? parseInt(resultDiv.innerHTML) : 0);
}
}
<input type="text" id="myinput">
<button id="btngetresult" onclick="getResult()">GetResult</button>
<p>
Result:
<div id="result"></div>
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function sum() {
var t1 = parseInt(document.getElementById("t1").value);
var t2 = parseInt(document.getElementById("pre").value);
document.getElementById("result").innerHTML = t1+t2;
document.getElementById("pre").value = t1;
}
</script>
</head>
<body>
<div>
<form method="get" action="">
<input type="text" name="t1" id="t1">
<input type="button" value="get sum" name="but" onclick="sum()">
<input type="hidden" name="pre" id="pre" value="0">
</form>
</div>
<div id="result"></div>
</body>
</html>

Calling string from one function into another doesent seem to work., why?

So I have this code and it does not seem to work. The thing I want it to do is to call the "together" from the function "go" in the function "second". What am i doing wrong?
The program was initially supposed to take what is in the input-text and add it with the ".com" or the ".no"(depending on what u checked) and redirect to that page. But I only want to call the "together" in the "second" function. Is there any better way to do it?
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<link rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for="no">.no</label><br />
<input type="radio" id="com" name="end" value=".com">
<label for="com">.com</label>
</div>
</fieldset>
<script type="text/javascript">
var end = "";
var input = document.getElementById("input").value;
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
}
second(together);
function second(together){
alert(together);
}
</script>
</body>
</html>
function go(end, input){
if (document.getElementById("no").checked){
end = document.getElementById("no").value;
}else if (document.getElementById("com").checked){
end = document.getElementById("com").value;
}else{
alert("Please Choose a category!");
}
var together = input + end;
// window.location.replace("http://www." + together);
} // remove this
second(together);
} // add this

How to keep delay of 10 seconds after each submit

I have this Javascript below
And want to do it in working in FireFox
I wanted to keep 5 seconds delay after each submit
<html>
<head>
<script type="text/javascript">
function sleep(ms)
{
var dt = new Date();
dt.setTime(dt.getTime() + ms);
while (new Date().getTime() < dt.getTime());
}
function test() {
var windowCounter = 1;
var myStringArray = [ "user1", "user2" , "user3" , "user4" ]
var len = myStringArray.length;
for (var i=0; i<3; ++i) {
document.inform.cid = myStringArray[i];
document.inform.pwd = "xxxxxxxx";
document.inform.target = windowCounter++; // a different target each time
document.inform.submit();
}
}
</script>
</head>
<body >
<form name="inform" target="newWin" action="https://www.google.co.in/">
<input type="text" name="cid" />
<input type="hidden" name="pwd" />
<input type="hidden" name="throttle" value="999" />
<input type="submit" value="go" onclick="test()">
</form>
</body>
</html>
I have tried keeping sleep manually after each submit and tried using setTimeOut , but nothing is working .
could anybody please help me
Edited Part
<html>
<head>
<script type="text/javascript">
var interval = window.setInterval(iterate, 5000);
var myStringArray = ["user1", "user2", "user3", "user4"];
function iterate() {
iterate.arr = iterate.arr || myStringArray.slice(0);
//if it still has elements left
if(iterate.arr.length > 0) {
document.inform.cid = iterate.arr.pop(); //remove the top one
alert(document.inform.cid);
document.inform.pw = "xxxx";
document.inform.target = iterate.arr.length; // a different target each time - length of the arr
document.inform.submit();
} else {
window.clearInterval(interval); //no more left cancel it
}
};
</script>
</head>
<body>
<form name="inform" method="get" target="newWin" action="https://www.google.co.in/">
<input type="text" name="cid" />
<input type="password" name="pw" />
<input type="hidden" name="throttle" value="999" />
<input type="submit" value="go" onclick="iterate()"/>
</form>
</body>
</html>
Could you use something like (not tested though):
var interval = window.setInterval(iterate, 5000);
var myStringArray = ["user1", "user2", "user3", "user4"];
function iterate() {
iterate.arr = iterate.arr || myStringArray.slice(0); //set a private array to cache
//if it still has elements left
if(iterate.arr.length > 0) {
//thought there was more than one formon the page - but if only one then we can reference by its name - cid
///:document.inform.cid = iterate.arr.pop(); //remove the top one
iterate.arr.pop();
document.inform.pwd = "xxxxxxxx";
document.inform.target = iterate.arr.length; // a different target each time - length of the arr
document.inform.submit();
} else {
window.clearInterval(interval); //no more left cancel it
}
};
Plaese try This:
<html>
<head>
<script type="text/javascript">
function submit()
{
document.inform.submit();
}
function test() {
setTimeout('submit()',5000);
}
</script>
</head>
<body >
<form name="inform" target="newWin" action="https://www.google.co.in/">
<input type="text" name="cid" />
<input type="hidden" name="pwd" />
<input type="hidden" name="throttle" value="999" />
<input type="button" value="go" onclick="test()">
</form>
</body>
</html>

Categories

Resources