I am trying to get an html table to work properly in android with an onclick event for certain rows and cells.
It's supposed to get user input from 2 rounds, then add them up and then keep adding up after each round till the 7th round. This is my code so far and everything runs fine on the PC but when I go to do it through my tablet ver 4.2.2 I get no results from the inputs.
Sample Code:
Javascript / HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function calcP1()
{
var p1ro1 = document.getElementById("p1r1").value;
var p1ro2 = document.getElementById("p1r2").value;
var pl1 = document.getElementById("p1").value;
var sum1 = (parseInt(p1ro1) + parseInt(p1ro2));
document.getElementById("sp1r2").value = sum1;
}
/*]]>*/
</script>
</head>
<body>
<table>
<tr>
<td>Player Names:</td>
<td><input type="text" id="p1"/></td>
</tr>
<tr>
<td>Round 1: 2 Books</td>
<td><input type="text" id="p1r1"/></td>
</tr>
<tr>
<td>Round 2: 1 Book 1 Run</td>
<td><input type="text" id="p1r2"onclick="calcP1();"/></td>
</tr>
<tr>
<td>Total Round 1 & 2 </td>
<td bgcolor="#00FF00"><input type="text" id="sp1r2" readonly /></td>
</tr>
</table>
</body>
</html>
TableActivity:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.table);
wv = (WebView)findViewById(R.id.tables);
wv.loadUrl("file:///android_asset/ScoreCard.html");
}
Would I have to use addJavascriptInterface into my TableActivity so how? Thank you.
try adding these lines to your activity after you get a reference to the webview but before you load the url
wv.setWebChromeClient(new WebChromeClient());
wv.getSettings().setJavaScriptEnabled(true);
adding a javascriptinterface will allow you to call java methods within the application from your javascript and vice versa
Related
I'm not sure why, but my onclick event for one of my buttons is not working. It's the one I'm using to do the calculations on my form. I have two others, that are functioning correctly, one triggers a print function, and the other redirects to another page.
Here's the Javascript for the 3 buttons:
<script type="text/javascript">
function previewFunction() {
window.location.href = "preview.php";
}
function printFunction() {
window.print();
}
function calculateFunction() {
var e = document.getElementById("limit");
var limit = e.options[e.selectedIndex].value;
var rate = .0075;
var fee = .0025;
var cost = (rate + fee) * limit;
document.getElementById("cost").innerHtml = cost;
}
</script>
The calculateFunction() is the one that's not working.
Here's the HTML for the calculate button / cost span:
<tr>
<th align="center"><input class="buttonStuff" type="button" onclick="calculateFunction()" value="Calculate" /></th>
<th valign="bottom" align="center"><span style="font-size: 20pt;">Cost: </h3><span id="cost" style="text-decoration:underline;">$0.00</span></th>
</tr>
Here's the HTML for the two that do work:
<tr class="container">
<td width="25%" align="center"><input class="buttonStuff" type="button" onclick="previewFunction()" value="Preview" /></td>
<td width="25%" align="center"><input type="button" class="buttonStuff" onclick="printFunction()" value="Print" /></td>
</tr>
Nothing happens when I click Calculate. I'm sure it's something simple I'm overlooking, maybe not.
Thanks for any help you can provide. Let me know if I need to post more code.
Javascript is case sensitive, it's innerHTML, not innerHtml
document.getElementById("cost").innerHTML = cost;
I had a similar issue. I had child.js and a common.js files. In my case, My HTML file was using both the JS files and both of them had a function with the same name,
child.js
function calculateFunction(){...}
and also
common.js
function calculateFunction(){...}
After I remove one of these my code works fine and onclick started working. hope this helps!
I don't know a whole lot and I'm still learning HTML, so I am hoping someone can help me figure out why this code my predecessor wrote only works in IE 6,7, and 8.
It's a simple script that upon entry of a phone number is supposed to provide access to an online application written in PHP. Only, in every browser but IE 6/7/8 it just doesn't do anything once clicked.
The code is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Online Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script type='text/javascript' src='dFilter.js'>
</script>
<style type="text/css">
/*<![CDATA[*/
table.c3 {background-color: #CCCCCC}
span.c2 {font-size: 120%}
h3.c1 {color: white; font-family: Arial; font-style: italic; font-weight: bold; text-align: center}
/*]]>*/
</style>
</head>
<body>
<h3 class="c1">Company Name</h3>
<script language='Javascript' type="text/javascript">
//<![CDATA[
function getinfo(txt){
if ((document.enterid.HPhone.value == '') || (document.enterid.HPhone.value == "() -") || (document.enterid.HPhone.value == "(000) 000-0000") || (document.enterid.HPhone.value == "(111) 111-1111") || (document.enterid.HPhone.value == "(222) 222-2222") || (document.enterid.HPhone.value == "(333) 333-3333") || (document.enterid.HPhone.value == "(444) 444-4444") || (document.enterid.HPhone.value == "(555) 555-5555") || (document.enterid.HPhone.value == "(666) 666-6666") || (document.enterid.HPhone.value == "(777) 777-7777") || (document.enterid.HPhone.value == "(888) 888-8888") || (document.enterid.HPhone.value == "(999) 999-9999") || (document.enterid.HPhone.value == "(123) 456-7890")) {
alert('Please enter yourhome phone number');
document.enterid.HPhone.focus();
return;
}
document.getElementById('myssn').value = document.enterid.HPhone.value
document.getElementById('enterid').submit()
}
//]]>
</script>
<form name="enterid" method="post" action="apply.php" id="enterid"><input type="hidden" name="myssn" value=""/>
<table class="c3" width="60%" border="1" align="center">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td></td>
</tr>
<tr>
<td align="center">Please enter your home phone number: <input type="text" name="HPhone" onkeydown="javascript:return dFilter (event.keyCode, this, '(###) ###-####');" value="" maxlength="14"/></td>
</tr>
<tr>
<td align="center"><input name="btnstart" type="button" value="Get Application" onclick="getinfo('Hello')"/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center">Company link</td>
</tr>
<tr>
<td align="center"><em><strong><span class="c2">You must be using Internet Explorer version 6, 7 or 8 to apply online.</span></strong></em></td>
</tr>
<tr>
<td align="center">Please note the page does <strong>NOT</strong> work with Mozilla, Firefox, Safari, Chrome, etc.</td>
</tr>
<tr>
<td align="center">text</a>.</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
I'm going to assume that all the extra newlines in your getinfo() function are the result of copy/pasting the code.
For example, this:
"(111)
111-1111")
Should be on a single line.
Next up: You're using this to get the form value: document.enterid.HPhone.
However, this input isn't inside the form. I can't imagine this working in any browser, but I maybe IE does some special magic-foo and guesses the correct element anyway.
You didn't post the full page, but moving your closing </form> below the closing </table> should fix it, assuming this is the only form in that table
Edit after new code
My browser's error console gives me the following error when I try to submit your form:
Error thrown at line 1, column 12 in <anonymous function>(event) in file://localhost/home/martin/a.html:
return dFilter(event.keyCode, this, '(###) ###-####');
Uncaught exception: TypeError: Cannot convert 'document.getElementById('myssn')' to object
document.getElementById('myssn')' apparently returns null?
Searching your document for myssn reveals:
<input type="hidden" name="myssn" value=""/>
This element has the name attribute set, but not the id; as the name implies, document.getElementById only gets element by the id attribute, so let's update this element:
<input type="hidden" name="myssn" value="" id="myssn" />
Now, I don't see any error, and get redirected to apply.php
P.S.
I lied a little bit. I also get another error because the function dFilter isn't defined, this is loaded through the external dFilter.js script. I created my own little version of it.
P.P.S.
You should really learn about the error console! All browsers have one, and it's an extremely useful tool! You can access with with F12 or CTRL+SHIFT+I, depending on your browser.
I am trying to pass multiple input fields to a popup page.
Here's what I have done:
<tr>
<th>Item Category</th>
<td><input type="text" name="object_category" disabled="disabled" id="pid1" />
</td>
<tr>
<th>Item Name</th>
<td><input type="text" name="object_name" disabled="disabled" id="pid2" />
<input type="button" id="item_name" name="choice" onClick="selectValue2('id2')" value="?"></td>
</tr>
The value of is filled up by returning its value from a different page.
Now I want to pass the values of id: pid1 and id:pid2 to a new popup page using javascript.
Here's my selectValue2() function definition:
function selectValue2(pid2){
// open popup window and pass field id
var category = getElementById('pid1');
window.open("search_item.php?id=pid2&&cat="+category+""",'popuppage',
'width=600,toolbar=1,resizable=0,scrollbars=yes,height=400,top=100,left=100');
}
But, selectValue2 is not working, as popup is not opening. How to pass the values of these two fields to my new popup?
Here you have the problem:
var category = getElementById('pid1');
You need to replace it by :
var category = document.getElementById('pid1');
As getElementById works with document object.
You need to use
document.getElementById
Further, you will need to use value, because getElementById is grabbing the entire element
Your code would look something like:
function selectValue2(pid2){
// open popup window and pass field id
var category = document.getElementById('pid1').value;
window.open("search_item.php?id=pid2&&cat=" + category + """,'popuppage',
'width=600,toolbar=1,resizable=0,scrollbars=yes,height=400,top=100,left=100');
}
You can do something similar for the 2nd pid value - not sure why you are passing it to the function.
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function selectValue2(){
// open popup window and pass field id
var category = document.getElementById('pid1').value;
var pid = document.getElementById('pid2').value;
window.open("test.php?id="+pid+"&cat="+category+"",'popuppage',
'width=600,toolbar=1,resizable=0,scrollbars=yes,height=400,top=100,left=100');
}
</script>
</head>
<body>
<tr>
<th>Item Category</th>
<td><input type="text" name="object_category" id="pid1" />
</td>
<tr>
<th>Item Name</th>
<td><input type="text" name="object_name" id="pid2" />
<input type="button" id="item_name" name="choice" onClick="selectValue2()" value="?"></td>
</tr>
</body>
</html>
for Jquery,
var pid1Val = $("#pid1").val();
var pid2Val = $("#pid2").val()
for Javascript,
var pid1Val = document.getElementById('pid1');
var pid2Val = document.getElementById('pid2');
I'm using this code but the value said "undefined" can anyone point me the problem?
this is my java class codes
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(com.frux.web.R.layout.activity_main);
String value = "Isiah";
WebView web = (WebView) findViewById(R.id.web1);
web.getSettings().setJavaScriptEnabled(true);
web.loadUrl("file:///android_asset/www/index.html");
web.loadUrl("javascript:setValue(\""+ value +"\")");
}
and this is my webpage codes
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Whats your Name?
<input id="name" value="" />
<button onclick = "setValue()">Submit</button>
<script type="text/javascript">
function setValue(value){
var myValue = value;
document.getElementById("name").value = myValue;
}
</script>
</body>
</html>
I also try this one
web.loadUrl("javascript:setValue('"+ value +"')");
any thoughts will be highly appreciated
I used the codes in this HTML codes and its display nothing unlike the other codes above that I post.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function setValue(amount1)
{
myValue = amount1;
document.getElementById("amount").value = myValue;
}
function rand ( n )
{
document.getElementById("orderRefId").value = ( Math.floor ( Math.random ( ) * n + 1 ) );
}
</script>
</head>
<body onLoad="rand(200000);setValue();">
<!--
Note: https://www.pesopay.com/b2c2/eng/payment/payForm.jsp for live payment URL
https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp for test payment URL
-->
<form method="POST" name="frmPayment" action="https://test.pesopay.com/b2cDemo/eng/payment/payForm.jsp">
<table>
<tbody>
<tr>
<td>Order Reference No. (your reference number for every transaction that has transpired):</td>
<td><input type="text" id="orderRefId" name="orderRef" value="Test-001"/></td>
</tr>
<tr>
<td>Amount:</td>
<td><input type="text" name="amount" id="amount" value=""/></td>
</tr>
<tr>
<td>Currency Code - "608" for Philippine Peso, "840" for US Dollar:</td>
<td><input type="text" name="currCode" value="608"/></td>
</tr>
<tr>
<td>Language:</td>
<td><input type="text" name="lang" value="E"/></td>
</tr>
<tr>
<td>Merchant ID (the merchant identification number that was issued to you - merchant IDs between test account and live account are not the same):</td>
<td><input type="text" name="merchantId" value="18056869"/></td>
</tr>
<tr>
<td>Redirect to a URL upon failed transaction:</td>
<td><input type="text" name="failUrl" value="http://www.yahoo.com?flag=failed"/></td>
</tr>
<tr>
<td>Redirect to a URL upon successful transaction:</td>
<td><input type="text" name="successUrl" value="http://www.google.com?flag=success"/></td>
</tr>
<tr>
<td>Redirect to a URL upon canceled transaction:</td>
<td><input type="text" name="cancelUrl" value="http://www.altavista.com?flag=cancel"/></td>
</tr>
<tr>
<td>Type of payment (normal sales or authorized i.e. hold payment):</td>
<td><input type="text" name="payType" value="N"/></td>
</tr>
<tr>
<td>Payment Method - Change to "ALL" for all the activated payment methods in the account, Change to "BancNet" for BancNet debit card payments only, Change to "GCASH" for GCash mobile payments only, Change to "CC" for credit card payments only:</td>
<td><input type="text" name="payMethod" value="ALL"/></td>
</tr>
<tr>
<td>Remark:</td>
<td><input type="text" name="remark" value="Asiapay Test"/></td>
</tr>
<!--<tr>
<td>Redirect:</td>
<td><input type="text" name="redirect" value="1"/></td>
</tr>-->
<tr>
<td></td>
</tr>
<input type="submit" value="Submit">
</tbody>
</table>
</form>
</body>
</html>
Wrap your passed value in double quotes:
web.loadUrl("javascript:setValue(\""+value+"\")");
I got this! When you call loadUrl for the second time the page has not loaded yet. The solution would be attaching your setValue call to window.onload event:
super.loadUrl("javascript:window.onload = function(){setValue(\"haha\");};");
This code loads 'haha' into input correctly.
Try wrapping your value in a single quotes like so
web.loadUrl("javascript:setValue('"+ value +"')");
I had this issue when trying to access the DOM before it was ready. devmilles.com's solution worked but I spent a little more time experimenting.
Both of
webView.loadUrl("javascript:window.addEventListener('DOMContentLoaded',
function(){setValue('haha');}, false);");
webView.loadUrl("javascript:window.addEventListener('load',
function(){setValue('haha');}, false);");
worked for me, but attaching the event to document instead of window did not. DOMContentLoaded, where supported, responds slightly faster than load.
Additionally, it turns out that WebViewClient has always had an onPageFinished() event, which appears to work like the load event
webView.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
view.loadUrl("javascript:setValue('haha');");
}
});
Lastly, I could emulate the behaviour with
webView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
if (progress == 100) {
view.loadUrl("javascript:setValue('haha');");
}
}
});
but I see no reason to use that over the WebViewClient approach (they may or may not be equivalent).
I am also facing same problem.But the issue is resolved using below way.
String testValue="abcdedfg";
String value = "\'"+testValue+"\'";
web.loadUrl("javascript:setValue(\""+value+"\")");
I am trying to create a dynamic form where you can order something.
In basic form, we have one row, but if you want to order more things we can dynamically without reloading the page, add the new row. So far everything is working properly for me, but in this form we have two dropdown ("input select") lists. These drop-down lists are dependent on each other and do not know how to load them the relationship between them and the option of choice. I have tried many different examples from the internet, but always work correctly only the first default row. Dynamically created rows are no longer dependent on one another.
If I am doing something wrong, and you know a better way, please show me this way.
I ask you for help, because I really depend on that. Thank you in advance. ;)
Update
Hmm .. Now I understand, but I do not know much how to use it in my web page code. Will show you the web page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br>
<html><br>
<head><br>
<title>Dynamic forms</title><br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><br>
<script type="text/javascript" src="http://jquery.bassistance.de/validate/jquery.validate.js"></script><br>
<script language="javascript" src="chainedselects.js"></script><br>
<script language="javascript" src="exampleconfig2.js"></script><br>
</head>
<body onload="initListGroup('vehicles', document.formm.elements['group[]'], document.formm.elements['product[]'], 'cs')">
<script type="text/javascript">
$(document).ready(function(){
var i = 2;
var templateRow = jQuery.format($("#template").val());
function addRow() {
var ii = i++;
$(templateRow(ii)).appendTo("#listProducts tbody");
$("#removeProduct_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
$("#addProduct").click(addRow);
});
</script>
<!-- Template row in the table -->
<textarea id="template" style="display:none;" cols="1" rows="1">
<tr id="row_{0}" valign="top">
<td>{0}.</td>
<td><select name="group[]" style="width: 100%;"></select></td>
<td><select name="product[]" style="width: 100%;"></select></td>
<td><input type="text" name="price[]" style="width: 100px;"></td>
<td><input type="text" name="quantity[]" style="width: 97%;"></td>
<td><img src="remove.png" id="removeProduct_{0}" alt="remove"></td>
</tr>
</textarea>
<!-- This summary table -->
<form name="formm" action="parser.php" method="post">
<table id="listProducts" name="list">
<thead>
<tr>
<th>Nr</th>
<th>Group</th>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>+/-</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3" align="left">
<input type="submit" name="send" value="Send" style="width: 100px;">
</th>
</tr>
</tfoot>
<tbody>
<tr valign="top">
<td>1.</td>
<td><select name="group[]" style="width: 100%;"></select></td>
<td><select name="product[]" style="width: 100%;"></select></td>
<td><input type="text" name="price[]" style="width: 100px;"></td>
<td><input type="text" name="quantity[]" style="width: 97%;"></td>
<td><img src="add.png" id="addProduct" alt="add"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
This is a parser.php:
<?php
$data = array();
$data['Groups'] = $_POST['group'];
$data['Products'] = $_POST['product'];
$data['Prices'] = $_POST['price'];
$data['Quantity'] = $_POST['quantity'];
$result = print_r($data,true);
echo "<pre>$result</pre>";
?>
Here is link to all code.
The click events are not attached to the newly created rows, so you need to make sure that any new rows, after they are created have click events attached to them.
function dependantFunction() {
/* code */
}
function addNewRow() {
var a=document.createElement("div");
var b=document.createElement("img");
b.src="images/add.png";
b.addEventListener("click", dependantFunction, false);
a.appendChild(b);
document.getElementById("rowholder").append(a);
}
Then all new rows should have all the necessary events attached to them.