Jump to content

paulmo

Members
  • Posts

    451
  • Joined

  • Last visited

Profile Information

  • Location
    Maine

Recent Profile Visitors

3,955 profile views

paulmo's Achievements

Member

Member (2/7)

3

Reputation

  1. Hi W3S, I've emailed personalized events using Mail Merge Google Sheets add-on, where you type recipient name, etc. in {{field name}} and message gets sent personalized like "Dear John", etc. But how do these messages get generated en masse? For example, I get personalized "Dear Paul" emails from various affiliate networks, sent to my YouTube business email account. So 1) how do the networks auto-harvest email addresses and 2) how are they personalizing the messages? Surely no-one is inputting data in a spreadsheet like I do when creating a Mail Merge doc. Thanks in advance for explanation.
  2. Thanks JSG for the lead that change(function() controls loading the file when file is clicked. How to integrate that with btn onclick function (handler) eludes me at this point but I'm going to try to get some help with that. Re: "get the file input by ID to get the list of files" -- the file input ID compImg to get a list of what files? dsonesuk, "reset file upload input and image src to "" sounds interesting. W3S example shows appending .reset() to form id. Whi ch function would I put that in? I understand checking inputs and description so not empty. What purpose would focus() have here? Right now the images do get cleared on page reload.
  3. Posting the updated script should help (minus getItem localStorage to element/container, that was just an exercise). It's all working great except the file upload needs to go in the container on btn submit (load), not as a full image on file select. Thanks in advance for helping. <body onload = "lsCheck() ;"> <form action="#" onsubmit="return false"> Upload image <input type="file" id="upld" value="Choose file"/> <img id="compImg" src="#" onClick="this.select();"/> or URL: <input type="text" name="image" id="idImage" value="" onClick="this.select();"/> <br><br> Description: <input type="text" name="des" id="idDes" value="" onClick="this.select();"/> <br><br> <input type="button" id="btn" name="submit" value="Load" /> <br><br> </form> <script> // checks localStorage function lsCheck() { lsData = []; if (localStorage.desSet) { //localStorage.removeItem(desSet.splice(0,15)); lsData = JSON.parse(localStorage.getItem("desSet")); //Map replace for loop var lsDataMap = lsData.map(function(mapResult) { return mapResult; }); console.log(lsDataMap); } var valDes = lsDataMap; //use lsData[i] in for loop } document.getElementById('btn').onclick = function() { //image on page var container = document.createElement("div"); container.className = "img_descrip_wrap"; var val = document.getElementById('idImage').value; //need value var img = document.createElement('img'); //img.src = val.src; doesn't work here src = val; img.src = src; container.appendChild(img); document.body.appendChild(container); img.onclick = function () { window.open(src); } //descriptions from form submit (below image) var valDes = document.getElementById("idDes").value; var des = document.createElement("p"); var tex = document.createTextNode(valDes); des.appendChild(tex); container.appendChild(des); document.body.appendChild(container); // append current descrip. value into array lsData.push(valDes); // set entire array to localStorage localStorage.setItem("desSet", JSON.stringify(lsData)); //remove: position, # of items. //lsData.splice(1,3); //remove entire key //localStorage.removeItem("desSet"); }; //close onclick function //File Upload $(function () { $(":file").change(function() { if(this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { compImg = document.getElementById("compImg"); //don't need .value $('#compImg').attr('src', e.target.result); }; </script>
  4. The image preview is actually working. I made the mistake of working from a closely-named copy file, while leaving the old file up in the browser, so I wasn't seeing changes. What's happening now is immediately after selecting file, it's rendered on the page. I need it so that it only renders when submit (load) button is clicked (like the other inputs), and compImg will get rendered nicely in the container img_descrip_wrap (it does do this with element created in imageIsLoaded, but only after subsequent file selections, current file selection is always outside the container). So do I create another document.getElementById('btn').onclick = function() {, after imageIsLoaded(e), calling imageIsLoaded(with or without e), somewhere in the onlick function? function imageIsLoaded(e) { compImg = document.getElementById("compImg"); //don't need value $('#compImg').attr('src', e.target.result); }; </script> Also, some general observations...in my onclick function that puts URL image on page, image does not render without .value here (dsonesuk?): var val = document.getElementById('idImage').value; whereas this does render, from imageIsLoaded(e) function: compImg = document.getElementById("compImg"); Also, in onlick function that puts URL image on page img.src = val.src doesn't work, but it does work in imageIsLoaded function var val = document.getElementById('idImage').value; //need value var img = document.createElement('img'); //img.src = val.src; doesn't work here src = val; img.src = src; container.appendChild(img); document.body.appendChild(container); Thanks for continued support.
  5. ok this is outside the btn onlick function now, still trying to figure out how to get file upload image on the page...you said take element etc. out of there but how else to get this on page or even troubleshoot where file is (or is not) going in dev console? Thanks. }; //close onclick function //File Upload $(function () { $(":file").change(function() { if(this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { var container = document.createElement("div"); container.className = "img_descrip_wrap"; compImg = document.getElementById("compImg"); var img = document.createElement('img'); src = compImg; img.src = src; $('#compImg').attr('src', e.target.result); container.appendChild(compImg); //tried src, img... document.body.appendChild(container); }; </script>
  6. Hi, you meant to shout img elements don't use a value attribute. Revised some things below. //nested in btn onclick function $(function () { $(":file").change(function() { if(this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { compImg = document.getElementById("compImg"); var count = 1; src = compImg; img.src = src; $('#compImg').attr('src', e.target.result); $('src').append( $(container)); //like this? return function() { //return to orig. state? count++; } }; }; //close onclick function Thanks for clarification, I see that now.
  7. Hi, what's wrong with this now? No image upload, no error, no file in Network console. Thanks. //inside main btn onclick function $(function () { $(":file").change(function() { if(this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { compImg = document.getElementById("compImg").value; containUp = document.createElement("div"); containUp.className = "img_descrip_wrap"; img = document.createElement('img'); src = compImg; img.src = src; $('compImg').attr('src', e.target.result); containUp.appendChild(src); document.body.appendChild(containUp); }; }; //close onclick function
  8. Can or should this for loop be translated to map, and if so how to define/access lsData values? function lsCheck() { lsData = []; if (localStorage.desSet) { lsData = JSON.parse(localStorage.getItem("desSet")); for (i = 0; i < lsData.length; i++) { var container = document.createElement("div"); container.className = "img_descrip_wrap_ls"; var valDes = lsData[i] .....etc........
  9. W3S, goal is to "upload" local image to display on page via JS. I've grabbed this JQuery script somewhere, can browse and select file, now how to integrate with onclick function (that's working with other text inputs)? Right now nothing's happening, no errors and no images in Network Monitor. <form action="#" onsubmit="return false"> Upload image <input type="file" id="upld" value="Choose file"/> <img id="compImg" src="#" onClick="this.select();"/> ..........etc........ // in button onclick function...v v var upldI = document.getElementById("upld").value; var compImgVar = document.getElementById("compImg").value; var img = document.createElement("img"); src = compImgVar; img.src = src; //File Upload $(function () { $(":file").change(function() { if(this.files && this.files[0]) { var reader = new FileReader(); reader.onload = imageIsLoaded; reader.readAsDataURL(this.files[0]); } }); }); function imageIsLoaded(e) { $('upldI').attr('src', e.target.result); }; container.appendChild(img); document.body.appendChild(container); };
  10. The text element is working as-is, sorry for the confusion, and thank you.
  11. Thank you so much, this is wonderful. I'm only able to print localStorage (lsData) values on the page with document.getElementById("description").innerHTML = JSON.stringify(lsData, null, " "); ...as opposed to dynamically created element/container from your example above. Any idea why?
  12. Hi, I'm having trouble understanding your post. Would you please explain it clearly as relates to my code, and what parts I'm missing?
  13. I've fixed the formatting of my last post, which indicates the problem I need help with, so I'm re-posting below. Thanks in advance for guidance: I've revised the first localStorage section for JSON (1st code section below). This is nested in main onclick function (from 1st post). localStorage is working, but is being overwritten on every form submit (2nd code section below). As mentioned, I want to have values stored in localStorage from multiple form submissions without overwriting previous values. (I can see that lsCheck is probably remaining an empty array, but I don't know how to transfer the localStorage JSON to an array). function localS() { var valDes = document.getElementById('idDes').value; localStorage.setItem("desSet", JSON.stringify(valDes)); var desP = document.createElement("p"); desP.value = localStorage.getItem("desSet"); var desJ = JSON.parse(desP.value); var desNode = document.createTextNode(desP.value); desP.appendChild(desNode); document.getElementById("description").appendChild(desP); } localS(); This following code appears above (not nested in) the main onclick function (from 1st post). What I'm trying to do is keep previous localStorage data so it's not overwritten on every form re-submit: <body onload = "lsCheck() ;"> ...........etc................ function lsCheck() { lsData = []; if (localStorage.getItem("desSet") != null) { localStorage.setItem("desSet", JSON.stringify(lsData)) }
×
×
  • Create New...