I'm making a dynamic email with two forms, the first of which has one button and a hidden field with a predefined value (the stem) that will be posted to the backend and send the OTP of a specific user. Once the first form is successfully submitted, I unhide the second form to accept the OTP, which has been validated, and the points for that specific customer are redeemed if the OTP is posted to the backend. The issue is that form submission works fine in playground, but when I send the same HTML to gmail, it wraps my original request and does not hit my server.
Here is my Html,
`<!doctype html>
<html amp4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js" async></script>
<!--<script custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" async></script>-->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<meta name="a" content="width=device-width">
<style amp4email-boilerplate>body{visibility:hidden}
</style>
</head>
<body>
<form method="post"
action-xhr="action"
on="submit-success:form2.show,form1.hide,AMP.setState({'otpReference': event.response.Data.OtpReference})" id="form1">
<input type=hidden value="wdDDiFCG" name="stem">
<input type="submit" value="Redeem Now!">
</form>
<form id="form2" method="post" action-xhr="action" hidden>
<input type=hidden value="wdDDiFCG" name="stem" >
<input type=hidden [value]="otpReference" name="otpReference" >
<fieldset>
<label>
<span>Please enter OTP:</span>
<input type="text"
name="otp"
required>
</label>
<input type="submit"
value="Submit & Redeem">
</fieldset>
<button on="tap:form1.show,form2.hide">Back</button>
</form>
</body>
</html>`
I get the following errors in the Google Chrome console.
[amp-form] Failed to parse response JSON: SyntaxError: "undefined" is not valid JSON. [amp-form] Form submission failed: 404.
I searched for solutions on the web but didn't find a satisfactory solution. I don't know exactly what is blocking my form from posting from Gmail.
I configured "CORS" settings as below:
<add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Max-Age" value="600" /> <add name="Access-Control-Allow-Origin" value="https://mail.google.com" /> <add name="AMP-Access-Control-Allow-Source-Origin" value="https://mail.google.com/dynamic-email/relay/v2/index.html" /> <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> <add name="Access-Control-Expose-headers" value="AMP-Access-Control-Allow-Source-Origin" /> <add name="AMP-Email-Allow-Sender" value="amp#gmail.dev"/>
I've also set the AMP-Access-Control-Allow-Source-Origin value to "https://mail.google.com." but it didn't work.
The Access-Control-Allow-Origin value was also set to "*", but it still didn't work.
Related
I have a simple form for payment:
<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
<input name="data" value="{{data}}" />
<input name="signature" value="{{signature}}" />
<input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
</form>
The problem is that I can't press the button for payment, it's just don't work
I can assure you that the form is working I've checked this on C# with some changes:
<div class="container">
<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
<input type="hidden" name="data" value="#ViewData["PaymentData"]" />
<input type="hidden" name="signature" value="#ViewData["Signature"]" />
<input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
</form>
</div>
And all the parametress a passed correctly. It seems like Angular dont let me go to the link or sth like that. Help pls.
UPDATE
Ok I changed the form like this:
<form [formGroup]="payForm" (ngSubmit)="LiqPay()" #formDir="ngForm" novalidate>
<input formControlName="data" name="data" value="{{data}}" />
<input formControlName="signature" name="signature" value="{{signature}}" />
<button type="submit" class="btn btn-default" ng-href="https://www.liqpay.ua/api/3/checkout">go</button>
</form>
with LiqPay method:
LiqPay(){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.payForm.value.data = this.data;
this.payForm.value.signature = this.signature;
this._http.post('https://www.liqpay.ua/api/3/checkout',
this.payForm,{headers}).map((response: Response) => response.json());
}
Now I guess the request is sent but it doesn't redirect on the desired link (https://www.liqpay.ua/api/3/checkout). So how can I change the form to redirect to this link with post data?
In the LiqPay method you are trying to send a post request to https://www.liqpay.ua/api/3/checkout. And in the button you have a ng-href attribute (trying to browser go to that url). I think that is not correct. You are sendind an asynchronous requets, and simultaneously sendind your user to that url.
I can understand, you are sending a form to a payment checkout? ok, you can use action in the form, exactly like the C# example.
I have tested your initial code
<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
<input name="data" value="{{data}}" />
<input name="signature" value="{{signature}}" />
<input type="image" src="//static.liqpay.ua/buttons/p1ru.radius.png" />
</form>
And it works...
You can view it here:
https://jsfiddle.net/L1ruajzn/
I have a PDFTron Web Viewer control on my ASP.NET page where I can successfully view a static file 'GettingStarted.xod' already provided by PDFTron in the WebViewer folder. The file is returned by a ASP.NET web api REST service. The file displays successfully while running the solution locally. On hosting in Azure, I get the document from the web api successfully but the web page hosting the web viewer doesn't show the file, instead an empty web viewer control is only displayed. Please suggest how can I get the XOD to be displayed in the ASP.NET page hosting the web viewer control. The code for fetching the XOD file in settings.js file on WebViewer directory is as follows:-
window.WebViewerUniversalInstance.model.set(
{
documentUrl: "/api/Document/GetXODDocument",
//serverUrl: "../html5/annotationHandler.php", //server script for handling annotations
annotationUser: new PDFTron.WebViewer.User("Guest", false),
currentPageNumber: 0,
pageCount: 0,
zoomLevel: 0,
fitMode: PDFTron.WebViewer.FitMode.Zoom,
layoutMode: PDFTron.WebViewer.LayoutMode.SinglePage,
toolMode: '',
rotation: 0,
webViewerLibPath: 'lib/', //URL path to the WebViewer lib folder
webViewerOptions: { //extra WebViewer options
silverlightOptions: {
enableAnnotations: false //disable annotations if silverlight is loaded.
}
}
});
Adding the .aspx page markup and errors received in console tab of browser
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DocViewer.aspx.cs" Inherits="PDFTronWebViewerWebApi.Content.WebViewer.View" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6 lt-ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 lt-ie8 lt-ie9"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 lt-ie9"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <!--<![endif]-->
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- use latest browser mode for IE -->
<title>WebViewer Universal</title>
<!-- WebViewer.js Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-1.10.2.min.js"></script>
<!-- WebViewer.js IF DEBUG -->
<!--<script src="../silverlight/Silverlight.js" type="text/javascript"></script>
<script src="../flash/FlashUtils.js"></script>
<script src="../flash/swfobject.js"></script>
<script src="../flash/FABridge.js"></script>
<script src="../flash/HttpAjaxPartRetriever.js"></script>
<script src="../WebViewer.js" type="text/javascript"></script>-->
<!-- WebViewer.js ELSE IF PRODUCTION -->
<script src="lib/WebViewer.min.js" type="text/javascript"></script>
<!-- WebViewer.js END -->
<!-- WebViewer Universal Dependencies -->
<script type="text/javascript" src="lib/resources/jquery-ui-1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/resources/modernizr.custom.js"></script>
<script type="text/javascript" src="lib/resources/i18next-1.7.1/i18next-1.7.1.min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/underscore-min.js"></script>
<script type="text/javascript" src="lib/resources/backbone/backbone-min.js"></script>
<!-- WebViewer Universal Specific -->
<link type="text/css" rel="stylesheet" href="lib/universal/universal.css" />
<script src="lib/universal/universal.js"></script>
<!-- WebViewer Universal Settings (Modify this to your own server setup) -->
<script src="settings.js"></script>
<!-- WebViewer Universal Theming -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/cloud/jquery-ui-1.10.0.custom.min.css" />
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" /> <!-- use the extra icon set for the classic theme -->
<link type="text/css" rel="stylesheet" href="lib/resources/themes/classic/icons.css" media="screen" /> <!-- use the extra icon set for the classic theme -->
</head>
<body>
<form id="form1" runat="server">
<div id="headerContainer">
<!-- Optional: add custom header content here.
Example usage: Application logo/branding, links to other pages in your app (My Account, Login, Sign up), etc.
-->
<div>
<span>
<br />
<span style = "font-weight:bold; font-size: 22px;" > Doc View Page </span> <br /><br />
<span>Doc Number : <asp:Label ID="lblDocNo" runat="server" /> ; File Type : XOD</span><br />
<span>File : <asp:Label ID="lblDocName" runat="server" /></span>
</span>
</div>
<div style = "clear:both" ></div>
</div>
<div id="contentContainer">
<div id="leftPanelContainer" style="float:left;">
</div>
<div id="viewerContainer" style="float:left;width:100%">
<div id="control" class="toolbar ui-widget-header" style="overflow:hidden;white-space:nowrap">
<span class="left-aligned">
<button id="sidePanelToggle" type="button" data-i18n="[title]controlbar.toggleSidePanel;controlbar.toggleSidePanel"></button>
</span>
<div class="right-aligned">
<div class="group">
<button id="layoutModeMenuButton" type="button" data-i18n="[title]controlbar.pageLayoutModes;controlbar.pageLayoutModes"></button>
<button id="rotateButton" type="button" data-i18n="[title]controlbar.rotate;controlbar.rotate"></button>
</div>
<div class="group">
<button type="button" id="prevPage" data-i18n="[title]controlbar.previousPage;controlbar.previousPage"></button>
<input type="text" pattern="[0-9]*" name="pageNumberBox" id="pageNumberBox"/>
<div class="ui-label" id="totalPages">/0</div>
<button type="button" id="nextPage" class="" data-i18n="[title]controlbar.nextPage;controlbar.nextPage"></button>
</div>
<div class="group">
<button type="button" id="zoomOut" data-i18n="[title]controlbar.zoomOut;controlbar.zoomOut">Zoom Out</button>
<div class="hidden-xs hidden-sm hidden-md" id="slider" data-i18n="[title]controlbar.zoom"></div>
<input type="text" name="zoomBox" id="zoomBox" data-i18n="[title]controlbar.zoom"/>
<button type="button" id="zoomIn" data-i18n="[title]controlbar.zoomIn;controlbar.zoomIn"></button>
</div>
<div class="group">
<div id="fitModes" class="hidden-xs" title="Page layout">
<input type="radio" id="fitWidth" name="radioFirst"/>
<label for="fitWidth" data-i18n="[title]controlbar.fitWidth;controlbar.fitWidth"></label>
<input type="radio" id="fitPage" name="radioFirst"/>
<label for="fitPage" data-i18n="[title]controlbar.fitPage;controlbar.fitPage"></label>
</div>
</div>
<div class="group">
<span id="tools">
<input type="radio" id="pan" data-tool-mode="Pan" name="radioSecond" />
<label for="pan" data-i18n="[title]controlbar.pan;controlbar.pan"></label>
<input type="radio" id="textSelect" data-tool-mode="TextSelect" name="radioSecond"/>
<label for="textSelect" data-i18n="[title]controlbar.textSelect;controlbar.textSelect"></label>
</span>
</div>
<div class="group">
<span id="searchControl" class="search-component hidden-xs hidden-sm">
<input id="searchBox" type="text" class="toolbar-input-text search-component" name="search" data-i18n="[title]controlbar.search"/>
<button id="searchButton" class="search-component" type="button" data-i18n="[title]controlbar.search;controlbar.search"></button>
</span>
</div>
<div class="group">
<button id="downloadButton" type="button" data-i18n="[title]controlbar.download;controlbar.download"></button>
<button id="printButton" type="button" data-i18n="[title]controlbar.print;controlbar.print" style="display: none;"></button>
<button id="fullScreenButton" type="button" data-i18n="[title]controlbar.fullScreen;controlbar.fullScreen"></button>
<button id="aboutButton" type='button'>About</button>
</div>
</div>
</div>
<ul id="layoutModeMenuList" class="ui-widget ui-menu-dropdown" style="display:none">
<li data-layout-mode="SinglePage"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single"></span>
<div data-i18n="controlbar.layoutMode.single"></div></a></li>
<li data-layout-mode="Continuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-single-cont"></span>
<div data-i18n="controlbar.layoutMode.continuous"></div></a></li>
<li data-layout-mode="Facing"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing"></span>
<div data-i18n="controlbar.layoutMode.facing"></div></a></li>
<li data-layout-mode="FacingContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-facing-cont"></span>
<div data-i18n="controlbar.layoutMode.facingContinuous"></div></a></li>
<li data-layout-mode="FacingCover"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover"></span>
<div data-i18n="controlbar.layoutMode.cover"></div></a></li>
<li data-layout-mode="CoverContinuous"><a href="javascript:void(0)"><span class="ui-icon ui-icon-custom-page-cover-cont"></span>
<div data-i18n="controlbar.layoutMode.coverContinuous"></div></a></li>
</ul>
<div id="overlayMessage" class="overlayMessage" style="display:none"></div>
<div id="printDialog" style="display:none">
<div>
<span data-i18n="print.pagesToPrint"></span>
<input type="text" id="printPageNumbers" title="Enter a single page number or a single page range. e.g. 3, 4-10." placeholder="e.g. 3, 4-10" style="width:100px" />
</div>
<br/>
<div id="printProgress"><div class="progressLabel"></div></div>
</div>
<div id="documentContainer" style="overflow: auto;width:100%;">
</div>
</div>
<div id="rightPanelContainer" style="float:right;">
</div>
<div style="clear:both"/>
</div>
<div id="footerContainer">
<!-- Optional: add footer content here
Example usage: Application logo/branding, a secondary control toolbar (e.g. page navigation), status bar
-->
</div>
</form>
</body>
</html>
Console Errors in browser:
HTML1300: Navigation occurred.
DocViewer.aspx
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337
DocViewer.aspx
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/jquery-1.10.2.min.map
HTML1500: Tag cannot be self-closing. Use an explicit closing tag.
DocViewer.aspx (166,13)
HTML1508: Unmatched end tag.
DocViewer.aspx (173,5)
HTML1521: Unexpected "</body>" or end of file. All open elements should be closed before the end of the document.
DocViewer.aspx (174,1)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/i18next-1.7.1/translation-en.json
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/underscore.js
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/resources/backbone/backbone.js
SCRIPT7016: Use of XMLHttpRequest with the synchronous flag set to true is deprecated due to its impact on user-perceived site performance.
jquery-1.8.2.min.js (2,85652)
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
(XHR)GET - https://<mywebsite>.azurewebsites.net/Content/WebViewer/lib/html5/Resources/i18n/translation-en.json
SCRIPT5022: Error loading document: Invalid XOD file: Zip end header data is wrong size!
CoreControls.js (727,381)
As suggested by Ryan, I upgraded to latest version 2.2.2. I left the WebApi approach and using PDF Tron Web Viewer as used MVC controller to download the file first on hosted folder in Azure and then displayed the file on MVC Razor View.
It looks like you are running an older version of WebViewer that does not have the azure specific fixes.
You need to switch to the latest version.
https://www.pdftron.com/webviewer/download.html
You can check your version by bringing up a developer console in Chrome, in the top left there is a dropdown that should say "", change this to ReaderControl.html, then run readerControl.docViewer.version in the console.
I have a simple form in my MVC3 site that allows users to create a contest entry. This has been implemented and works fine currently, but a request has been made to now allow users to make their entries private.
In my Entry model I added a boolean isPrivate. Then I figured I would change the HTML forms for create and edit to include a checkbox to specify whether the entry should be private.
I'm new to MVC3, but I figured I could simply change the action that the form posts to by including a new boolean parameter.
This unfortunately doesn't seem to work. Can anyone tell me how checkbox values are passed from an HTML form to a post action? This is probably fairly common, but I can't seem to find an example for this on the web. Almost all the examples out there simple show text inputs, I can't find anything with checkboxes.
Form:
<form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return isValidInput()">
<input type="text" id="EntryTitle" name="EntryTitle" />
<div id="invalidTitle" class="invalidData"></div>
<p id="char-remaining">(100 characters remaining)</p>
<input type="text" id="EntryVideo" name="EntryVideo" />
<div id="invalidVideo" class="invalidData"></div>
<p id="vid-desc">(URL of the Video to Embed)</p>
<input type="file" id="ImageFile" name="ImageFile" />
<div id="invalidImage" class="invalidData"></div>
<p id="file-desc">(200x200px, jpeg, png, or gif)</p>
<textarea id="EntryDesc" name="EntryDesc"></textarea>
<div id="invalidDesc" class="invalidData"></div>
<br />
<input type="checkbox" id="isPrivate" name="isPrivate" />
Make my entry private.
<br />
(private entries will only be viewable by you and site administrators)
<br />
<button id="new-entry-save">save</button>
</form>
Action:
public ActionResult Create(string EntryTitle, string EntryVideo, HttpPostedFileBase ImageFile, string EntryDesc, Boolean isPrivate)
{
...
}
add value="true" to checkbox, also add hidden input after it with same name and value=false, i.e.:
<input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
<input type="hidden" name="isPrivate" value="false" />
If you don't want to use hidden, use bool? instead of bool (e.g. nullable)
The other option is to have hidden text field with the same name to force data in unchecked field to be part of the post. See Post the checkboxes that are unchecked.
<form>
<input type='hidden' value='0' name='selfdestruct'>
<input type='checkbox' value='1' name='selfdestruct'>
</form>
I am implementing a standard payment system, which sends some information to 3rd part form. I've a checkout object which stores all my shopping information: ID, products bought, price - you name it.
People are transfered to an ASPX page which has an implementation as seen below.
Currently I have the following problem:
The values send on the inputs which has the runat="server" is 0. Therefore I get an error. However, in the OnPreInit event in the code behind, i set the values of amount, accepturl and orderid. I can see the hidden fields get the correct information when the page is loaded - but when the form is fired (which apparently happens before the OnPreInit event), it is still 0.
How do I solve this problem? Basically I need to use an HTML form which opens a popup window (which HAS to show on page load), where I have to set the hidden fields. Should be quite simple, but after I've used hours on this I would really appreciate some help.
Currently my implementation is like this:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="BetalingMedKort.aspx.cs" Inherits="BetalingMedKort" %>
<!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 runat="server">
<script type="text/javascript" src="http://www.epay.dk/js/standardwindow.js"></script>
<title></title>
</head>
<body onload="open_ePay_window()">
<form action="SomeUrl" runat="server" method="post" name="ePay" target="ePay_window" id="ePay">
<input type="hidden" name="merchantnumber" value="MyStaticMerchantNumber" />
<input type="hidden" name="language" value="1" />
<input type="hidden" name="currency" value="208" />
<input type="hidden" name="amount" id="amountField" runat="server" />
<input type="hidden" name="accepturl" id="acceptUrlField" runat="server" />
<input type="hidden" name="orderid" id="orderIdField" runat="server" />
<input type="hidden" name="declineurl" value="SomeUrl" />
</form>
<div>
If the ePay Payment Window does not open automatically please click on the button below to open it.
<br /><br />
Notice! If you are using a pop-up blocker, you must hold down the CTRL key as you click the button.
<br /><br />
<input type="button" value="Open the ePay Payment Window" onClick="open_ePay_window()">
</div>
</body>
</html>
Thanks so much...
Try setting the input values in the page's Init or Load events. ViewState isn't available during PreInit (though there may be some exceptions).
If you absolutely have to perform your logic during PreInit then this page may have a workaround for you.
I am developing a website using asp.net c# and I want to put a form inside the page. Now as aspx pages have the form tag I do not want to nest another form inside this as it will invalidate my html. But I need this form to use GET rather than POST. I know I can change the postback url in the asp:button. Can this be done without using logic in the codbehind?
Change the method to GET just for this form not every thing on the page
change the target to _blank if possible.
Example in html of what I want.
<form action="http://maps.google.co.uk/maps" method="get">
<p><label for="saddr">Your postcode</label>
<input type="text" name="saddr" id="saddr" value="" />
<input type="submit" value="Go" />
<input type="hidden" name="daddr" value="[destination]" />
<input type="hidden" name="hl" value="en" /></p>
</form>
you can use jquery to accomplish this
$(document).ready(function() {
$("#buttonId").click(function() {
$("#formId").attr("method", "get");
});
});
the above snippet, fires when the button with id 'buttonId' is clicked. it changes the method attribute of the form with id 'formId'
You can have multiple forms in an html. ASP.NET page also supports multiple form tags, however only one of then can be server side form (runat="server").
So I will suggest that you add another form tag within your page - some thing like
...
<body>
<form runat="server">
... server controls etc
</form>
<!-- your form -->
<form action="http://maps.google.co.uk/maps" method="get">
<p><label for="saddr">Your postcode</label>
<input type="text" name="saddr" id="saddr" value="" />
<input type="submit" value="Go" />
<input type="hidden" name="daddr" value="[destination]" />
<input type="hidden" name="hl" value="en" /></p>
</form>
</body>
</html>
Note that you cannot put any server side control in your html tag. So you have to use html controls and manage them within page code using Request object.