[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Using a "." seperator in the ID for a html hidden control.

Posted on 2011-10-26
13
Medium Priority
?
443 Views
Last Modified: 2012-05-12
Hi,

I am currently developing a website that requires the client to complete there application by purchasing the product via a 3rd party vendor. The payment provider requires certain payment details to be passed via a POST to there secure url, the post contains a number of hidden html fields of which i pass data to from the pages code behind, this was working exactly as it should until we opted to perform AVS checks on the clients payments. To do this the address details need to be passed to the payment provider using exactly the same technique.

The issue i have is the naming convention for the fields is differenet from the others. The html hidden controls need to be named 'billingAddress.street, billlingAddress.houseNameOrNumber, billingAddress.city etc. When i name the controls with in this way i am unable to assign values to them because they are not recognised when i attempt to find the controls in my code behind, if i add a 'runat=server' attribute i get an exception.

When asking the support team they are unable to help, as they do not have a solution!! They also have no idea how other clients deal with this issue, the best solution i have been given is to use '&#46' in place of the "." in the controls name, i have no idea how i can implement this.

Im coding in VB.NET, but am willing to try any solution in another language, im not hugley familiar with JavaScript but think there might be a way to achieve this on the client side.

Any help would be appreciated on this i think there is a straight forward solution, but i have spent a couple of days going round in circles and am now spent!! I have attached some code examples and can provide more if required.

Thanks in advance,

Ben
<input type="hidden" id="billingAddressStreet" name="billingAddress.street"
             runat="server"/>
        <input type="hidden" id="billingAddressHouseNumberOrName" name="billingAddress.houseNumberOrName"
             runat="server" />
        <input type="hidden" id="billingAddressCity" name="billingAddress.city"
             runat="server" />
        <input type="hidden" id="billingAddressPostalCode" name="billingAddress.postalCode"
            runat="server" />
        <input type="hidden" id="billingAddressStateOrProvince" name="billingAddress.stateOrProvince"
            runat="server" />
        <input type="hidden" id="billingAddressCountry" name="billingAddress.country"
            runat="server" />

Open in new window

Protected Sub ExtractDetails_BillingAddress(ByVal _rawString As String)
        ' Split the query_string data
        Dim _detailsCollection() As String = _rawString.Split(",")

        ' Iterate through the supplied payment details
        For _index As Integer = 0 To (_detailsCollection.Count - 1)
            ' Define each each of the parameters
            With Me
                Select Case _index
                    Case "0"
                        .billingAddressStreet.Value = _detailsCollection(_index)
                    Case "1"
                        .billingAddressHouseNumberOrName.Value = _detailsCollection(_index)
                    Case "2"
                        .billingAddressCity.Value = _detailsCollection(_index)
                    Case "3"
                        .billingAddressPostalCode.Value = _detailsCollection(_index)
                    Case "4"
                        .billingAddressStateOrProvince.Value = _detailsCollection(_index)
                    Case "5"
                        .billingAddressCountry.Value = _detailsCollection(_index)
                End Select
            End With
        Next
    End Sub

Open in new window

Payment-Request-Fail---Parser-Er.png
0
Comment
Question by:TCBob
  • 7
  • 6
13 Comments
 
LVL 5

Expert Comment

by:DerSpinner
ID: 37030052
hi!

even in javascript it will not be possible to find and set the values of these input fields as it will fail because of the "." within your IDs.

If you are able to use JQuery this is a suggestion which i haven't tested myself:

* add marker css classes to your input fields ( class="street" etc.)
* try to create a javascript function which is called onload ( <body onload="theFunction()"> ).
* the values that have to be set have to be databound (call DataBind in your Page_Load) in your code behind.
* within the function select your input fields with $('.street') etc. and set the values.

see my code snippet below.
 
<body onload="theFunction()">

<script type="text/javascript">
function theFunction() {
  $('.street').val(<%# _detailsCollection(0) %>);
  ...
}
</script>
</body>

Open in new window


hope that helps at least a bit :)

BR, Marcus
0
 

Author Comment

by:TCBob
ID: 37030078
Hi Marcus,

Thanks for this, i will try it out and get to you with th results!

Cheers,

Ben
0
 
LVL 5

Expert Comment

by:DerSpinner
ID: 37030136
another suggestion:

you can also try to wrap your function into a "$(document).ready(" block. might work as well but looks neater and is called a bit earlier ;)

