Skip to content

Instantly share code, notes, and snippets.

@Shadey
Last active August 29, 2015 14:25
Show Gist options
  • Save Shadey/a5d04f1eb3e79313f5ed to your computer and use it in GitHub Desktop.
Save Shadey/a5d04f1eb3e79313f5ed to your computer and use it in GitHub Desktop.
<div class="firmware-form">
<select data-id="0" name="five"><option value="OLD">OLD</option><option value="NEW">NEW</option></select>
<select data-id="1" name="zero"><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select>.
<select data-id="2" name="one"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select>.
<select data-id="3" name="two"><option value="0">0</option></select>-
<select data-id="4" name="three"><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option></select>
<select data-id="5" name="four"><option value="E">E</option><option value="U">U</option><option value="J">J</option></select>
<button id="submit-button">Submit</button>
</div>
<div id="qr_code"></div>
/* This all should work clientside with no changes to the whatever backend code. However this requires a few small changes to the html
Change the form "firmware-form" to a div. This shouldn't change anything in your css. Next remove the "submit" type from the button and give it a id of "submit-button".
Lastly you just need a div with the id "qr_code" where you want the qr code to appear and it should work. Lastly this method only works in modern browsers.Tested in Firefox 39
Example of it working here: http://a.pomf.cat/tzdeij.webm */
var getQrCode = function(){
sendData = new Object();
sendData.zero = document.getElementsByName("zero")[0].value;
sendData.one = document.getElementsByName("one")[0].value;
sendData.two = document.getElementsByName("two")[0].value;
sendData.three = document.getElementsByName("three")[0].value;
sendData.four = document.getElementsByName("four")[0].value;
sendData.five = document.getElementsByName("five")[0].value;
var XHR = new XMLHttpRequest();
var FD = new FormData();
for(name in sendData){
FD.append(name,sendData[name])
}
XHR.open("POST","qr_code.png");
XHR.responseType = "blob"
XHR.onload = function(e){
if(this.status === 200){
var blob = this.response;
var img = document.createElement('img');
img.onload = function(e){
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.getElementById("qr_code").appendChild(img);
}
};
XHR.send(FD)
};
window.onload = function(){
document.getElementById("submit-button").onclick = getQrCode;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment