XHTML button only works in IE 6/7/8 - javascript

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.

Related

why onreadystatechange function don't work in Windows

I was working on ubuntu, the script work very vell.
in Both OS he call the script but in windows he don't entre to the onreadystatechange function
Here is my script and the HTML.
function readTextFile(file,str)
{
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
if(allText.search(str) != -1){
alert("exist");
alert(location.pathname);
}else{
alert("not exist");
}
}
}
}
rawFile.send(null);
}
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Title</title>
<script language="Javascript" src="C:/Users/to125286/Desktop/python_scraping/js/search.js"></script>
</head>
<body>
<div>
<form name="search" onsubmit="return readTextFile('file:///C:/Users/to125286/Desktop/python_scraping/web/All-html.txt',this.string.value);">
<input name="string" onchange="n = 0;">
<input type="submit" value="Go">
</form>
</div>
<table border="1" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<th>Member Name</th>
<th>Birth-Death</th>
</tr>
<tr>
<td>ADAMS, George Madison</td>
<td>1837-1920</td>
</tr>
<tr>
<td>ALBERT, William Julian</td>
<td>1816-1879</td>
</tr>
<tr>
<td>ALBRIGHT, Charles</td>
<td>1830-1880</td>
</tr>
</tbody>
</table>
<h1>Member</h1>
</body>
i want to know if that have any relation with OS
you have ant idea why?
Thank you!
You're trying to read a file on disk (file:/// URL) using XMLHttpRequest. Many web browsers prevent this, as it can be a security risk. It is possible that whatever browser you are using on Windows is preventing it.
If you are using Chrome, you can:
IMPORTANT: Close all other Chrome windows. Make sure that no instance of chrome.exe is running, or this trick won't work.
Launch chrome.exe with the --allow-file-access-from-files command line option to temporarily disable the restriction.
Open the HTML file.

Jsfiddle code not working in localhost wamp