don'f forget to use the developer tools in IE or e.g. firebug in FF to examine the html/script code generated by your implementation. it will spare you time and frustration.

BR, Marcus
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Comment

by:TCBob
ID: 37030667
Hi,

I tried your idea and still aren't able to get the details to process correclty, the code below shows the output from the page load, the values are populating correctly so it looks as though im heading in the right direction.

I have also attched a copy of the HTML in case i haven't implemented things correctly, i have tried calling the 'setValues' function at both points without success. I have tried hardcoding the values set in the billingAddress controls and this passes so i know the data is formatted ok.

Is the any other way of assigning the values to the hidden controls using a similar method??

Thanks,

Ben
<!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 id="payment_request_head"><link href="../../../../App_Themes/default/a/default_freshegg.css" type="text/css" rel="stylesheet" /><link href="../../../../App_Themes/default/default.css" type="text/css" rel="stylesheet" /><title>
	Deposit Funds
</title>

    <script type="text/javascript">

        function replaceAction() {
            if (document.forms[0].merchantSig.value != "") {
                //setAvsValues
                document.forms[0].method = "post";
                document.forms[0].action = "https://test.barclaycardsmartpay.com/hpp/select.shtml"
                document.forms[0].id = "tosub";
                document.forms[0].submit()}
            else
                {setAvsValues}
        }

        function setAvsValues() {
            $('.street').val('St. James Road');
            $('.houseNumberOrName').val('Temporary Cover Ltd Fyfe House');
            $('.city').val('Fleet');
            $('.stateOrProvince').val('Fleet');
            $('.postalCode').val('GU51 3QH');
            $('.country').val('GB');
        }

        window.onload = replaceAction;	
	</script>

</head>
<body>
    <form name="payment_request_form" method="post" action="smart_pay_post_request_a.aspx?cd=TV.9000.S.1%7c2952%7cGBP%7c2011-10-26%7cZgO53EKa%7cTemporaryCoverECOM%7cen_GB%7c2011-10-26T13%3a08%3a27Z%7cben.carr%40tc247.co.uk%7cSP.RQ.9000.20111026140227%7c2%7cSt.+James+Road%2cTemporary+Cover+Ltd+Fyfe+House%2cFleet%2cGU51+3QH%2cFleet%2cGB" id="payment_request_form" style="text-align: center; padding-top: 15%">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk2MjAzOTcxNA9kFgICAQ9kFgICAw8VBg5TdC4gSmFtZXMgUm9hZB5UZW1wb3JhcnkgQ292ZXIgTHRkIEZ5ZmUgSG91c2UFRmxlZXQFRmxlZXQIR1U1MSAzUUgCR0JkZEG5jweoMV1xNDljVVl31+cIJSHt" />

