Fake HTML URL address when mouse is over a form - forms

let's say that I have the following form:
<form method="post" action="" autocomplete="off"><input name="checking2" type="submit" value="Name" class="ssd"></form>
When a user submits the form this PHP code takes place:
if(isset($_POST['checking2'])){
$xmla = new SimpleXMLElement('passwords/' . views . '.xml', 0, true);
$plus = $xmla->goodx;
$result = $plus + 1;
$xmla->goodx = $result;
$xmla->asXML('passwords/' . views . '.xml');
header( 'Location: http://google.com' ) ;
}
And the following CSS to design the form: code:
.ssd {
border: none;
background-color: transparent;
padding: 0;
cursor: pointer;
font-size:89%;
display:inline;
text-decoration: underline;
color: #00c;
}
Now, every time that the user clicks on the form he is being redirected in return to google. The PHP code is supposed to add +1 to a xml file's value(It works) every time that someone submits the form. My problem is, that whenever someone places his mouse over the form's value, the URL that he sees is the URL address of the current page he is currently on, Not the URL he will be actually redirected to - Google. I am trying to fake the URL address, so instead of seeing the current page URL address(which is action=""), he will see the URL address of google. And no, do not suggest to just place the URL address of google in "action=", because then the PHP data does not being updated properly for some reason whenever I do that. Any help will be appreciated.

In case I got you right, you want to change the forms action property, don't you?
If so, use this little javascript code:
<script>
function fake_action(){
document.forms["myform"].action="http://example.com";
document.forms["myform"].submit();
}
</script>
<form id="myform" action="http://google.com">
<input type="text" placeholder="placehold.it"/>
<input type="button" value="send" onclick="fake_action();"/>
</form>
Just a quick explenation: I have replaced the submit button with a standard button and specified the fake_action(); function as onclick event handler for it. The fake_action function just change the form's action and submit it afterwards. So you can do your stuff without any problem.
(You should just check for GET / POST Parameters at the page load and eventually send them on to the second page after you received them on the first one ;) )

Related

Google Apps Script HTMLService display confirmation page after form submit

