I'm trying to link to the following html page using
$.mobile.changePage( "myPage.html", { transition: "slide"} );
However, it's not working. The page will load however the alert box with the spinning cirlce and "loading" message never disappears and the page never fully loads in its css content. Can anybody see why based on the above call and the html below? Thanks
HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<link rel="stylesheet" href="./signup.css">
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
// Global declarations - assignments made in $(document).ready() below
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
</script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
<h1>Classroom Tempo</h1>
</div>
<div data-role="navbar">
<ul>
<li>Sign-In</li>
<li>Sign-Up</li>
</ul>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<form id="form1">
<div id="optionSliderDiv" data-role="fieldcontain">
<label for="optionSlider">How Many Options?</label>
<input type="range" name="optionSlider" id="optionSlider" value="2" min="2" max="25" data-highlight="true" />
</div>
<fieldset data-role="controlgroup">
<legend>Numbers or Letters?:</legend>
<input type="radio" name="numbersOrLetters" id="Numbers" value="Numbers" checked="checked" />
<label for="Numbers">Numbers</label>
<input type="radio" name="numbersOrLetters" id="Letters" value="Letters" />
<label for="Letters">Letters</label>
</fieldset>
<script>
$(document).ready(function() {
// Assign global variables
hdrMainVar = $('#hdrMain');
contentMainVar = $('#contentMain');
ftrMainVar = $('#ftrMain');
contentTransitionVar = $('#contentTransition');
sliderValue = $('#optionSlider');
surveyDescriptionVar = $('#SurveyDescription')
form1Var = $('#form1');
confirmationVar = $('#confirmation');
contentDialogVar = $('#contentDialog');
hdrConfirmationVar = $('#hdrConfirmation');
contentConfirmationVar = $('#contentConfirmation');
ftrConfirmationVar = $('#ftrConfirmation');
inputMapVar = $('input[name*="_r"]');
hideContentDialog();
hideContentTransition();
hideConfirmation();
});
$('#buttonOK').click(function() {
hideContentDialog();
//hidePasswordMisMatch();
showMain();
return false;
});
$('#form1').submit(function() {
var err = false;
var passwordError = false;
// Hide the Main content
hideMain();
console.log(sliderValue.val());
// If validation fails, show Dialog content
if(err == true){
console.log("we've got an issue");
showContentDialog();
return false;
}
$('input[name=OnOff]').each(function() {
onOffValue = $('input[name=OnOff]:checked').val();
})
$('input[name=numbersOrLetters]').each(function() {
numbersOrLetters = $('input[name=numbersOrLetters]:checked').val();
})
console.log(onOffValue);
console.log(numbersOrLetters);
// If validation passes, show Transition content
showContentTransition();
// Submit the form
$.post("http://url", form1Var.serialize(), function(data){
console.log(data);
hideContentTransition();
showConfirmation();
});
return false;
});
</script>
</div> <!-- page1 -->
<!-- Page ends here -->
</body>
</html>
The $.mobile.changePage API has undergone some changes from version 1.0 alpha 4 and 1.0.1 of jQuery Mobile. The syntax you are using with option object is of the newer version of jQuery Mobile (at least from 1.0.1).
Related
How can I make the user able to save his tasks in my to do list website and when I write something in the text box I can't see it until I hit add a task can anyone explain why this problem happened in my website
<body>
<div id="c"></div>
<div id="newtasks">
<input type="text" id="textInput" placeholder="Enter task" />
<button id="addTask">Add task</button><br />
<div id="main">
</div>
<div id="tasks"></div>
</div>
<script>
const main = document.querySelector("#main");
const inputText = document.querySelector("#textInput");
const taskBtn = document.querySelector("#addTask");
function addTask(taskData) {
const task = document.createTextNode(taskData);
main.appendChild(task);
main.appendChild(document.createElement("br"));
}
taskBtn.addEventListener("click", () => {
if (inputText.value == "") {
alert("please enter task!!");
} else {
addTask(inputText.value);
inputText.value = "";
}
});
</script>
</body>
[1]: https://i.stack.imgur.com/2Wdcw.png
Your code needs the button to be pressed to add an item to the list, if it was adding things sooner, the list would be showing a letter by letter basis wouldn't it?
Can you elaborate on the desired result?
const main = document.querySelector("#main");
const inputText = document.querySelector("#textInput");
const taskBtn = document.querySelector("#addTask");
function addTask(taskData) {
const task = document.createTextNode(taskData);
main.appendChild(task);
main.appendChild(document.createElement("br"));
}
taskBtn.addEventListener("click", () => {
if (inputText.value == "") {
alert("please enter task!!");
} else {
addTask(inputText.value);
inputText.value = "";
}
});
<html>
<head>
<meta charset="utf-8">
<meta name="Go from idea to action in seconds with to-do list">[enter image description
here][1]
<title> list to do</title>
<link rel="stylesheet" href="c.css" />
</head>
<body>
<div id="c"></div>
<div id="newtasks">
<input type="text" id="textInput" placeholder="Enter task" />
<button id="addTask">Add task</button><br />
<div id="main"></div>
<div id="tasks"></div>
</div>
</body>
</html>
[1]: https://i.stack.imgur.com/2Wdcw.png
In my Google Application Script web I am loading dynamically Google Doc as HTML. If I insert second HTML exactly the same way then it crashes the layout.
You can test it here
Test scenario 1
Load page
wait till see the text (file 1 is loaded)
go to the other tab and load file2
go back to the first tab and the layout is different (the error is not consistent in terms when and how it performs)
Test scenario 2
Load page
wait till see the text (file 1 is loaded)
load file 3
check the bottom of the page. New test appears and everything is ok
Test scenario 3
Load page
wait till see the text (file 1 is loaded)
load file 3
check the bottom of the page. New test appears and everything is ok
go to the other tab and load file2
go back to the first tab and the layout is different (the error is not consistent in terms when and how it performs)
Server side code looks like. NOTE that from file3 are removed <head> tags.
Could someone explain and hopefully suggest a solution to this issue?
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
function getGoogleDocumentAsHTML(file){
console.log(file)
if (file == 1){
var docID ="1vRMY6bIkUc_J6qDOUJszIYAtIWH-aHTdYYgCmlL4"
}
if (file == 2 || file == 3){
var docID ="1VBpazC3SO2hx4PA7r3A2jud5O9-teNu0nvvnIDac"
}
var forDriveScope = DriveApp.getStorageUsed(); //needed to get Drive Scope requested
var url = "https://docs.google.com/feeds/download/documents/export/Export?id="+docID+"&exportFormat=html&format=html";
var param = {
method : "get",
headers : {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
muteHttpExceptions:true,
};
var html = UrlFetchApp.fetch(url,param).getContentText()
// return cleanHTML(html)
if (file == 3 ){
return cleanHTML(html)
}
return html
//return HtmlService.createHtmlOutput(html).getContent()
}
function cleanHTML(html){
// nuke the whole head section, including the stylesheet and meta tag
html = html.replace(/<head>.*<\/head>/, '');
// remove almost all html attributes
// html = html.replace(/ (id|style|start|colspan|rowspan)="[^"]*"/g, '');
// html = html.replace(/ (id|class|style|start|colspan|rowspan)="[^"]*"/g, '');
// remove all of the spans, as well as the outer html and body
// html = html.replace(/<(span|\/span|body|\/body|html|\/html)>/g, '');
// clearly the superior way of denoting line breaks
// html = html.replace(/<br>/g, '<br />');
return html
}
and html part is here
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/materialize/tabulator_materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12">
<ul class="tabs" id="tabsTest">
<li class="tab col s3">HTML from file - loaded</li>
<li class="tab col s3">Second to be loaded</li>
</ul>
</div>
<div id="test1" class="col s12">
<button id ="testingAdmin" class="waves-effect btn" onClick="getHTML(2)">Load second HTML</button>
<div id="test" class="container col s12"> </div>
</div>
<div id="test2" class="col s12">
<button id ="testingAdmin" class="waves-effect btn" onClick="getHTML(3)">Load third HTML</button>
<div id="testovani" class="container col s12"></div>
<div id="test3" class="container col s12"> </div>
</div>
<script>
function getHTML(file){
google.script.run.withSuccessHandler(
function(output){
if (file == 1){
document.getElementById("testovani").innerHTML = output
}
if (file == 2){
document.getElementById("test").innerHTML = output
}
if (file == 3){
document.getElementById("test3").innerHTML = output
}
}
).getGoogleDocumentAsHTML(file);
}
document.addEventListener("DOMContentLoaded", function(event) {
var options ={}
var tabs = document.querySelectorAll('.tabs')
var tabsOptions = {
onShow : function(e) {
console.log(e.id)
switch (e.id){
case "test2":
console.log("testing")
break;
default:
}
}
}
var instance = M.Tabs.init(tabs, options);
getHTML(1)
});
</script>
</body>
</html>
I am trying to make a drop-down box (select), and get the options from a sheet, but I can't get it to work. Actually the problem is, that I have to wait for the script.run to finish, before I add to the select. I therefore moved the add, to the successhandler-function, but somehow it doesn't do anything. If I run it, as this I only get option 1 and 2.
My document look like this:
The server-side code looks like this, stripped down to nothing, just to make sure the miss isn't coming from here.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta dato="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<form action="/action_page.php" id="inputform">
<div class="input-field">
<input id="tekst" type="text" class="validate">
<label class="active" for="tekst">Tekst</label>
</div>
<div class="input-field">
<select name="Choose" id="Choose">
<option value="" selected disabled hidden> Choose</option>
</select>
</div>
</form><!--- end form
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
var instance = M.FormSelect.getInstance(elem);
});
var konto = "Choose";
var x = document.getElementById("Choose");
var option = document.createElement("option");
option.text = "Option 1";
x.add(option);
google.script.run.withSuccessHandler(fillOption).getOption();
var option = document.createElement("option");
option.text = "Option 2";
x.add(option);
function fillOption(){
var konto = "Choose";
var x = document.getElementById("Choose");
var option = document.createElement("option");
option.text = "Option 3";
x.add(option);
}
</script>
</body>
</html>
The serverside code looks like this, stripped down to nothing, just to make sure the miss isnt comming from here.
function onOpen() {
var template = HtmlService.createTemplateFromFile("userform");
var html = template.evaluate();
html.setTitle("Just testing select").setHeight(500).setWidth(700);
SpreadsheetApp.getUi().showModelessDialog(html, "testing");
}
function getOption() {
}
I have a spreadsheet at work that contains information on various different devices we use.
The spreadsheet contains information like the Original Equipment Manufacturer, Storage capacity, format, Etc. There are a total of 10 Columns, and up to 359 rows currently; but the spreadsheet will expand from general use.
I have created a sidebar application in google sheets using Aps script and HTML, in order to make requesting support for these objects simpler. I am running in to an issue with capturing the data typed into an input field. Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class = "Container"><!-- Begin CONTAINER div -->
<div class="row"><!-- Begin ROW div -->
<div class="col s24 "><!-- Beginning of Header div -->
<h5 class="col s24"offset-s3> Edit a Kit </h5>
<div><!-- Text input field for Kit search -->
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Enter Kit Name</label>
</div>
</div><!-- end of Text Input for Kit search -->
<!-- Start of Submit btn div -->
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="search" onclick ="submitData()">Search
<i class="material-icons right">search</i>
</button>
</div><!-- End of Submit btn div -->
<div class="divider"></div>
<div><!-- beginning of kit contents div -->
<!-- Users need to enter kit names into a text input field, similar to the create kit page -->
<h5 id = "kit" class = "section"></h5>
</div><!-- end of kit contents div -->
<div class="divider"></div>
<!-- Start of the HOME PAGE button Div -->
<div class="input-field col s12">
<button class="btn waves-effect waves-light" onclick="google.script.run.withSuccessHandler(changePage).newPage('Card Request Form')">Home
<i class="material-icons right">home</i>
</button>
</div><!-- end of the HOME PAGE button div -->
</div><!-- End of Header div --->
</div><!-- End of ROW Div -->
</div><!-- End of CONTAINER Div -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function changePage(page) {
document.write(page);
}
// function alertA() {
// alert("Your code Failed to Run");
// };
function alertB() {
alert("Success! Click 'OK' to see your results");
};
function submitData() {
var data = document.getElementById('search').value;
var outPut = document.getElementById('kit');
var display = outPut.innerHtml = "THIS IS WORKING AS EXPECTED";
// alert(display);
};
function outputCard(submitData) {
};
</script>
</body>
</html>
I am trying to access the input data from the "Submit btn div" using the function "submitData()", but have been unsuccessful in doing so. In the version i've uploaded, I am simply trying to capture that information, and print it back out to the "kit contents div" but have been unsuccessful.
For clarity, I am doing this in a Google Apps scripts, as a sidebar extension to a google sheets spreadsheet. The goal is to take that input, and parse over the information for all of the informaton referenced in the first Full paragraph; and then return any items relevantr to the users search terms in the "kit contents div". I am not able to capture the input in Google Apps script though. Here is a copy of my gs code:
//This function searches for cards by the value typed into the text input field
function cardSearch(data) {
var app = SpreadsheetApp;
var log = app.openById("My Spreadsheet's ID");
var kitContents = app.openById("My Spreadsheet's ID");
var cards = log.getRange("A3:J").getValues();
var kitType = kitContents.getRange("A3:J359").getValues();
for (i=0; i<kitType[data]; i++){
return kitType[data];
}
Logger.log(kitType[356])
// for some reason, the array literal ends at index #356, where as the spreadsheet is up to 359 rows, but stops at ID#354
};
function alert(data) {
return "received input " +data.display;
};
//This function loads the webpage content of the HTML file "Card Request Form" as a sidebar in the main spreadsheet
function showRequestForm() {
var form = HtmlService.createTemplateFromFile("Card Request Form");
var html = form.evaluate();
SpreadsheetApp.getUi().showSidebar(html);
};
//This function allows us to navigate pages that exists in the document
function newPage(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent()
};
I need help understanding how to cpature the input, and pass it back to the GS (I believe it's the same as passing it to the server) in order to run the cardSearch Function with that capturted data.
Here's an example form that I've used to collect receipt information. You can display it as a sidebar, a dialog or run it as a webapp. It has a numerical input, a text input and a textarea. It also allows you to upload a file.
thehtml.hmtl:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
google.script.run
.withSuccessHandler(function(rObj){
$('#dt').val(rObj.date);
})
.initForm();
});
function fileUploadJs(frmData) {
var amt=$('#amt').val();
var vndr=$('#vndr').val();
var img=$('#img').val();
if(!amt){
window.alert('No amount provided');
$('#amt').focus();
return;
}
if(!vndr) {
window.alert('No vendor provided');
$('#vndr').focus();
return;
}
if(!img) {
window.alert('No image chosen');
$('#img').focus();
}
document.getElementById('status').style.display ='inline';
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('status').innerHTML=hl;
})
.uploadTheForm(frmData)
}
console.log('My Code');
</script>
<style>
input,textarea{margin:5px 5px 5px 0;}
</style>
</head>
<body>
<h3 id="main-heading">Receipt Information</h3>
<div id="formDiv">
<form id="myForm">
<br /><input type="date" name="date" id="dt"/>
<br /><input type="number" name="amount" placeholder="Amount" id="amt" />
<br /><input type="text" name="vendor" placeholder="Vendor" id="vndr"/>
<br /><textarea name="notes" cols="40" rows="2" placeholder="NOTES"></textarea>
<br/>Receipt Image
<br /><input type="file" name="receipt" id="img" />
<br /><input type="button" value="Submit" onclick="fileUploadJs(this.parentNode)" />
</form>
</div>
<div id="status" style="display: none">
<!-- div will be filled with innerHTML after form submission. -->
Uploading. Please wait...
</div>
</body>
</html>
Codge.gs:
function onOpen() {
SpreadsheetApp.getUi().createMenu('Receipt Collection')
.addItem('Run as Dialog', 'showAsDialog')
.addItem('Run as Sidebar', 'showAsSidebar')
.addToUi();
var sh=SpreadsheetApp.getActive().getSheetByName("Sheet1");
sh.getRange(sh.getLastRow()+1,1).activate();
}
function uploadTheForm(theForm) {
var rObj={};
rObj['vendor']=theForm.vendor;
rObj['amount']=theForm.amount;
rObj['date']=theForm.date;
rObj['notes']=theForm.notes
var fileBlob=theForm.receipt;
var fldr = DriveApp.getFolderById(receiptImageFolderId);
rObj['file']=fldr.createFile(fileBlob);
rObj['filetype']=fileBlob.getContentType();
Logger.log(JSON.stringify(rObj));
var cObj=formatFileName(rObj);
Logger.log(JSON.stringify(cObj));
var ss=SpreadsheetApp.openById(SSID);
ss.getSheetByName('Sheet1').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
var html=Utilities.formatString('<br />FileName: %s',cObj.file.getName());
return html;
}
function formatFileName(rObj) {
if(rObj) {
Logger.log(JSON.stringify(rObj));
var mA=rObj.date.split('-');
var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
rObj.file.setName(name);
}else{
throw('Invalid or No File in formatFileName() upload.gs');
}
return rObj;
}
function doGet() {
var output=HtmlService.createHtmlOutputFromFile('receipts').setTitle('thehtml');
return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=360, initial-scale=1');
}
function showAsDialog() {
var ui=HtmlService.createHtmlOutputFromFile('thehtml');
SpreadsheetApp.getUi().showModelessDialog(ui, 'Receipts')
}
function showAsSidebar() {
var ui=HtmlService.createHtmlOutputFromFile('thehtml');
SpreadsheetApp.getUi().showSidebar(ui);
}
function initForm() {
var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd")
return {date:datestring};
}
globals.gs:
var receiptImageFolderId='upload file folder id';
var SSID='spreadsheet id';
I'm just little bit confused on my html code.
What I want just, when user click the circle image, it will call load / take picture and then assign the picture to the circle.
In my below code, it's only call the take picture function, the on change function (pictureselected) is not being called.
When it calls directly through "srcimagefile", all function are called correctly.
Please see my below code. Please advise, what did I miss ?
<html>
<head>
</head>
<body>
<form>
<div class="col-md-12 col-xs-12" align="center">
<div class="outter">
<input type="image" id="imagefile" src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="image-circle" onclick="takePicture()"/>
<input type="file" id="srcimagefile" onchange="pictureSelected()" />
</div>
</div>
<div class="group">
<input type="text"><span class="highlight"></span><span class="bar"></span>
<label>Username</label>
</div>
<div class="group">
<input type="password"><span class="highlight"></span><span class="bar"></span>
<label>Password</label>
</div>
<button type="button" class="button buttonBlue">Login
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
</button>
</form>
<link href="userlogincss.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="userloginjs.js"></script>
<script>
function takePicture() {
$("#srcimagefile").click();
}
function pictureSelected() {
fileSelectHandler();
}
// Create variables (in this scope) to hold the Jcrop API and image size
var jcrop_api, boundx, boundy;
function fileSelectHandler() {
// get selected file
var oFile = $('#srcimagefile')[0].files[0];
alert('Hello');
// hide all errors
$('.error').hide();
// check for image type (jpg and png are allowed)
var rFilter = /^(image\/jpeg|image\/png)$/i;
if (! rFilter.test(oFile.type)) {
$('.error').html('Please select a valid image file (jpg and png are allowed)').show();
return;
}
// check for file size
if (oFile.size > 250 * 1024) {
$('.error').html('You have selected too big file, please select a one smaller image file').show();
return;
}
// preview element
var oImage = document.getElementById('imagefile');
var oReader = new FileReader();
oReader.onload = function(e) {
// e.target.result contains the DataURL which we can use as a source of the image
oImage.src = e.target.result;
}
// read selected file as DataURL
oReader.readAsDataURL(oFile);
}
</script>
</body>
<html>
You are trying to call the function which will trigger on Change Event. Change your event to "onclick", then your code will execute as expected.
Check the below code change,
<input type="file" id="srcimagefile" onclick="pictureSelected()"
onclick="pictureSelected()"