</div>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWDwKV98aTCQKi8LTNDgLHp92QBAKti5fFAQKIxLfbBQLrx+3nBgLp5sDWBAL90sqBCQLY+afcAwLhjKaiDwKvjqKgDwL7tIKUAQKJysbYDgLnpZvEAQLTmfT2BYYjN3odlL8/aqrQP85/H0E0hO9n" />
</div>
    <div>
        <img src="../../../../a/i/preloaders/payment/smiler_1.gif" id="preloader_image" alt="Processing payment, please wait..." />
        <br />
        <br />
        <span id="label_TransactionState" style="font-weight: bold">Loading payment page, please wait...</span>

    </div>
    <div>
        <input name="merchantReference" type="hidden" id="merchantReference" value="TV.9000.S.1" />
        
        <input type="hidden" id="billingAddress.street" class="street" name="billingAddress.street" />
        <input type="hidden" id="billingAddress.houseNumberOrName" class="houseNumberOrName" name="billingAddress.houseNumberOrName" />
        <input type="hidden" id="billingAddress.city" class="city" name="billingAddress.city" />
        <input type="hidden" id="billingAddress.postalCode" class="postalCode" name="billingAddress.postalCode" />
        <input type="hidden" id="billingAddress.stateOrProvince" class="stateOrProvince" name="billingAddress.stateOrProvince" />
        <input type="hidden" id="billingAddress.country" class="country" name="billingAddress.country" />

        
        <input name="billingAddressSig" type="hidden" id="billingAddressSig" value="r4wWHTy6L4R3VK4pYzfGe6CtaAA=" />
        <input name="paymentAmount" type="hidden" id="paymentAmount" value="2952" />
        <input name="currencyCode" type="hidden" id="currencyCode" value="GBP" />
        <input name="shipBeforeDate" type="hidden" id="shipBeforeDate" value="2011-10-26" />
        <input name="skinCode" type="hidden" id="skinCode" value="ZgO53EKa" />
        <input name="merchantAccount" type="hidden" id="merchantAccount" value="TemporaryCoverECOM" />
        <input name="shopperLocale" type="hidden" id="shopperLocale" value="en_GB" />
        <input name="sessionValidity" type="hidden" id="sessionValidity" value="2011-10-26T13:08:27Z" />
        <input name="merchantSig" type="hidden" id="merchantSig" value="3IMbfxcQNMUna28oLoBW+n9ER+8=" />

        <input name="countryCode" type="hidden" id="countryCode" value="GB" />
        <input name="shopperEmail" type="hidden" id="shopperEmail" value="ben.carr@tc247.co.uk" />
        <input name="shopperReference" type="hidden" id="shopperReference" value="SP.RQ.9000.20111026140227" />
        <input name="billingAddressType" type="hidden" id="billingAddressType" value="2" />
    </div>
    </form>
</body>
</html>

Open in new window

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="smart_pay_post_request_a.aspx.vb"
    Inherits="transaction_process_smart_pay_payment_post_smart_pay_post_request_a" %>

<!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 id="payment_request_head" runat="server">
    <title>Deposit Funds</title>

    <script type="text/javascript">

        function replaceAction() {
            if (document.forms[0].merchantSig.value != "") {
                //setAvsValues
                document.forms[0].method = "post";
                document.forms[0].action = "https://test.barclaycardsmartpay.com/hpp/select.shtml"
                document.forms[0].id = "tosub";
                document.forms[0].submit()}
            else
                {setAvsValues}
        }

        function setAvsValues() {
            $('.street').val('<%# BillingStreet %>');
            $('.houseNumberOrName').val('<%# BillingNameNumber %>');
            $('.city').val('<%# BillingCity %>');
            $('.stateOrProvince').val('<%# BillingState %>');
            $('.postalCode').val('<%# BillingPostalCode %>');
            $('.country').val('<%# BillingCountry %>');
        }

        window.onload = replaceAction;	
	</script>

</head>
<body>
    <form id="payment_request_form" runat="server" style="text-align: center; padding-top: 15%">
    <div>
        <img id="preloader_image" runat="server" src="../../../../a/i/preloaders/payment/smiler_1.gif"
            alt="Processing payment, please wait..." />
        <br />
        <br />
        <asp:Label ID="label_TransactionState" runat="server" Text="Loading payment page, please wait..."
            Style="font-weight: bold" />
    </div>
    <div>
        <input type="hidden" id="merchantReference" name="merchantReference" runat="server" />
        
        <input type="hidden" id="billingAddress.street" class="street" name="billingAddress.street" />
        <input type="hidden" id="billingAddress.houseNumberOrName" class="houseNumberOrName" name="billingAddress.houseNumberOrName" />
        <input type="hidden" id="billingAddress.city" class="city" name="billingAddress.city" />
        <input type="hidden" id="billingAddress.postalCode" class="postalCode" name="billingAddress.postalCode" />
        <input type="hidden" id="billingAddress.stateOrProvince" class="stateOrProvince" name="billingAddress.stateOrProvince" />
        <input type="hidden" id="billingAddress.country" class="country" name="billingAddress.country" />
        
        <input type="hidden" id="billingAddressSig" name="billingAddressSig" runat="server" />
        <input type="hidden" id="paymentAmount" name="paymentAmount" runat="server" />
        <input type="hidden" id="currencyCode" name="currencyCode" runat="server" />
        <input type="hidden" id="shipBeforeDate" name="shipBeforeDate" runat="server" />
        <input type="hidden" id="skinCode" name="skinCode" runat="server" />
        <input type="hidden" id="merchantAccount" name="merchantAccount" runat="server" />
        <input type="hidden" id="shopperLocale" name="shopperLocale" runat="server" />
        <input type="hidden" id="sessionValidity" name="sessionValidity" runat="server" />
        <input type="hidden" id="merchantSig" name="merchantSig" runat="server" />
        <input type="hidden" id="countryCode" name="countryCode" value="GB" runat="server" />
        <input type="hidden" id="shopperEmail" name="shopperEmail" runat="server" />
        <input type="hidden" id="shopperReference" name="shopperReference" runat="server" />
        <input type="hidden" id="billingAddressType" name="billingAddressType" runat="server" />
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 5

