View Full Version : textfield string to variable to use as src for img

07-25-2012, 08:24 PM
I'm trying to build an entry form that takes 2 string input textfields and assigns the input to 2 variables upon submit.

I haven't even started with the php, I'm trying to design the front end then refresh the page with the updated info.

It should be simple I don't know why I can't figure it out:

//Search for all the divs on the page
var mydivs = document.getElementsByTagName('div');
var divlen = mydivs.length;

function populate(){
//For each div, edit it's innerhtml
for (var i=0;i<divlen;i++) {
mydivs[i].innerHTML = "Rental #"+(i+1)+'<img src="adIcon'+(i+1)+'.png" id="img'+(i+1)+'" border=0 width=75 height=75>' + '<form name="form"><label for="icon'+(i+1)+'">Icon URL:'+"\t\t"+'</label><input type="text" id="icon'+(i+1)+'" name="iconName'+(i+1)+'" value="" /><br /><label for="url'+(i+1)+'">Webpage URL: </label><input type="text" id="url'+(i+1)+'" /><br /><input type="button" onclick="addInput('+i+');" name="add" value="Submit" /></form>';
mydivs[i].className ='show';
function addInput(i){
var nImg = document.getElementsByTagName('img');
nImg[i].src = "iconName'+(i+1)+'"; //heres where I'm struggling, how to access the value in the textfield??


I tried to break it up where it's all concatenated together but it breaks it so it's hard to read. See the link below for a clear example.

Basically I'm going to have a fixed number of objects, placeholders for a product.

Each object will have a div, with an image, and 2 input fields to enter a string. String #1 is a url to the source of an icon image. String #2 is the url to open when the image is clicked.

For now, it shows a default graphic, when they hit submit I want to swap the img source for the icon url source they enter in the textfield, I want it to update the image so they can verify it worked, and probably click the image to load the url to see if that worked.

Eventually I'll need to save the two urls for that object on the server, because another website will reference these objects and update it's sources with the 2 urls entered here, this is just the backend so I can easily swap sources for an existing framework.

You can see very clearly what I'm trying to do here: http://simplehotkey.com/adverts/ads.html

I need to store the value of the string entered into the textfield as a variable I can swap into the source of an image.

Any ideas? Thanks.

07-26-2012, 01:47 AM
function addInput(i){
var nImg = document.getElementsByTagName('img');
nImg[i].src = document.getElementById('icon' + [i + 1]).value;