Generating a Simple QR-Code with just HTML - qr-code

I came across this APIserver to generate the QRCode but I was wondering is it possible to just use HTML to generate the QRcode for example this is what I was thinking
<input id="text" type="text" value="Please Enter Your NRIC or Work Permit" style="Width:20%"/>
<img src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100" alt="" title="HELLO" />
In the "title" I believe it is where you will write your text and the QR code would generate, I was wondering how can I create a text box for me to key in the value directly on a website.

Were you thinking of something like this? https://jsfiddle.net/v7d6d1ps/
Your HTML can be similar to what you have but with added onblur event. Only HTML cannot do this, so I have added jQuery/JavaScript combination.
<html>
<head>
<title>Testing QR code</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function generateBarCode()
{
var nric = $('#text').val();
var url = 'https://api.qrserver.com/v1/create-qr-code/?data=' + nric + '&size=50x50';
$('#barcode').attr('src', url);
}
</script>
</head>
<body>
<input id="text" type="text"
value="NRIC or Work Permit" style="Width:20%"
onblur='generateBarCode();' />
<img id='barcode'
src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100"
alt=""
title="HELLO"
width="50"
height="50" />
</body>
</html>
Copy and paste this into an HTML file on your desktop. Type in the text box 12345 and hit tab. Notice that the QR code will update.

Related

Automate reset password in wordpress (python requests or other ways)