Expert Comment

by:DerSpinner
ID: 37030749
Hi Bob,

Have you tried to debug your code with FireBug in Firefox? Does your function "replaceAction" get called? Do you get any javascript errors? Did you add the JQuery reference to your solution? What environment do you use for your implementation (e.g. Visual Studio 2010)?

BR, Marcus
0
 
LVL 5

Expert Comment

by:DerSpinner
ID: 37030817
Ahhhh, about your javascript code:
* Never forget the semicolons at the end of a line!
* Never forget the braces "(" and ")" at the end even on a parameterless function.
* Your function calls should look like this: replaceAction(); OR setAvsValues();

What's the reason for the if statement? In your else path you're just setting the values but don't post anything.

Nevertheless your code should look like this:
 
<script type="text/javascript">

        function replaceAction() {
            if (document.forms[0].merchantSig.value != "") {
                setAvsValues();
                document.forms[0].method = "post";
                document.forms[0].action = "https://test.barclaycardsmartpay.com/hpp/select.shtml";
                document.forms[0].id = "tosub";
                document.forms[0].submit();
            }
            else {
                setAvsValues();
            }
        }

        function setAvsValues() {
            $('.street').val('St. James Road');
            $('.houseNumberOrName').val('Temporary Cover Ltd Fyfe House');
            $('.city').val('Fleet');
            $('.stateOrProvince').val('Fleet');
            $('.postalCode').val('GU51 3QH');
            $('.country').val('GB');
        }

        window.onload = replaceAction();	
	</script>

Open in new window


BR, Marcus
0
 

Author Comment

by:TCBob
ID: 37031186
Hi,

Sorry, my JavaScript isn't up to much! I have made the alterations you suggested above and its very odd.

There are no errors but the page just hangs. When i remove the  '()' from both the 'setAvsValues();
' and 'window.onload = replaceAction();', then the process follows through, but still doesn't work as expected. The values populate like before, but they still don't seem to be being assigned to the hidden controls.

I have attached an example as it now stands on my local copy...also i am using Visual Studio 2008 and have been debugging using FireBug.

Thanks,

Ben
<script type="text/javascript">

        function replaceAction() {
            if (document.forms[0].merchantSig.value != "") {
                setAvsValues();
                document.forms[0].method = "post";
                document.forms[0].action = "https://test.barclaycardsmartpay.com/hpp/select.shtml";
                document.forms[0].id = "tosub";
                document.forms[0].submit();
            }
        }

        function setAvsValues() {
            $('.street').val('<%# BillingStreet %>');
            $('.houseNumberOrName').val('<%# BillingNameNumber %>');
            $('.city').val('<%# BillingCity %>');
            $('.stateOrProvince').val('<%# BillingState %>');
            $('.postalCode').val('<%# BillingPostalCode %>');
            $('.country').val('<%# BillingCountry %>');
        }

        window.onload = replaceAction();	
	</script>

Open in new window

0
 

Author Comment

by:TCBob
ID: 37031256
Hi,

I tried calling this page from IE 8 and received the following JavaScript error details:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; FDM; .NET4.0C; .NET4.0E)
Timestamp: Wed, 26 Oct 2011 14:32:14 UTC