i have implemented validation for fundtransfer in jsfiddle.
it works fine in jsfiddle but not working in localhost.
i am using wamp.
here is my jsfiddle link - http://jsfiddle.net/BzdfN/31/
but when i am implementing this in localhost.its not working.
my html code is
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="validate.js"></script>
<title> Infy Bank Fund Transfer Entry Page </title>
</head>
<body>
<table class="layout" border="0" width="90%" align="center">
<form name="addcust" method ="POST" action ="http://localhost:8080/myapp/jsp/AddCustomerJSP.jsp">
<td colspan="2">
<table border="0" width="70%" align="center">
<tr>
<td align="center" colspan="2">
<div class="heading2">Infy Bank</div>
</td>
</tr>
<tr>
<td align="center" colspan="2"><p class="heading3">Fund transfer</p></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Payers account no<span class="mandatory">*</span></td>
<td><input type="text" name="text10" id="text10" size="25" />
<div width="100%" id="equal"></div>
</td>
</tr>
<!--<tr>
<td>Payees account no<span class="mandatory">*</span></td>
<td>
<input type="text" name="name" value=2008 maxlength="25">
</td>
</tr>
<tr>
<td>Amount<span class="mandatory">*</span></td><td><input type="text" Value=500 name="state" maxlength="25"></td>
</tr>
<tr>
<td>Description<span class="mandatory">*</span></td><td><input type="text" name="pin" value=self maxlength="6"></td>
</tr>
<tr>
<td><span class="mandatory">*mandatory field</span></td>
<td><input type="submit" name="AccSubmit" value="Submit" onClick="return validatebal();">
<input type="reset" name="res" value="Reset"></td>
</tr>-->
</form>
</table>
<p align="right">Home</p>
</body>
</html>
and my validate.js is
$("#text10").keyup(function(){
$("#text10").blur();
$("#text10").focus();
});
$("#text10").change(function(){
var name = $('#text10').val();
var numbers = /^[0-9]+$/;
var specialChars = "<>#!#$%^&*()_+[]{}?:;|'\"\\,./~`-=";
if (name == "" || name == " " )
{
$("#equal").show();
$("#equal a").html("please enter account number");
}
else if(name.match(numbers))
{
$("#equal").hide();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else if(name.match(specialChars))
{
$("#equal").show();
$("#equal a").html("correct account number"); // alert('All Boxes have elements.');
}
else
{
$("#equal").show();
$("#equal a").html("please check your account number correctly");
}
});
So guys can you what i am doing wrong.
please help
start your jQuery with:
$( document ).ready(function() {
.../ and end with:
});
maybe this will solve your problem
In jsfFiddle your code is executed on the onload event.
But with including validate.js in the head the content of the script is execute right at the place where you placed <script src="validate.js"></script>. So your jQuery selectors don't find any elements, because they are not in the DOM at the time the script is executed.
You have different possibilities.
Wrap the content of your validate.js into jQuery(function() { /*your code of validate.js **/ })
Another possibility is to place <script src="validate.js"></script> at the end of your document instead placing it in the head.
You can use delegated events like $(document).on("keyup","#text10", function() { /* .... */ }); that way it does not matter if #text10 is in the DOM at this time.
wrap your validate.js code in jQuery ready function as follows should solve the issue:
$(document).ready(function() {
// validate.js code
});

Passing values from multiple input fields to popup using javascript/jquery

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');

JavaScript White Space Validation not working

I have written JSP code and I need to check white space validation, But it is not working can someone tell me the reason. While clicking submit button it must validate for white space and characters.
JSP Code
<%--
Document : LapsePeriodicFeedBack
Created on : Dec 7, 2012, 2:50:28 PM
Author : Admin
--%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%# page import="java.util.*" %>
<%#page import="PeriodicFeedBack.PeriodicType"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>LapsePeriodicList</title>
<script>
function validateForm(){
var selectindex=document.forms["lapse"]["periodmenu"].selectedIndex;
var whitespace = new RegExp("^\w*$");
var x= document.forms["lapse"]["lapsedays"].value;
var textlength=document.forms["lapse"]["lapsedays"].length;
if(x==""){
alert("Days Cant Be Empty");
return false;
}
if(x==whitespace){
alert("White Spaces are not Allowed");
return false;
}
if(selectindex==0){
alert("Please select Days from menu");
}
}
if(x=="/\\s"){
alert('Sorry, you are not allowed to enter any spaces');
x.value=x.value.replace(/\s/g,'');
}
</script>
</head>
<body>
<form method="post" name="lapse" onsubmit="return validateForm()">
<table width="500px" border="1" align="center" style='border-collapse: collapse;font: 13px Arial, Helvetica, sans-serif;' bordercolor='#000000'>
<tr style="color:'#ffffff';background-color:#CA1619;background-repeat:repeat-x;font: 13px Arial, Helvetica, sans-serif;">
<td colspan="4" align="center">
<font color="#ffffff" > <b>Periodic Feedback List</b></font></td></tr>
<tr>
<td align="center">
Periodic Feedback Days</td>
<td align="center">
<select id="periodmenu">
<option> Select</option>
<%
PeriodicType p = new PeriodicType();
ArrayList periodicList = p.getPeriodicType();
for (int i = 0; i < periodicList.size(); i++) {%>
<option>
<% out.println(periodicList.get(i));
}%>
</option>
</select></td>
</tr>
<tr>
<td align="center">
Lapse Days </td>
<td align="center">
<p>
<input name="lapsedays" type="text" id="lapsedays" onkeyup="nospaces(this)"/></p>
<input name="Submit" type="submit" value="Submit" /></td>
</tr>
</table>
</form>
<p>
</p>
</body>
</html>
You can't use x==whitespace to check x against a regular expression. Use the following:
whitespace.test(x);
That'll return true or false.
In addition, you should not use new RegExp for this, you should instead use the literal operators:
var whitespace = /^\w*$/;

"Undefined" when passing data to JavaScript from Android

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+"\")");

Categories

Resources