I've created this landing page that is triggered upon connecting to a router using php. It's got a simple form and one of the field is a qr reader. I followed this tutorial to create the image uploader and decoder.
it was working fine when I'm running it on browser, but upon lodging it via landing page popup, on Android the file upload doesn't trigger and on iPhone, the landing page simply closes.
I suspect that this happens because on iPhone you usually can't navigate away from a landing page without closing it first and destroying the connection with the router. Hence, the deadlock.
here's the js file and html part of my code:
HTML:
<html>
<head>
<title>QR Code Input</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700i,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./styles/index.css">
<script type="text/javascript" src='./js/QRReader.js'> </script>
<script src="./js/QRDecoder.js"> </script>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1" />
</head>
<body>
<div id="center">
<img src="./img/logoCBN.png">
<h1>
Hello $name!
<p id="subheader">Please enter your login code</p>
</h1>
<form action="goto.php" method="post">
<input type="hidden" name="form" value="$form"/>
<input type="hidden" name="username" value="$mac"/>
<input type="hidden" name="password" value="$mac"/>
<input type=text size=20 name="qrcode" placeholder="Scan or enter login code" class=qrcode-text />
<label class=qrcode-text-btn>
<input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1 />
</label>
<p id="error"> $result </p>
<input id="submit" type="submit" value="Login"/>
<!--Additional data-->
<input type="hidden" name="link-login" value="$link_login" />
<input type="hidden" name="link-orig" value="$desired_url" />
<input type="hidden" name="gateway" value="$gateway" />
<input type="hidden" name="lok" value="$location" />
<input type="hidden" name="dst" value="$desired_url"/>
</form>
</div>
</body>
</html>
JS:
function openQRCamera(node) {
var reader = new FileReader();
reader.onload = function() {
node.value = "";
qrcode.callback = function(res) {
if(res instanceof Error) {
alert("No QR code found. Please make sure the QR code is within the camera's frame and try again.");
} else {
node.parentNode.previousElementSibling.value = res;
}
};
qrcode.decode(reader.result);
};
reader.readAsDataURL(node.files[0]);
}
function showQRIntro() {
return confirm("Use your camera to take a picture of a QR code.");
}
So my question is simple, is what I'm trying to do is even possible given the difference in nature between normal website and landing page in terms of file upload?
What I've tried so far is just to test and see if the JS part was even called and it was so I'm sure that it isn't the problem with the JS, it simply stopped doing anything upon reaching the file reader part and just escaped on Android and closes the page on iPhone.
Related
my console log is not outputting anything. It's at the very start of the javascript file, so I have no idea why it doesn't log anything.
Otherwise I'm getting a 302 "Error", but I assume the problem is server side.
Lastly, the ajax post is not getting written into the database. As I've never worked with AJAX before, any pointers would be welcome.
Note: I'm using a Mikrotik as a HotSpot, and it's using $ (dolar signs) for it's own purpuse, so I can't use JQuery.
Thanks for all the help.
This is the whole code, as is...
<!DOCTYPE html>
<html>
<head>
<title>HotSpot</title>
</head>
<body>
<!-- Hotspot login form -->
<form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
$(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<input type="hidden" name="username" type="text" value="HSuser" />
<input type="hidden" name="password" type="password" value="SimpleUserPassword" />
</form>
<!-- Mail for which gets inserted into the DB -->
<form name="mail" action="http://some.domain/validate-sanitize.php" method="post" id="mail">
<h1>Hotspot</h1>
<h2>To gain internet access, enter your email.</h2>
<br />
<input type="text" id="email" name="email" autofocus="autofocus" />
<br />
<input type="submit" value="Submit" id="submit_ok" name="submit_ok" /> <br />
</form>
<script rel="javascript" type="text/javascript">
document.getElementById("submit_ok").addEventListener("click", SendAjax);
function SendAjax() {
var email = document.getElementById("email").value;
console.log(email);
// Check if fields are empty
if (email=="") {
alert("Please enter your email.");
}
// AJAX code to submit form
else{
var xhr = new XMLHttpRequest();
xhr.open('POST', '$(link-login-only)', true);
xhr.send("dst=$(link-orig)&popup=true&username=HSuser&password=SimpleUserPassword");{
setTimeout(function(){
console.log("Fired " + email);
document.getElementById("submit_ok").submit();}, 500 );
}
}
}
</script>
</body>
</html>
This does not answer you question, still it will show the result.
Try replace console.log(email); with alert(email);.
Did you try another browser?
The problem was with Mikrotik. Login was set as CHAP (password authentication with salt), and this method was not implemented. Still don't know why that would be causeing the console.log problems, but well, there it is.
I keep running into mysterious issues when testing my sample MTurk task in the sandbox environment. In the requester environment, I create a task by copy/pasting HTML/JS code into the "Source" text box under Create > Edit Project > (2) Design Layout.
I'm able to preview the task on that page, and it appears to work correctly. I can also publish the HIT in the RequesterSandbox, which lands me on this page: RequesterSandbox > Manage > Results
I can also log into the WorkerSandbox, find my HIT, and complete it. However, when I press submit, I'm redirected to a page that says "Loading next HIT...," and then to another page, which says "Sorry, we couldn't find that page.
Strange...the page you were looking for is not here. Let's go home and try again"
Going BACK to the RequesterSandbox, there is no evidence that the HIT was submitted at all, and I can't find the HIT results. I suspect that it isn't being submitted properly in the WorkerSandbox, but I'm not sure how to fix it. Any advice would be greatly appreciated!!
Here is the HTML/javascript code for my sample task:
// extract url parameters
var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {
queryDict[item.split("=")[0]] = item.split("=")[1]
})
// use extracted url parameters to populate form
$("#endForm").attr("action",queryDict["host"]);
$("#assignmentID").val(queryDict["assignmentId"]);
$("workerId").val(queryDict["workerId"]);
$("#hitId").val(queryDict["hitId"]);
// reveal submit button after radio button is selected
$('#question_buttons').change(function(){
var btnResponse = $("input[name='theseButtons']:checked").val();
if (btnResponse == "thisOne" || btnResponse == "thatOne") {
$("#endTask").removeClass("hidden");
}
})
// submit response
$("submitButton").click(function() {
$("#endForm").submit();
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>MTurk HIT Test</title>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<form action="https://workersandbox.mturk.com/mturk/externalSubmit" id="endForm" method="post" name="endForm">
<input id="data" name="data" type="hidden" value="" />
<input id="assignmentId" name="assignmentId" type="hidden" value="{{ assignment_id }}" />
<input id="workerId" name="workerId" type="hidden" value="{{ workerId }}" />
<input id="hitId" name="hitId" type="hidden" value="{{ hitId }}" />
<div class="container">
<h3>Write something:</h3>
<br />
<textarea cols="50" name="answer" rows="2"></textarea>
</div>
<div class="container" id="question_text">
<h3>Select one of these options:</h3>
</div>
<div class="container" id="question_buttons">
<div class="radio-inline">
<label><input name="theseButtons" type="radio" value="thisOne" />this one</label>
</div>
<div class="radio-inline"><label>
<input name="theseButtons" type="radio" value="thatOne" />that one</label>
</div>
</div>
<div class="container hidden" id="endTask">
<h3>Submit form by clicking the button below:</h3>
<br />
<input id="submitButton" name="submitButton" type="submit" />
</div>
</form>
The results created on sandbox worker UI would not show on the sandbox requester page.
You can also see the answer through this URL:
MTurk HITs created Through Java API are not showing on Manage Tab on UI
There is a console tool to manage the Mturk HIT on sandbox.
I am trying to create something that when the script is run it reads the parameters that have been set in there.
For example loading a custom sidebar where the user can enter details or parameters to the run the script with. These parameters will remain until they are changed but shouldn't be required every time you run a script that uses these parameters.
A sort of like settings menu.
I have seen something similar in some addons that have been made can someone please point in right direction on how to go abouts doing this.
I already have the scripts running succesfully just need a UI where the parameters can be entered and set. I would like to avoid reading it from a sheet in the spreadsheet if possible.
Edit:
I see that there is a getscriptproperty available that is available to all users:
so far I have got update (2):
HTML:
function showside(){
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('body'))
}
function setProperty(objectForm){
PropertiesService.getScriptProperties().setProperties(
{a1: objectForm.a1 ,
a2: objectForm.a2,
p1: objectForm.p1,
p2: objectForm.p3})
return 'Updated'
}
<!DOCTYPE html>
<html>
<head>
<script>
function readProperty(){
var settings = PropertiesService.getScriptProperties(), keys = settings.getKeys()
Logger.log('running')
for (var i =0;i<keys.length;i++){
document.getElementbyID(keys[i].toUpperCase()).value = settings.getProperty(keys[i])
}
}
function handleFormSubmit(objectForm){
google.script.run.setProperty(update).setProperty(objectForm)
}
function update(update){
var div = document.getElementById('output');
div.innerHTML = 'Updated!';
}
</script>
<base target="_top">
</head>
<body onload="readProperty()">
<form id="myForm" onsubmit="handleFormSubmit(this)">
a1<input type="url" id="a1" value="" />
a2<input type="url" id="a2" value="" />
a3<input type="url" id="a3" value="" />
P1<input type="text" id="P1" value="" />
P2<input type="text" id="P2" value="" />
<input type="submit" value="Submit" />
</form>
<div id="output"></div>
</body>
</html>
A rough approach; Improvise from here;
Read comments inside the loadScript();
document.getElementById("formWithData").onsubmit = loadScript();
function loadScript() {
// get data from submitted form
// this way script will re-run with data based on what u give in the form
}
<form id="formWithData">
<input type="text" placeholder ="enter condition 1">
<input type="text" placeholder ="enter condition 2">
<input type="text" placeholder ="enter condition 3">
</form>
I'm working on a simple login page. When the user types in the correct username and password it redirects them to another page. So far I have tried:
window.location, window.location.replace window.href and window.open the only one that works is window.open, however I'm trying to make is so it does not open a newtab, it just redirects them to another page.
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="master.css">
<title>Day Four</title>
</head>
<body>
<h1>Log In</h1>
<form onsubmit="valid()">
<label for="username">Username:</label>
<input id = 'user-name' type="text" name="" value="" required>
<label for="password">Password:</label>
<input id = 'pass-word' type="password" name="" value="" required>
<input id = 'log-in'type="submit" name="" value="Log In">
</form>
</div>
</body>
<script src="mainJs.js" charset="utf-8"></script>
</html>
JS
function valid(){
var username = document.querySelector('#user-name').value;
var password = document.querySelector('#pass-word').value;
if(username === 'test' && password === '1'){
window.open("gradebook.html")
}else{
alert("Wrong username or password")
}
}
Edit: I know it's not secure. I put the code that works window.open("gradebook.html") seeing how the other ones don't do anything.
I also don't get any errors in the console when using the other ones.
It looks like the problem was with the form tags. If I remove the form tags everything starts working as it should.
All you need to do is set window.location to the new URL.
document.querySelector("button").addEventListener("click", function(){
window.location = "http://cnn.com";
});
<button>Click Me</button>
My developing a hybrid app in coredova.My scenario is when user launches an application application will ask a login page.
Once user submit the credentials i want to load a html page from my local ie from xcode.
I tried different methods but it is not working.Some one adviced to try like this window.location="page2.html"; but when i give like this my server will not accept this,ie i want to submit the full path.
Here is my index.html
<html>
<script src="cordova-2.7.0.js"></script> <script src="js/index.js"></script>
<script language="javascript" type="text/jscript"> function DoLogin() { document.forms[0].action = "https://loginpage"; document.forms[0].submit(); } </script> <body > <formDraft
<html>
<script src="cordova-2.7.0.js"></script>
<script src="js/index.js"></script>
<script language="javascript" type="text/jscript">
function DoLogin() {
document.forms[0].action = "https://loginpage";
document.forms[0].submit();
}
</script>
<body >
<form method="post">
<h2>
Welcome ....
</h2>
<p>
Please login using Agent or Employee Id
</p>
<p>
<div>
User Name:<input type="text" id="Ecom_User_Id" style="width: 100px" name="User_ID" /><br />
Password:&x;&y;<input type="password" id="Password" style="width: 100px" name="Password" /><br />
<input type="submit" id="btnLogin" value="Login" onclick="javascipt:DoLogin();return false;" />
<input name="target" type="hidden" id="target" value="file:///www/About.html"/>
<input name="id" type="hidden" id="id" value="NLG" />
</div>
</p>
</form>
</html>
i tried like this value = "About.html" but it is not possible,and also tried by giving the bundle path but not working.
Can anyone please help me with.Highly appriciated.
Thanks in advance.
try
window.location.href="page2.html";
instead of
window.location="page2.html"