osimer pothe osimer pothe - 7 months ago 15
HTML Question

How to call another page in background in JavaScript

I have a button in enroll.html . The code of the page is as follows :

<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}

function check()
{
var uname=document.scan.elements[0].value
var bError=false

if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true

if (inStrGrp(uname,'/.:*?"<>| '))
bError=true

if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>

<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p>&nbsp;</p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p>&nbsp;</p>
<p><font color="#0055FF">Enroll</font></p>
<p><a href="logon.asp">Logon</a></p>
<p>&nbsp;</p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>

<form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20">&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2">&nbsp;&nbsp;</p>
<p>&nbsp;
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>

</td>
</tr>
</table>
</div>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>


When I press Enroll Button , I want to load a page named verify.asp in background . How can I do that ?

Answer

Add an Id in this Line

<input type="submit" value="   Enroll   " name="btnEnroll">

So it becomes :

<input type="submit" value="   Enroll   " id="buttonEnroll" name="btnEnroll">
<div id="result"></div>

and Than Write this Script

    <script>
       $("#buttonEnroll").on('click',function(e){
           e.preventDefault();
           $( "#result" ).load( "verify.asp" );
           alert("Page loading completed");  
       });
    </script>

#result is for loading that page in result id div.

Hope Helps !

Add this inside your header tag

<script   src="https://code.jquery.com/jquery-2.2.3.min.js"   integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   crossorigin="anonymous"></script>
Comments