Message: 'document.forms.0.merchantSig' is null or not an object
Line: 12
Char: 13
Code: 0
URI: http://localhost:5000/transaction_process/smart_pay/payment/post/smart_pay_post_request_a.aspx?cd=TV.9000.S.1|2264|GBP|2011-10-26|ZgO53EKa|TemporaryCoverECOM|en_GB|2011-10-26T14:36:00Z|ben.carr@tc247.co.uk|SP.RQ.9000.20111026153000|2|St. James Road,Temporary Cover Ltd Fyfe House,Fleet,GU51 3QH,Fleet,GB

0
 
LVL 5

Expert Comment

by:DerSpinner
ID: 37032254
hi,

you cannot select the input fields via document.forms[0]..... and their id. you have to either use common javascript trying document.getElementById('merchantSig') or the JQuery selector $('#merchantSig').

Marcus
0
 
LVL 5

Accepted Solution

by:
DerSpinner earned 2000 total points
ID: 37032287
so try the following code:

 
function replaceAction() {
            if ($('#merchantSig').val() != "") {
                setAvsValues();
                document.forms[0].method = "post";
                document.forms[0].action = "https://test.barclaycardsmartpay.com/hpp/select.shtml";
                document.forms[0].id = "tosub";
                document.forms[0].submit();
            }
        }

Open in new window


hope this finally does the trick :D

Marcus
0
 

Author Comment

by:TCBob
ID: 37037126
Hi Marcus,

I have tried the above and still am getting errors, the issue i have is the JavaScript code replaceAction() function has been supplied to me by the payment provider as part of the integration guide. Im fully prepared to accept that the syntax of this is flawed, but i still need to implement it as it seems to be the only way that i can properly post the details over.

Anyway i have tried something very striaght forward, that i should have tried from the off, which works as expected. I think maybe i was trying to over complicate things, i have attached this below.

Thanks very much for all your help!!

Ben
<div>
        <input type="hidden" id="merchantReference" name="merchantReference" runat="server" />
        <input type="hidden" id="billingAddress.street" name="billingAddress.street" value="<%# BillingStreet %>" />
        <input type="hidden" id="billingAddress.houseNumberOrName" name="billingAddress.houseNumberOrName"
            value="<%# BillingNameNumber %>" />
        <input type="hidden" id="billingAddress.city" name="billingAddress.city" value="<%# BillingCity %>" />
        <input type="hidden" id="billingAddress.postalCode" name="billingAddress.postalCode"
            value="<%# BillingPostalCode %>" />
        <input type="hidden" id="billingAddress.stateOrProvince" name="billingAddress.stateOrProvince"
            value="<%# BillingState %>" />
        <input type="hidden" id="billingAddress.country" name="billingAddress.country" value="<%# BillingCountry %>" />
        <input type="hidden" id="billingAddressSig" name="billingAddressSig" runat="server" />
        <input type="hidden" id="paymentAmount" name="paymentAmount" runat="server" />
        <input type="hidden" id="currencyCode" name="currencyCode" runat="server" />
        <input type="hidden" id="shipBeforeDate" name="shipBeforeDate" runat="server" />
        <input type="hidden" id="skinCode" name="skinCode" runat="server" />
        <input type="hidden" id="merchantAccount" name="merchantAccount" runat="server" />
        <input type="hidden" id="shopperLocale" name="shopperLocale" runat="server" />
        <input type="hidden" id="sessionValidity" name="sessionValidity" runat="server" />
        <input type="hidden" id="merchantSig" name="merchantSig" runat="server" />
        <input type="hidden" id="countryCode" name="countryCode" value="GB" runat="server" />
        <input type="hidden" id="shopperEmail" name="shopperEmail" runat="server" />
        <input type="hidden" id="shopperReference" name="shopperReference" runat="server" />
        <input type="hidden" id="billingAddressType" name="billingAddressType" runat="server" />
    </div>

Open in new window

0
 

Author Closing Comment

by:TCBob
ID: 37037131
Even though my eventual solution differs, i have no doubt that had i pursued the submitted solution it would have resolved my problem!
0
 
LVL 5

Expert Comment

by:DerSpinner
ID: 37043026
I am glad you made it! Seems I was thinking too complicated from the beginning :)
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question