Jump to content

paulmo

Members
  • Posts

    451
  • Joined

  • Last visited

Everything posted by paulmo

  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)) }
  14. Hi, so I've revised the first localStorage section for JSON (first code section, that's nested in main onclick function from 1st post). That is working, but localStorage is still being overwritten on every form submit (second code section below). As mentioned I want to have values stored into localStorage from multiple form submissions without overwriting. (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). Thanks in advance for guidance. (Also why isn't my text here line wrapping? I even copy/pasted it out of here to delete line spaces etc., then pasted it back in here. Thx) 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 section v v v is above the main onclick function (in 1st post). <body onload = "lsCheck() ;"> ...........etc................ function lsCheck() { lsData = []; if (localStorage.getItem("desSet") != null) { localStorage.setItem("desSet", JSON.stringify(lsData)) }
  15. Thanks, researching options, I just installed Visual Studio Code and already enjoying auto-completion.
  16. gedit doesn't show much in the way of errors, I'm using Chrome(ium) developer console which shows everything. What's the preferred editor here? Thanks
  17. In the following script, I need to store values of desSet from repeated form submits, but they're getting over-written on every form submit, because localStorage section is nested in onclick section. Problem is I don't know how to access desSet values without being in the onclick function (because the click needs to happen to generate the value). How to keep every desSet value from form submits in localStorage? Also, the "description" element that desSet is in gets cleared on page refresh. How to keep that on the page? Thanks in advance for help. document.getElementById('btn').onclick = function() { ..................etc.............. function localS(){ var valDes = document.getElementById('idDes').value; localStorage.setItem("desSet", valDes); var desP = document.createElement("p"); var desNode = document.createTextNode(valDes); desP.appendChild(desNode); desP.value = localStorage.getItem("desSet"); document.getElementById("description").appendChild(desP); } localS(); }; // close onclick function
  18. Thanks so much! It's working great with your revision, and I'll play with the background color section. Question please: can commented sections /* */ and // interfere with code executing? Because code wasn't executing until I deleted those sections.
  19. Thanks, same behavior with these edits: document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, img.src = src; //document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px, 50px"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); var tex = document.createTextNode(valDes); des.style.display = 'inline-block'; des.style.top = '0px'; des.style.left = '0px'; des.style.height = "160px"; des.style.padding = "10px"; des.appendChild(tex); //also tried tex.appendChild(des); container.appendChild(img); container.appendChild(des); //container.appendChild(tex); also tried this document.body.appendChild(container);
  20. Updated code, same behavior. Thanks for guidance. document.getElementById('btn').onclick = function() { //image var container = document.createElement("div"); var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, img.src = src; img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px, 50px"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('p'); src = valDes, des.src = src; var tex = document.createTextNode(valDes); des.style.display = 'inline-block'; des.style.position = 'absolute'; des.style.top = '0px'; des.style.left = '0px'; //des.style.height = "150px"; //des.style.padding = "10px"; container.appendChild(img); container.appendChild(des); //also tried tex document.body.appendChild(container);
  21. Hi, so I've removed float property and wrapped the image and paragraph into an element together, but I wouldn't know how to wrap them in another element since they're both already rendered on the page, and document.createElement only accepts 1 parameter. Anyhow, my attempt is below. Thanks for any help. document.getElementById('btn').onclick = function() { //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, //must redefine img.src = src; var imgOut = document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; //img.style.float = "left"; img.style.margin = "0px, 50px"; //description var valDes = document.getElementById('idDes').value; var des = document.createElement('P'); //also tried 'CAPTION' per specs src = valDes, des.src = src; //valDes.body.appendChild(des); //error "is not a function" ?? //des.setAttribute('label', valDes); //des.setAttribute('style', 'width: 150px;'); //document.getElementById("description").appendChild(des); var tex = document.createTextNode(valDes); var texOut = description.appendChild(tex); var combine = document.createElement('imgOut'.'texOut'); //trying this idea...doesn't work. document.body.appendChild(combine); description.style.display = 'inline-block'; //description.style.position = 'absolute'; //des.style.float = 'left'; des.style.width = "150px"; des.style.height = "160px"; des.style.padding = "10px";
  22. Hi, the captions need to be under (below) the images, as mentioned in first post. Thanks.
  23. Hello, captions need to appear below each form-submitted URL image in tile fashion on the page. I'm trying various things here and it's not happening. Live example here. Thanks in advance to team W3. <!DOCTYPE html> <html> <head> <title>appendChild Gallery</title> <style> body { font-family: Sans-Serif; font-size: medium; padding: 20px; } caption: { caption-side: bottom; } </style> </head> <body> <form action="#"> 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> document.getElementById('btn').onclick = function() { //image var val = document.getElementById('idImage').value; var img = document.createElement('img'); src = val, img.src = src; document.body.appendChild(img); img.style.width = "150px"; img.style.height = "150px"; img.style.padding = "10px"; img.style.float = "left"; img.style.margin = "0px, 50px"; //description: this is the part that needs help. var valDes = document.getElementById('idDes').value; var des = document.createElement('P'); //also tried 'CAPTION' per specs src = valDes, des.src = src; //valDes.body.appendChild(des); //error "is not a function" ?? //des.setAttribute('label', valDes); //des.setAttribute('style', 'width: 150px;'); //document.getElementById("description").appendChild(des); var tex = document.createTextNode(valDes); description.appendChild(tex); description.style.display = 'inline-block'; //description.style.position = 'absolute'; des.style.float = 'left'; des.style.width = "150px"; des.style.height = "160px"; des.style.padding = "10px"; /* integrate localStorage localStorage.setImage('idDes', valDes); localStorage.setImage("idImage", val); imgStore = localStorage.getImage("idImage"); desStore = localStorage.getImage("idDes"); img1 = document.createElement('img1'); img1.src = imgStore; //stored image //desStore.src = desStore; document.body.appendChild(img1); document.getElementById('caption2').innerHTML = document.getElementById('desStore'); */ } </script> <p id="description"></p> </body> </html>
×
×
  • Create New...