I am trying to take some measurements about how fast is resetting a user's password with the default WordPress methods. WordPress first asks for an email or the username, and then sends a link to the email of that user. If you follow the link, it redirects you to a page ("localhost/wordpress_5_4_2_try3/wp-login.php?action=rp") where you must insert a new password for that that user. It looks like that:
Provide new password image (default content on the password field)
I have the ability to do some small changes to the WordPress code (for example I changed the wp_mail function so no mail is sent and added some storing of the activation link in a specific file). I need to do experiments with a lot of users trying to change their passwords at the same time. I have written code using Selenium about it, but this is not what I am looking for, because it is slow. I am trying to find out if there is a quicker solution (via python requests library or another library/tool/language). I am open to different ideas. You can find what I have already tried below:
1)
import requests
s=requests.Session()
info = {'pass1':'a_password#38'}
url1 = "http://localhost/wordpress_5_4_2_try3/wp-login.php?action=rp&key=theKey&login=user_name"
url2 = "http://localhost/wordpress_5_4_2_try3/wp-login.php?action=rp"
r = s.get(url1)
r2 = s.post(url1, data=info)
r3 = requests.post(url2, data=info)
I have tried many versions of 1. In some of them for example I have not used the r and only used r2, some others I did not use r3. I believe that my problem comes from the fact that it is redirected to give me the form. You can find here the response I got when I used the print(r2.text), in case it is helpful:
<!--[if IE 8]>
<html xmlns="http://www.w3.org/1999/xhtml" class="ie8" lang="en-US">
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Reset Password ‹ wordPrSite3 — WordPress</title>
<link rel='dns-prefetch' href='//s.w.org' /> <script> var userSettings = {"url":"\/wordpress_5_4_2_try3\/","uid":"0","time":"1621286619","secure":""}; </script> <script src='http://localhost/wordpress_5_4_2_try3/wp-includes/js/utils.min.js?ver=5.4.6'></script> <script src='http://localhost/wordpress_5_4_2_try3/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script> <script src='http://localhost/wordpress_5_4_2_try3/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> <script> var _zxcvbnSettings = {"src":"http:\/\/localhost\/wordpress_5_4_2_try3\/wp-includes\/js\/zxcvbn.min.js"}; </script> <script src='http://localhost/wordpress_5_4_2_try3/wp-includes/js/zxcvbn-async.min.js?ver=1.0'></script> <link rel='stylesheet' id='dashicons-css' href='http://localhost/wordpress_5_4_2_try3/wp-includes/css/dashicons.min.css?ver=5.4.6' media='all' /> <link rel='stylesheet' id='buttons-css' href='http://localhost/wordpress_5_4_2_try3/wp-includes/css/buttons.min.css?ver=5.4.6' media='all' /> <link rel='stylesheet' id='forms-css' href='http://localhost/wordpress_5_4_2_try3/wp-admin/css/forms.min.css?ver=5.4.6' media='all' /> <link rel='stylesheet' id='l10n-css' href='http://localhost/wordpress_5_4_2_try3/wp-admin/css/l10n.min.css?ver=5.4.6' media='all' /> <link rel='stylesheet' id='login-css' href='http://localhost/wordpress_5_4_2_try3/wp-admin/css/login.min.css?ver=5.4.6' media='all' />
<meta name='robots' content='noindex,noarchive' />
<meta name='referrer' content='strict-origin-when-cross-origin' />
<meta name="viewport" content="width=device-width" />
</head>
<body class="login no-js login-action-rp wp-core-ui locale-en-us">
<script type="text/javascript">
document.body.className = document.body.className.replace('no-js','js');
</script>
<div id="login">
<h1>Powered by WordPress</h1>
<p class="message reset-pass">Enter your new password below.</p>
<form name="resetpassform" id="resetpassform" action="http://localhost/wordpress_5_4_2_try3/wp-login.php?action=resetpass" method="post" autocomplete="off">
<input type="hidden" id="user_login" value="user_name " autocomplete="off" />
<div class="user-pass1-wrap">
<p>
<label for="pass1">New password</label>
</p>
<div class="wp-pwd">
<input type="password" data-reveal="1" data-pw="t)&NlDW$C7wgG^20" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="Hide password">
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
</button>
<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite">Strength indicator</div>
</div>
<div class="pw-weak">
<input type="checkbox" name="pw_weak" id="pw-weak" class="pw-checkbox" />
<label for="pw-weak">Confirm use of weak password</label>
</div>
</div>
<p class="user-pass2-wrap">
<label for="pass2">Confirm new password</label>
<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
</p>
<p class="description indicator-hint">Hint: The password should be at least twelve characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ % ^ & ).</p>
<br class="clear" />
<input type="hidden" name="rp_key" value="theKey" />
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Reset Password" />
</p>
</form>
<p id="nav">
Log in
| Register </p>
<p id="backtoblog"><a href="http://localhost/wordpress_5_4_2_try3/">
← Back to wordPrSite3 </a></p>
</div>
<script type="text/javascript">
try{document.getElementById('user_pass').focus();}catch(e){}
if(typeof wpOnload=='function')wpOnload();
</script>
<script> var pwsL10n = {"unknown":"Password strength unknown","short":"Very weak","bad":"Weak","good":"Medium","strong":"Strong","mismatch":"Mismatch"}; </script> <script src='http://localhost/wordpress_5_4_2_try3/wp-admin/js/password-strength-meter.min.js?ver=5.4.6'></script> <script src='http://localhost/wordpress_5_4_2_try3/wp-includes/js/underscore.min.js?ver=1.8.3'></script> <script> var _wpUtilSettings = {"ajax":{"url":"\/wordpress_5_4_2_try3\/wp-admin\/admin-ajax.php"}}; </script> <script src='http://localhost/wordpress_5_4_2_try3/wp-includes/js/wp-util.min.js?ver=5.4.6'></script> <script> var userProfileL10n = {"warn":"Your new password has not been saved.","warnWeak":"Confirm use of weak password","show":"Show","hide":"Hide","cancel":"Cancel","ariaShow":"Show password","ariaHide":"Hide password"}; </script> <script src='http://localhost/wordpress_5_4_2_try3/wp-admin/js/user-profile.min.js?ver=5.4.6'></script>
<script>
/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
</script>
<div class="clear"></div>
</body>
</html>
After using postman and issuing only the post request I found that it does not redirect me to that page, but the preview instead looks like that:
Preview from postman
Because of this and after studying the r2.text, I changed my code and tried everything again using as info the:
info = {'pass1':'a_password#38', 'pass2':'a_password#38'}
The results were, unfortunately, the same and I am very confused about what exactly happens.
So, my questions are (with most important the 3rd one):
Why is the one simple post request not enough to submit the new password (or the password and the password confirmation)?
Why when I try it from my browser I get redirected to a page with 1 field (the one I showed in the first picture-link), while the postman and the code that is returned from a simple get request to the http://localhost/wordpress_5_4_2_try3/wp-login.php?action=rp&key=theKey&login=user_name implies that 2 fields are needed?
Do you have any idea of how to make it word either with requests or with another tool/library? I use Python requests but, of course, other languages are also welcome. My goal is to not use a tool that actually opens a browser, which takes a lot of time and more resources than I would prefer to give (I want to make some requests in parallel and measure the performance).
Any help is appreciated! Thank you.

Image not displaying on webpage just shows source