I created a web app form using Google Apps Script and the HTMLService.
It is a one-page form with a submit button at the bottom.
When submitted, the form validates whether the data input into the form is valid, and if valid, it logs the form data to a spreadsheet.
That all works so far.
I now need the user to be sent to a confirmation page, and the confirmation page needs to be able to have parameters passed to it (to display certain information on the confirmation page).
main.gs:
function doGet(e) {
var template = HtmlService.createTemplateFromFile('form');
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function processFormSubmission(formData) {
Logger.log('starting processPoRequest');
Logger.log('po: ' + JSON.stringify(formData, null, 2));
// code for appending data to sheet here
}
form.html:
<!DOCTYPE html>
<form id="form1" name="form1">
<label for="info" id="info_label">Info</label>
<input id="info" name="info" type="text">
<input class="btn" id="button" onclick="onClickFunctions(document.getElementById('form1'))" type="submit" value="Submit">
</form>
<script>
function onClickFunctions(formData) {
console.log('starting onClickFunctions');
var allDataValid = validateForm(formData);
if (allDataValid === true) {
google.script.run.withSuccessHandler().processFormSubmission(formData);
}
}
function validateForm(form) {
console.log('starting validateForm');
var errors = 0;
var element = document.getElementById('info');
if (!form.info) { element.classList.add("validation_error"); errors++; if (errors === 1) element.focus(); }
else element.classList.remove("validation_error");
if (errors > 0) return false;
else return true;
}
</script>
confirmation.html:
<!DOCTYPE html>
<?!= confirmationMessage ?>
I don't know what to put in .withSuccessHandler() to make it so that the user is brought to the confirmation page.
I've Googled this extensively and found these results on Stack Overflow, and each one suggests a different solution, but none of them actually include complete working code for a solution:
Possible solutions using doPost:
Send form by email and track responses in spreadsheet
HtmlService doPost With Google Docs Form
HtmlService doPost
I messed around with doPost but I couldn't figure out how to get it to be invoked, and I couldn't find any official documentation in the HTMLService docs.
Possible solution using the link to the web app in an a href:
href in HtmlService
If my button was a link that looked like a button, I'm not sure how I would execute the form validation function when the link is clicked.
I have done this two different ways.
had a hidden statement that gets shown, and the form gets hidden.
or
use .withSuccessHandler(google.script.host.close()), but have the processFormSubmission function open a new dialogue.

Cancel a file upload in ng-file-upload

I have ng-file-upload with form submit running. I would like to add a button to cancel the upload after the user selects a file.
I have tried:
<button class= "btn btn-warning btn-cancel" ng-disabled="!myForm.$valid"
ng-click="cancelPic(picFile)">Cancel</button>
and in the controller:
$scope.cancelPic = function() {
myForm.reset();
file: '';
}
The form does seem to reset as I get a "please select a file" message but the image remains - in the dev tools Elements:
<img ng-show="myForm.file.$valid" ngf-src="!picFile.$error && picFile" class="thumb" src="blob:http%3A//localhost%3A3000/85f1b27c-a92e-447d-b760-8cfe17bbd6b7" style="">
Obviously I'm barking up the wrong tree here. Can anyone help?
Ok I found what I sought at:
https://github.com/danialfarid/ng-file-upload/issues/12
The code that works is:
$scope.cancelPic = function(file) {
myForm.reset();
$scope.picFile = undefined;
}
Now I need to apply this to individual images so a user can choose which to cancel and not reset the whole form. That's for another day.

AngularJS and Tab Order (Disabled Buttons)

I have a form, and I'm navigating only with TAB. Tab order should be input > select > button, but because of the ng-disable on the SUBMIT, on certain browsers the TAB out of the select will kick you somewhere else.
HTML
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<form name="myForm" ng-submit="submit()" novalidate>
First Name: <input type="text" ng-model="Data.FirstName" required><br>
Last Name: <select ng-model="Data.LastName" required>
<option value="Bigglesworth">Bigglesworth</option>
<option value="Burgermeister">Burgermeister</option>
</select><br>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</div>
JS
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
return {
FirstName: '',
LastName: ''
};
});
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.Data = Data;
$scope.submit = function() {
console.log('you just submitted, foolio');
}
});
JsFiddle here.
On Mac FF the final tab kicks you to the address bar before enabling the submit button. Mac Chrome works as you'd expect, focusing on the submit button after final tab. I know Windows is janky, but don't have exact specs to post.
Thoughts? How can I do this in a fool-proof fashion?
EDIT
I've selected #David B.'s answer as it's the best Angular solution. I ended up using a somewhat hidden element right after the the submit button so the focus would stay in the same general area. Lame and hacky, I know, but for a tight deadline it worked.
<h3><button class="fakebtn_hack">Confirmation</button></h3>
<style>.fakebtn_hack {background:none; border:none; color: #FF6319; cursor: default; font-size: 1em; padding: 0;}</style>
This happens because Firefox doesn't send a change event on key-driven changes of the select. Angular doesn't see the change until the tab is hit, so the submit button isn't enabled until after the tab has been processed by the browser (and focus sent to some other element, e.g., the address bar). The W3C standard suggests not sending the event until the control loses focus, although Chrome sends one for any change and Firefox does if the change was mouse-driven.
See the angularjs issue tracker for more: https://github.com/angular/angular.js/issues/4216
As suggested in the issue tracker, solve it by manually issuing the change event via the following select directive (http://jsfiddle.net/j5ZzE/):
myApp.directive("select", function () {
return {
restrict: "E",
require: "?ngModel",
scope: false,
link: function (scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
element.bind("keyup", function () {
element.trigger("change");
})
}
}
})
You'll need JQuery loaded before AngularJS to have the trigger function available on the element object.
Manually include an empty option (<option value=""></option>) in your select or the first option will be auto-selected when the control receives focus.
Unlike the default behavior, this empty option will not disappear after selecting a real option. I suppose you could remove the empty option by declaring all the options via ng-options or ng-repeat and then removing the empty one from the bound scope once a real option has been selected, but I've never tried it.

Passing selected value of a select to form action

I have a menu that I want to differ based on which account is currently selected in the system.
I have a page that allows a user to select an account from an html select. When the user submits the form from the account selection page I want to call the menu method on my controller passing in the selected value so my url looks correct.
Here is the existing template from the page that allows a user to select an account:
#helper.form(action = routes.Accounts.menu {
<table>
<tr>
<td><select id="accountNames">
#accountNames.map { name =>
<option value="#name">#name</option>
}
</select></td>
</tr>
<tr>
<td>
<p>
<input type="submit" value="Choose">
</p>
</td>
</tr>
</table>
}
From my routes file:
GET /account/:accountName/menu controllers.Accounts.menu(accountName: String)
How do I reference the selected value from my select (id="accountNames") and pass it into my form action?
Actually I think you're on the wrong side for doing that.
If the form's action has to change over the use of your 'select', it has to be done using JS.
So when the form is submitted (event submit) you have to update the url.
This can be done easily using javascriptRoutes.
So you have to do several things:
1/ create the javascriptRouter (assuming your add it in Application.scala)
def javascriptRoutes = Action {
Ok(
Routes.javascriptRouter("playRoutes")(
//accounts
controllers.routes.javascript.Accounts.menu
)
).as("text/javascript")
}
2/ define it in your routes file
# Javascript routing
GET /assets/javascripts/routes controllers.Application.javascriptRoutes
3/ add the related javascript file import in your views, let say in main.scala.html
<script type="text/javascript" src="#routes.Application.javascriptRoutes"></script>
4/ add a submit handler to your form that does that before executing the default behavior
$("form").submit(function () {
//this computes the correct URL giving a parameter which is the value of the selected option
var newURl = playRoutes.controllers.Accounts.menu($("#accountNames").val()).url
$(this).attr("action", newUrl);
})
Notice how we've used playRoutes both in the controller (1) and the JS call (4).

