I'm trying to implement adaptive payments as embedded payment with lightbox.
It works fine until a user makes a payment, but after user completes the payment
page specified by return url gets loaded within the iframe.
I'm expecting it to be loaded in the window NOT in the iframe.
Following is the code that I have. Am I missing something?
Environment
Java(play framework)
PayPal_Platform_Java_SDK_N
Expected Page Transfer Scenario
PageA - ("pay with paypal" button click)
→ paypal dialog - ("close" button click)
→ PageB
PageA.html
<form action="https://www.sandbox.paypal.com/webapps/adaptivepayment/flow/pay" target="PPDGFrame">
<dl>
<dt></dt>
<dd>
<input id="type" type="hidden" name="expType" value="light">
<input id="paykey" type="hidden" name="paykey" value="AP-KEY">
<input type="submit" id="paypalSubmitBtn" value="Pay with paypal" />
</dd>
</dl>
</form>
<script type="text/javascript">
var dgFlow;
$(function(){
dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'paypalSubmitBtn' });
});
</script>
PageB.html
<p>Thank you for your payment!</p>
<script type="text/javascript">
function handleEmbeddedFlow() {
if (top && top.opener && top.opener.top) {
top.opener.top.dgFlow.closeFlow();
}
else{
top.dgFlow.closeFlow();
}
top.close();
}
jQuery.event.add(window, "load", function(){
alert("window.load");
handleEmbeddedFlow();
});
</script>
I also noticed that dgFlow can not be resolved in else case's top.dgFlow.closeFlow(); in PageB.html.
You can try to detect if the page is running in an iframe, and if so redirect to the page directly.
How to detect:
How to identify if a webpage is being loaded inside an iframe or directly into the browser window?
How to redirect:
Redirect the parent page from IFrame
Related
I have a simple search input box in my webpage that has google search action to it.This is the code.
<div className="search-container">
<form action="https://www.google.com/search" method="GET">
<input type="search" id="search" name="q" placeholder="Search Google or type URL" />
<button className="icon" type="submit"><i className="small material-icons">search</i></button>
</form>
</div>
This is the image of search box
So if i type anything for example like apple, it searches google for apple and displays the content. But if I type a url like http://facebook.com, it again searches google and displays the search result for facebook.
But I need it to redirect to that particular website when I enter a url. If i enter http://facebook.com and press enter, It must redirect me to the facebook website and not to the google search results page for facebook.
Please help me out in this. Thanks in advance.
Effectively what you want here is for the one button to do two different things (search via google, or redirect to a URL). Because you want one element to do two different things, I would recommend using Javascript so that the page can decide which thing to do.
The following code will take in a string from an input box and either redirect if it starts with "HTTP://" or searches google if it doesn't:
<html>
<head>
<script>
function search(query){
if(query.slice(0, 7) == "http://"){
window.location.href = query
}
else{
window.location.href = "https://www.google.com/search?q=" + query
}
}
</script>
</head>
<body>
<label for="url">Enter a URL or search query</label>
<input type="text" name="search" id="search">
<button type="submit" onclick="search(document.getElementById('search').value)">search</button>
</body>
</html>
You can add JS to check whether the input value is a URL.
function go() {
const val = document.getElementById('input').value
window.open(
(isURL(val) ? '' :
'https://google.com/search?q=') + val,
'_blank')
}
function isURL(url) {
try {
new URL(url)
return true
} catch (e) {
return false
}
}
<input type="text" id="input" placeholder="Search Google or type URL" />
<button onclick="go()">Search</button>
I have one input bar which must redirect to another https page (contains google-search) on submit. The code of the form is the next:
<form class="navbar-form navbar-left hide-inputs buscadoMovilLine" role="search" target="_blank" action-xhr="https://www.tuotromedico.com/buscadorg.php" action="https://www.tuotromedico.com/buscadorg.php" method="get">
<div class="form-group buscador">
<input class="SearchInputMovil2 inl" type="text" placeholder="Buscar..." class="form-control" name="q">
<button class="inl" type="submit" class="btn btn-default"><i class="fa fa-search lupaBuscarMovilBoton2" aria-hidden="true"></i></button>
</div>
</form>
I have added the amp-form extension too. The official documentation says this:
Redirecting after a submission
amp-form also allows publishers to redirect users to a new page after a submission happens through AMP-Redirect-To response header.
Note that you'd also have to update your Access-Control-Expose-Headers
response header to include AMP-Redirect-To to the list of allowed
headers.
The redirect URL must be absolute HTTPS URL otherwise AMP will throw
an error and redirection won't happen.
https://www.ampproject.org/es/docs/reference/components/dynamic/amp-form
But im not sure how have i to specify that.
I know 2 ways, this is for node:
app.post('/register', function (req, res) {
let form = new formidable.IncomingForm();
form.parse(req, function (err, fields) {
res.setHeader('AMP-Access-Control-Allow-Source-Origin', 'https://example.com/');
if (fields.first_name && fields.last_name) {
res.setHeader('AMP-Redirect-To', 'https://example.com/some-key');
res.status(200).json(fields);
} else {
res.status(400).json({error: 'Please select a size.'});
}
});
and the second, in amp you can use navigateTo()
<form class="proceed__form" method="post" id="requirements-form"
action-xhr="https://localhost:4040/check-requirements"
target="_top"
on="submit-success:AMP.navigateTo(url='https://google.com')"
>
</form>
OR you can get variable from response
(res.status(200).json({message: 'success', navigateTo: domain + '/profile'});)
<form class="proceed__form" method="post" id="requirements-form"
action-xhr="https://localhost:4040/check-requirements"
target="_top"
on="submit-success:AMP.navigateTo(url=event.response.navigateTo)"
>
</form>
I have a form on my page that needs to have multiple form actions associated with it. I'm using the following script in conjunction with the following code to achieve this:
<script>
function submitForm(action)
{
document.getElementById('summary').action = action;
document.getElementById('summary').submit();
}
</script>
<form action="go-gold.php" method="post" enctype="multipart/form-data">
<input type="image" id="arrow" name="go_back" onclick="submitForm('go-gold.php')" value="go_back" src="images/arrow_back.png" class="submit_button" /><br>
<input type="image" id="arrow" name="submit_form" onclick="submitForm('registration.php')" value="submit_form" src="images/arrow.png" class="submit_button" />
</form>
The first button needs to "go back" within the same browser window (self), and the second button needs to submit the info to a new window (blank). How do I modify the code to achieve this? Putting "target" functions within the input type doesn't work, and putting the target in the Form tag makes both submit buttons submit to the same window.
Thanks!
Easy with jQuery, also you have to identical ids for two separate form elements. You should have these as distinct ids unless you want to use a class name. Php can submit forms to the same page using the $_SERVER superglobal by using $_SERVER['PHP_SELF'] as the forms action name.
<script>
$(document).ready(function() {
$(".submit_button").click(function() {
clickVal = $(".submit_button").val();
if(clickVal == 'go_back') {
//do go back stuff
}
if(clickVal == 'submit_form') {
// do actions for other page
}
});
});
</script>
<form action="go-gold.php" method="post" enctype="multipart/form-data">
<input type="image" value="go_back" src="images/arrow_back.png" class="submit_button" /><br>
<input type="image" value="submit_form" src="images/arrow.png" class="submit_button" />
</form>
Searched and browsed the forum and tried many examples of ajax and form submission but can't get anything close to work for what I am trying to achieve. I must admit I've been going in circles for days with this and need someone with a fresh pair of eyes.
I have 2 pages:
page1.php
page2.php
Using Google jquery/1.9.0/jquery.js and developing this locally.
page1.php is as follows (I've omitted the head script and body/html tags for clarity)
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "page2.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#done').fadeIn('slow');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
<div id="address">
<form action="page2.php" method="post" name="theForm">
<input name="checkname" type="text" id="checkname">
<input name="Proceed" type="submit" id="submit" value="Next Page" />
</form>
</div>
<div id="done">
That Worked!
</div>
Page2.php
Has a mysql query that checks the database for the checkname and echoes 'success' or ' fail' depending upon the result. The query runs fine and is not showing any error.
When the form is submitted page2.php loads and just shows 'success' in the browser.
Firebug also shows success under both response and html. There are no errors within firebug.
I basically want page1.php to stay and for the #address div to hide and the #done div to show when success is passed from page2.php
Hope someone can help.
Update
I tried this test page:
ajaxone.php
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#theForm').submit(function(){
$.ajax({
type: "POST",
url: "ajaxtwo.php",
data: 'html',
success: function(html){
if(html == 'success'){
$('#address').fadeOut('slow');
$('#payment').fadeIn('slow');
alert('ok');
}else if(html == 'fail'){
alert('fail');
}
}
});
return false;
});
});
</script>
<style type="text/css">
#payment{
visibility:hidden;
}
</style>
<div id="address">
<form action="ajaxtwo.php" method="post" name="theForm" id="theForm">
<p>
<input name="name" type="text" id="name">
</p>
<p>
<input type="submit" name="submit" value="submit">
</p>
</form></div>
<div id="payment">Name is correct</div>
ajaxtwo.php
print_r($_POST);
if($_POST['name'] == 'rob'){
echo 'success';
}else{
echo 'fail';
}
Using the above firebug shows the following error:
Array ( )
Undefined index: name
fail
However, when I remove the ajax call the submit works and the data is passed.
So, am I right to assume that if you do not specify the form variables within the ajax call nothing is posted to the next page?
Update 2
Sorry I'm answering myself here.
It does appear that you need to specify the form data to send within the ajax call.
I've just added:
$('#theForm').serialize();
within the ajax call and now the form submits without an error.
However, this still goes to ajaxtwo.php and does not show the success or fail on the ajaxone.php page.
So my next stage is to get the success or fail to show on ajaxone.php
You need to add id="theForm" in the form tag itself.
Example:
<form action="page2.php" method="post" id="theForm" name="theForm">
I would say, add a and then make jq read the output and then redirect accordingly, or use php to redict based on $success_fail result.
I´m working on a website with a purchase process. I have a form generated by some PHP that looks like this:
<form name="order_form" action="'.$thePayreadApi->get_server_url().'" method="post" id="payer-form">
'.$thePayreadApi->generate_form().'
<input type="submit" value="Klicka för betalning" />
</form>';
When the form is submitted it will go to a new page (located on another server) where the purchase is performed.
Basically what I want is the form to be submitted through AJAX and then load the new page in a Modal Window. I use jQuery throughout the website so I´d like a solution based on that lib.
I´ve found these sites that might be a hint:
http://pixeline.be/blog/2008/javascript-loading-external-urls-in-jqmodal-jquery-plugin/
http://dev.iceburg.net/jquery/jqModal/
Any help is really appreciated!
I haven't tried this exactly, but the theory is what I would go for:
$("form[name='order_form']").submit(function() {
//Validate in here
var validate = false;
if($("input[form='element1']").val()!="") {
validate = true;
}
if(validate) {
this.submit();
} else {
return false;
}
});
<form action="shopping.php" target="targetIframe" method="post">
<input type="submit" value="Click Me" />
</form>
<iframe name="targetIframe" src=""></iframe>