I am trying to dynamically display an image with text on it. There are quite a few examples of this ie Write Text On An Image in c#
For the time being this is the only thing on a visual studio generated empty winform page.
but I continue to get the same result regardless of the technique is use, so perhaps its a problem with my page?
My output page displays like this:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="index.aspx.vb" Inherits="testtext.index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./index.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="G30FF0+ZAHGhkQJeBgR+oRS6OrykggI6KG2KLa2Mf0lna5zKb83yvLWtkQfnBa4AEDqKkttFuBoZ1lWeDcgqUpLSg0hHsyoD0paxcB2U0Js=" />
</div>
<div>
<p><img src="data:image/PNG;Base64, �PNG���
IHDR���5������9堢���sRGB�������gAMA����
�a��� pHYs�������o�d����IDATHKՓ��0�;�9Nvq�lb����D� />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="90059987" />
</div></form>
</body>
</html>
My code looks like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtmstrong textl">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%Dim cls = New testtext.clsUtil %>
<p><img src="data:image/PNG;Base64, <%cls.MakeImage("Testing") %>" />
</div>
</form>
</body>
</html>
the function .MakeImage ends as follows:
'// SET ALIGNMENT
Dim format As StringFormat = New StringFormat
format.LineAlignment = StringAlignment.Center
'// DRAW THE FONT
Dim oMemStream As MemoryStream = New MemoryStream
g.DrawString(Text, oFont, fgBrush, rectF, format)
System.Web.HttpContext.Current.Response.ContentType = "image/png"
img.Save(oMemStream, ImageFormat.Png)
oMemStream.WriteTo(System.Web.HttpContext.Current.Response.OutputStream)
'// CLEAN UP
img.Dispose()
Return Nothing
End Function
The function .MakeImage appears to be working correctly returning the image but sadly no picture is displayed.
Can you see what I am doing wrong?
two things:
your output is not base64 encoded, and your page output you’ve listed doesn’t have a closing double-quote on src=“...
Let me know if you need code on how to resolve. Deal with base64 first, in case the current output is messing up the page output.
Cheers!
Added:
use Convert.ToBase64String(bytes) to encode your bytes into a Base64 string.
Or, if you want to continue to return bytes to the client, consider just putting an image URL in like src=“/images.ashx/testing", then setting up an ASHX handler to call your image-generating function. You can return bytes without encoding.

Bind Enter Key in Textbox to specific button

i have tried every possible script on StackOverflow but nothing is working.I want to bind enter key to a textbox , which clicks the specific button.
Code looks like this:
<form>
Enter URL: <input type="text" id="url" />
<input id="button" type="button" value="Load" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
button leads to another script for loading URL (which is working absolutely fine).But when i use any javascript or jquery, nothing happens, it shows "?" in main browser URL and my link from textbox disappers.
Sorry i am noob in programming, please help me
My loadUrl() Script:
<script type="text/javascript">
function loadUrl() {
var url = document.getElementById( 'url' ).value,
showUrl = document.getElementById( 'showUrl' );
showUrl.src = /$https?:\/\//.test(url) ? url : 'https://'+url;
}
</script>
Here's the example on Plunker. If you create the form correctly it should automatically submit when you press the enter key, or click the Go/submit button.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="theForm" method="GET" action="#">
Link:
<input type="text" id="url" />
<input type="submit" id="goButton" value="Go"/>
</form>
<iframe id="showUrl"></iframe>
<script src="script.js"></script>
</body>
</html>
script.js
var url = document.getElementById('url'),
showUrl = document.getElementById('showUrl'),
goButton = document.getElementById('goButton'),
theForm = document.getElementById('theForm');
function loadUrl(e) {
e.preventDefault();
showUrl.src = url.value;
return false;
}
theForm.addEventListener('submit', loadUrl);
url.addEventListener('keyup', function(e){
//You shouldn't need this since the form submits when you click enter anyway.
console.log(e.key);
console.log(e.which);
console.log(e.char);
});

Iframe javascript src setting opens in entire window

I have defined an IFrame in HTML.
From JavaScript I am trying to change the URL(src attribute) of the IFrame. It's working fine with most of the URLs. But when I try to set an eBay item URL more than once it opens in entire window.
Here is my code:
<html>
<head>
<script type="text/javascript">
function seturl(){
var txt=document.getElementsByName("txt");
document.getElementById('testframe').src = txt[0].value;
}
</script>
</head>
<body>
<iframe id="testframe" width= "700" height="500" >
</iframe>
<input type="text" name="txt" width="700"/>
<input type="button" value="Click me!" onclick="seturl()" />
</body>
</html>
Is there any solution to avoid opening in entire page for this eBay items URL?
http://cgi.ebay.com/Apple-iPad-Wi-Fi-32GB-BRAND-NEW-NO-RESERVE_W0QQitemZ220725228457QQcategoryZ171485QQcmdZViewItem
You are not allowed to do so.
It would seem that what you want to do is a violation of the UA.
http://pages.ebay.com/help/policies/user-agreement.html

Javascript/DOM Why is does my form not support submit()?