Problem in facebook share functionality

I have a facebook iframe application where i have provided a share functionality. I am using this code :
<script>
function fbs_click()
{
u='<?php echo $shareURL;?>';
t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<style>
html .fb_share_button {
display: -moz-inline-block; display:inline-block;
padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea;
background:url(http://b.static.ak.fbcdn.net/rsrc.php/z39E0/hash/ya8q506x.gif)
no-repeat top right;
}
html .fb_share_button:hover {
color:#b5b8d3; border-color:#295582; background:#3b5998
url(http://b.static.ak.fbcdn.net/rsrc.php/z39E0/hash/ya8q506x.gif)
no-repeat top right; text-decoration:none;
}
</style>
Share
The problem i am facing is that if i pass u to my site url then inside share box title is properly displayed but when posted to my profile, clicking on the link redirects me to outside of my facebook application which i don't want i want it to remain inside facebook page.
However if i change u parameter to something like http://apps.facebook.com/app/ then inside share box the title is showing apps.facebook.com and when posted on my profile, clicking on it redirects me inside the facebook application but onto a new tab.
I just want the title should be set according to the value passed and if i click on it on my profile page it should remain inside facebook.
I have found a solution to this problem you have to change the parameters in the window.open and pass the value as urlencode(i have done in php)
I am attaching the changed code:
1)
<?php
$title=urlencode('Facebook Share Platform');
$image=urlencode('imagepath');
$summary=urlencode('Check This Out');
$url=urlencode('http://apps.facebook.com/yourapplication');
?>
2)
window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo $url; ?>&&p[images][0]=<?php echo $image;?>', 'sharer', 'toolbar=0,status=0,width=626,height=436');
Hope this helps to others who are facing same issue.
Thanks
def fb_share_knob opts={}
opts.each { |k,v| opts[k] = CGI.escape(v) if v.present? }
sharer_url = "http://www.facebook.com/sharer.php?s=100&p[url]=#{ opts[:url] }&p[title]=#{ opts[:title] }&p[summary]=#{ opts[:summary] }&p[images][0]=#{ opts[:image] }"
<<-FB_SHARE_LINK
<script type="text/javascript">
function fbs_click() {
window.open('#{ sharer_url }','sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
Share on Facebook
FB_SHARE_LINK
end
Ruby code. Image load problem: if the image you'd like to share is on your test server make sure it's accessible from outside of your firewall