paulmo

April 20, 2017

ok thanks for that.

April 18, 2017

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.

April 14, 2017

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.

April 13, 2017

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>

April 13, 2017

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.

April 13, 2017

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>

April 12, 2017

18 hours ago, dsonesuk said:

IMG ELEMENTS DO USE A VALUE ATTRIBUTE

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

Quote

Also, you're never going to see a request in the network console because you're not sending the file over the network, everything is being done in the browser.

Thanks for clarification, I see that now.

April 11, 2017

4 minutes ago, Ingolme said:

Hello, If that code really is inside the button click handler (it is) you're not assigning an event to the file input until after the button is clicked. But the input is assigned the onclick() function just like the other inputs... Event listeners should generally be attached in the global scope. Need help seeing this (if it's not the onclick handler).

Do you know what each line of that code does? It seems that FileReader() function is retrieving the 1st value of array [0], in this case 1 file, and it's encoding the image in bytes with readAsDataURL, then the 2nd function applies source attribute and event handler (e), which I thought was the main onclick function, but from your reply it seems something's wrong here. Guidance appreciated, thanks.

April 11, 2017

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

April 11, 2017

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........

April 11, 2017

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);
        };

April 10, 2017

The text element is working as-is, sorry for the confusion, and thank you.

April 10, 2017

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?
	

April 9, 2017

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?

April 9, 2017

9 hours ago, dsonesuk said:
This does not make sense to me?

Hi, I wanted to see localStorage JSON values on my page, so that's why I did this. It works.
var desP = document.createElement("p"); 
                desP.value = localStorage.getItem("desSet"); 
                var desJ = JSON.parse(desP.value);
if desP is a paragraph, why do you add the localstorage to its value attribute? See above. Its a paragraph not an input, it does not use a value attribute.

What is
var desJ = JSON.parse(desP.value);
used for? I just followed a tutorial on storing/retrieving localStorage JSON object with stringify/parse.

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))
        }

April 8, 2017

			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))
        }

April 7, 2017

Thanks, researching options, I just installed Visual Studio Code and already enjoying auto-completion.

April 7, 2017

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

April 7, 2017

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

April 6, 2017

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.

April 6, 2017

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);

April 5, 2017

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);

April 5, 2017

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";

April 5, 2017

15 minutes ago, Ingolme said:

I don't see an issue on the example page you showed, what is it doing now and what did you expect it to do?

Hi, the captions need to be under (below) the images, as mentioned in first post. Thanks.

April 5, 2017

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>

Sign In

paulmo

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by paulmo

personalized mass e-mailings?

personalized mass e-mailings?

upload local file to page

upload local file to page

upload local file to page

upload local file to page

upload local file to page

upload local file to page

upload local file to page

set/get localStorage values from repeated form submits

upload local file to page

set/get localStorage values from repeated form submits

set/get localStorage values from repeated form submits

set/get localStorage values from repeated form submits

set/get localStorage values from repeated form submits

set/get localStorage values from repeated form submits

Form-submitted captions below form-submitted images

Form-submitted captions below form-submitted images

set/get localStorage values from repeated form submits

Form-submitted captions below form-submitted images

Form-submitted captions below form-submitted images

Form-submitted captions below form-submitted images

Form-submitted captions below form-submitted images

Form-submitted captions below form-submitted images

Form-submitted captions below form-submitted images

Browse

Activity