This is my first time working with asp.net and javascript, so I don't know a lot of the nice web resources, or much about debugging javascript. I'm looking to find out why on line
oFormObject.submit(); Microsoft JScript runtime error: Object doesn't support this property or method.
I'm using links to function as buttons because I'm terrible at aesthetics and I think links will look more professional than a table of 50 buttons. I read that this solution may cause issues with browsers trying to pre-render my links and causing lots of extra traffic and problems, but the Css I found to make a button look like a link seemed to have alignment and spacing issues.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
Defect Severity Assessment Code List
</title></head>
<body>
<form name="form1" method="post" action="CodeList.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>
<div>
<p>Welcome Maslow</p><SCRIPT language="JavaScript">
function submitForm(intId)
{ oFormObject= document.getElementById(""form"+_StrCodeId + #""");
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
oFormObject.submit();
}
</SCRIPT> <form method="post" action="CodeAssessment.aspx" id="formcodeId">
<table name="codeId" id="codeId" value="0" type="hidden" class="linkTable">
<tr>
<th>Completed</th><th>Code</th><th>Description</th><th>Code Present Since</th>
</tr><tr class="row">
<td><input name="401" type="checkbox" value="401" DISABLED /></td><td>401</td><td>Missing Original Document/form</td><td>2009.10.16</td>
</tr><tr class="rowAlternate">
<td><input name="NDMI" type="checkbox" checked="checked" value="NDMI" DISABLED /></td>
<td>NDMI</td>
<td>Note date is missing</td> <td>2009.10.15</td>
</tr>
</table><input type="submit" />
</form>
</div>
</form>
</body>
</html>
If I change the script line to oFormObject= document.forms[0]; it submits the asp.net's viewstate form posting back to the same page instead of where I want to go. so the rest of the code on the page appears to work.
So we solved this in another answer, but using comments, so this is just incase anyone else has the same problem,
It's all down to the form having a runat="server" attribute, this generates the viewstate input, then when the form is submitted to the second page, it tries to fill out the page with the details from the viewstate, however as in this case the form is submitted to another page, the two pages don't match up and when it tries to deal with the viewstate input it throws the error.
The solution is to either remove the runat="server" attribute on the form, or to set EnableViewStateMac="False" attribute from the second page.
I'm not really into asp.net but into javascript, so I'd say there's a parse error in
oFormObject= document.getElementById(""form"+_StrCodeId + #""");
the quotes just don't match. i'd say you try to change it to
oFormObject= document.getElementById("formcodeId");
instead
Ok apparently you can't nest forms in html/DOM. I have changed my asp.net provided form and now it navigates but crashes saying
Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that <machineKey> configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
Defect Severity Assessment Code List
</title></head>
<body>
<form name="form1" method="post" action="CodeAssessment.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
</div>
<div>
<p>Welcome Maslow</p><SCRIPT language="JavaScript">
function submitForm(intId)
{ oFormObject= document.forms[0];
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
oFormObject.submit();
}
</SCRIPT> <table name="codeId" id="codeId" value="0" type="hidden" class="linkTable">
<tr>
<th>Completed</th><th>Code</th><th>Description</th><th>Code Present Since</th>
</tr><tr class="row">
<td><input name="401" type="checkbox" value="401" DISABLED /></td>
<td>401</td><td>Missing Original Document/form</td><td>2009.10.16</td>
</tr><tr class="rowAlternate">
<td><input name="NDMI" type="checkbox" checked="checked" value="NDMI" DISABLED /></td>
<td>NDMI</td><td>Note date is missing</td><td>2009.10.15</td>
</tr>
</table><input id="testSubmit" type="submit" />
</div>
</form>
</body>
</html>
I don't see what the issue is now, the code you posted in your answer worked fine for me, only problem I have is that I dont have a CodeAssesment.aspx page so I get a HTML404 error, but thats it.
Your original code document.getElementById(""form"+_StrCodeId + #"""); was not valid, and you don't have a variable called StrCodeId,
Try
oFormObject = document.getElementById("form"+intId);
Ok solved the crashing, so I put another answer, its because you've copied the source code and used that to create the outline again, I think, as you shouldn't have the hidden input viewstate as part of the page, it gets generated automatically on build. Remove this line and try it
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjQzMTI3NjU4ZGSW2wNBW3eGztyO+Tftc5BB8A6cMg==" />
&lt/div>
I trimmed out my dynamic code generation section
<?xml version="1.0" encoding="UTF-8"?>
<!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><link rel="stylesheet" type="text/css" href="DefectSeverity.css" /><title>
Defect Severity Assessment Code List
</title><script type="text/javascript">
function submitForm(intId)
{ oFormObject= document.forms[0];
oFormElement= document.getElementById("codeId");
oFormElement.value=intId;
oFormObject.submit();
}
</script> </head>
<body>
<form name="form1" method="post" action="CodeAssessment.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzMxMzk5NjY5ZGTQg8pLRPHaRM4Idd6LyKDmFvMpNA==" />
</div>
<div>
<input type="submit" />
</div>
</form>
</body>
</html>
Hey look there's another div again. I don't see where this is coming from. and I'm still getting Validation of viewstate MAC failed. If this application is hosted by a Web Farm or cluster, ensure that configuration specifies the same validationKey and validation algorithm. AutoGenerate cannot be used in a cluster.

Resources