how to submit a form, when the controls are in an XSL sheet
Hi Guys,
Thank you for taking the time to read my question. Essentially what I am trying to find out what my options are is this.
I have my HTML page, which passes XML data up, gets the reponse, which is parsed etc, and the data that comes out on the bottom of the page(I have the data going into text boxes that are all on the XSL page, the issue is that because the text boxes are on the XSL page, when I hit submit, they do not get uploaded as they are not considered part of the page. What are my options??? Please Help!!!
Thank you for taking the time to read my question. Essentially what I am trying to find out what my options are is this.
I have my HTML page, which passes XML data up, gets the reponse, which is parsed etc, and the data that comes out on the bottom of the page(I have the data going into text boxes that are all on the XSL page, the issue is that because the text boxes are on the XSL page, when I hit submit, they do not get uploaded as they are not considered part of the page. What are my options??? Please Help!!!
ASKER
I have attached the text for both files I am using, both the HTML file, and XSL file.
This is the Main HTML file called finaleway.html
<script type="text/javascript" language="javascript">
var http_request = false;
function validate(form){
if(form.txttotamnt.value<20){//checks if the feild length is greater than 20
alert("you must enter a value of 20 or higher");
return false;
}
get(myform,'myspan')
return true;
}
<!--
var submitcount = 0;
function checkFields(){
if (submitcount == 0) {
//sumbit form
submitcount ++;
return true;
}
else {
alert("Transaction is in progress.");
return false;
}
}
//-->
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.open('POST', url, true);
//http_request.timeout = 100;
http_request.onreadystatechange = alertContents;
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http_request.setRequestHeader("Content-length", parameters.length);
http_request.setRequestHeader("Connection", "close");
http_request.send(parameters);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById('myspan').innerHTML = result;
document.getElementById ("ewayxmlresponse").value = result;
document.getElementById ("txttest").value = result;
stateChanged(http_request);
} else {
alert('There was a problem with the request.');
}
}
}
function get(obj) {
var poststr = "<ewaygateway> " +
"<ewayCustomerID>87654321</ewayCustomerID>" +
"<ewayTotalAmount>"+(myform.txttotamnt.value)*100+"</ewayTotalAmount>" +
"<ewayCustomerFirstName></ewayCustomerFirstName> " +
"<ewayCustomerLastName></ewayCustomerLastName> " +
"<ewayCustomerEmail></ewayCustomerEmail> " +
"<ewayCustomerAddress></ewayCustomerAddress> " +
" <ewayCustomerPostcode></ewayCustomerPostcode> " +
" <ewayCustomerInvoiceDescription>"+(myform.txtinvdesc.value)+"</ewayCustomerInvoiceDescription> " +
" <ewayCustomerInvoiceRef>"+(myform.txtcustinvref.value)+"</ewayCustomerInvoiceRef> " +
" <ewayCardHoldersName>"+(myform.txtcard_holdername.value)+"</ewayCardHoldersName> " +
" <ewayCardNumber>"+(myform.txtcard_number.value)+"</ewayCardNumber> " +
" <ewayCardExpiryMonth>"+(myform.txtexpmonth.value)+"</ewayCardExpiryMonth> " +
" <ewayCardExpiryYear>"+(myform.txtexpyear.value)+"</ewayCardExpiryYear>" +
"<ewayTrxnNumber>"+(myform.txtewaytransnum.value)+"</ewayTrxnNumber>" +
"<ewayOption1>"+(myform.txtcustinvref.value)+"</ewayOption1>" +
"<ewayOption2></ewayOption2>" +
"<ewayOption3></ewayOption3> " +
"<ewayCVN>"+(myform.txt_cvn.value)+"</ewayCVN> " +
"</ewaygateway>";" "
makePOSTRequest('https://www.eway.com.au/gateway/xmltest/testpage.asp', poststr);
}
function stateChanged(http_request)
{
var fragment = "";
window.status = "XML data transfer status: " + http_request.readyState;
if (http_request.readyState==4 || http_request.readyState=="complete")
{
if(http_request.overrideMimeType)
{
http_request.overrideMimeType('text/xml');
}
xmlDoc = http_request.responseXML;
window.status = "Loading XSL processor";
if (typeof XSLTProcessor != "undefined")
{
/* declare global xslt processors, main and detail */
var myXMLHTTPRequest = new XMLHttpRequest();
var xsltProcessor = new XSLTProcessor();
myXMLHTTPRequest.open("get", "ewaytrans.xsl", false);
myXMLHTTPRequest.send(null);
xslDoc = myXMLHTTPRequest.responseXML;
xsltProcessor.importStylesheet(xslDoc);
var ex = document.getElementById('myspan');
ex.innerHTML = "";
try
{
fragment = xsltProcessor.transformToFragment(http_request.responseXML, document);
}
catch (e)
{
fragment = "XSL parse error : " + e.text;
}
ex.appendChild(fragment);
}
else if( window.ActiveXObject && /Win/.test(navigator.userAgent) )
{
xslDoc = new ActiveXObject("Microsoft.XMLDOM");
window.status = "Loading XSL file";
xslDoc.async = false;
xslDoc.load("ewaytrans.xsl");
window.status = "Call xmlDoc.transformNode(xslDoc) ...";
try
{
fragment = xmlDoc.transformNode(xslDoc);
}
catch (e)
{
fragment = "XSL parse error : " + e.text;
}
var ex = document.getElementById('myspan');
ex.innerHTML = "";
ex.innerHTML = fragment;
}
var msg = "Success! Thank you for using Collect!";
window.status = msg;
document.style="cursor: default";
}
}
function showHide(id,chkObj)
{
var objekt = document.getElementById(id);
if(chkObj.checked)
{
objekt.style.display="block";
}
else
{
objekt.style.display="none";
}
}
</script>
<head>
<style type="text/css">
html {background-color:#DDDDDD; color:#000000; margin:0; padding:0; font-family:Arial,Verdana,Helvetica,sans-serif; }
body {background-color:#DDDDDD; color:#000000; margin:0; padding:0; font-family:Arial,Verdana,Helvetica,sans-serif; }
table.results {margin:0; padding:0; background-color:#ccffff;width:100%;overflow:scroll;}
span.Result {margin:0; padding:0; }
span.Resultnew {margin:0; padding:0; }
div.data {visibility:hidden; display:none;}
.toptable {
text-align: center;
font-weight: bold;
font-size: 24px;
}
toptableimages {
text-align: center;
}
.results_header {
font-weight: bold;
}
.texboxarea {
background-color: #FF6;
}
.texboxresultspos {
background-color: #00cc00;
tabledata {
text-align: right;
}
.texboxresultsneg {
background-color: #F00;
tabledata {
text-align: right;
}
.texboxresults {
background-color: #6FF;
tabledata {
text-align: right;
}
.tabledata {
text-align: right;
}
.sdfsdf {
background-color: #6FF;
}
</style>
</head>
<body>
<table width="614" border="0" align="center" cellpadding="0">
<tr>
<td width="137" class="toptable"><img src="http://www.collect.org/img/clogo.gif" alt="Collect! Online"/></td>
<td width="152" class="toptable"><img src="http://www.eway.com.au/_images/AU/BankLogos/mastercard.gif" alt="Master Card" height="50"/></td>
<td width="118" class="toptable"><img src="http://www.eway.com.au/_images/AU/BankLogos/visa.gif" alt="Visa" height="50" class="toptable"/></td>
<td width="179" class="toptable"><img src="eway.jpg" alt="Eway" width="102" height="47" class="toptable" /></td>
</tr>
</table>
<p class="toptable">EWAY Credit Card Payment Processing Page </p>
<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<table width="746" border="0" align="center">
<tr>
<td width="261" class="tabledata"><b>* Payment Amount:</b></td>
<td colspan="2"><input name="txttotamnt" type="text" class="texboxarea" id="txttotamnt" size="12" maxlength="12"></td>
</tr>
<tr>
<td class="tabledata">Customer Invoice Description:</td>
<td colspan="2"><input name="txtinvdesc" type="text" class="texboxarea" id="txtinvdesc" value="@tvarClientDesc" size="50" maxlength="255" readonly="readonly"></td>
</tr>
<tr>
<td class="tabledata">Customer Invoice Reference:</td>
<td colspan="2"><input name="txtcustinvref" type="text" class="texboxarea" id="txtcustinvref" value="@tvarFile" size="7" maxlength="255" readonly="readonly"></td>
</tr>
<tr>
<td class="tabledata"><b>* Card Holder Name:</b></td>
<td colspan="2"><input name="txtcard_holdername" type="text" class="texboxarea" id="txtcard_holdername" size="50" maxlength="50"></td>
</tr>
<tr>
<td class="tabledata"><b>* Customer Card Number:</b></td>
<td colspan="2"><input name="txtcard_number" type="text" class="texboxarea" id="txtcard_number" value="" size="22" maxlength="20"></td>
</tr>
<tr>
<td class="tabledata"><b>* Card Expiry: Month:</b></td>
<td width="24"><input name="txtexpmonth" type="text" class="texboxarea" id="txtexpmonth" size="4" maxlength="2"></td>
<td width="447"> /
<label><b> Year:
</b><input name="txtexpyear" type="text" class="texboxarea" id="txtexpyear" size="4" maxlength="2">
</label></td>
</tr>
<tr>
<td class="tabledata"><b>* Card CVN:</b></td>
<td colspan="2"><input name="txt_cvn" type="text" class="texboxarea" id="txt_cvn" size="4" maxlength="3"></td>
</tr>
<tr>
<td class="tabledata">Eway Transaction Number:</td>
<td colspan="2"><input name="txtewaytransnum" type="text" class="texboxarea" id="txtewaytransnum" value="@tvarTrans" size="20" maxlength="16" readonly="readonly"></td>
</tr>
</table>
<p>
<label>
<input type="checkbox" name="txtagree" id="txtagree" onClick="showHide('test-span',this)">
In arranging for this credit card payment to be made, has the customer acknowledged they have not been coerced into making payment via credit card by any employee or agent acting for Insight Mercantile.</label>
<div id="test-span" style="display:none;" >
<input type="button" name="Process Payment" value="Process Payment"
onClick="javascript:validate(myform);" id="Process Payment">
</div>
<p><br>
</p>
</form>
<span class="results_header">Eway Response</span>:<br>
<hr>
<form action="http://127.0.0.1:1533/import" method="post" id="ewayCCresults">
<input type="hidden" name="importmap" value="ewayCCresults">
<input type="hidden" name="ewayxmlresponse">
<label>
<input type="text" name="txttest" id="txttest">
</label>
<span name="myspan" id="myspan"></span>
</form>
<hr>
</body>
<html>
and this is the XSL file: called ewaytrans.xsl
<?xml version="1.0" encoding="UTF-8"?><!-- DWXMLSource="https://www.eway.com.au/gateway/xmltest/testpage.asp" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8"/>
<xsl:template match="ewayResponse"><style type="text/css">
<xsl:comment>
#ewayCCresults {
text-align: center;
}
</xsl:comment>
</style>
<table width="898" border="0" align="center" cellpadding="0">
<tr>
<td width="224">Transaction Status:</td>
<td width="660">
<xsl:if test="ewayTrxnStatus='True'">
<label>
<input name="txtewayTrxnStatus" class="texboxresultspos" type="text" id="txtewayTrxnStatus" value="Approved" />
</label>
</xsl:if>
<xsl:if test="ewayTrxnStatus='False'">
<label>
<input name="txtewayTrxnStatus" type="text" class="texboxresultsneg" id="txtewayTrxnStatus" value="Declined" />
</label>
</xsl:if></td>
</tr>
<tr>
<td>Transaction Number:</td>
<td><input type="text" class="texboxresults" size="50" readonly="readonly" id="box"><xsl:attribute name="value"><xsl:value-of select="ewayTrxnNumber"/></xsl:attribute></input></td>
</tr>
<tr>
<td>Transaction Reference:</td>
<td><input type="text" class="texboxresults" size="50" readonly="readonly" id="box"><xsl:attribute name="value"><xsl:value-of select="ewayTrxnReference"/></xsl:attribute></input></td>
</tr>
<tr>
<td>Authorisation Code:</td>
<td><input type="text" class="texboxresults" size="50" readonly="readonly" id="box"><xsl:attribute name="value"><xsl:value-of select="ewayAuthCode"/></xsl:attribute></input></td>
</tr>
<tr>
<td>Money Paid (in cents):</td>
<td><input type="text" class="texboxresults" size="50" readonly="readonly" id="box"><xsl:attribute name="value"><xsl:value-of select="ewayReturnAmount"/></xsl:attribute></input></td>
</tr>
<tr>
<td>Transaction Error/Details:</td>
<td><input type="text" size="110" class="texboxresults" readonly="readonly" id="box"><xsl:attribute name="value"><xsl:value-of select="ewayTrxnError"/></xsl:attribute></input></td>
</tr>
<tr>
<td>Customer Invoice Reference:</td>
<td><input type="text" size="110" class="texboxresults" readonly="readonly" id="box"><xsl:attribute name="value"><xsl:value-of select="ewayTrxnOption1"/></xsl:attribute></input></td>
</tr>
</table>
<label>
<input type="submit" name="submit" id="submit" value="Submit to Collect" />
</label>
</xsl:template>
</xsl:stylesheet>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
yeh that was something I was trying, to see if I could just export the entire XML text response. THe get does work. But that avenue didn't work out for me, so am seeing if there is a way I can either get the data that appears in the text boxes once the transform takes place into some hidden variables or something like that.
So which of the code do you want to use?
I would personally use createElement and appendChild to make this work in DOM browsers
I would personally use createElement and appendChild to make this work in DOM browsers
Please elaborate with examples