Results 1 to 2 of 2

Thread: textfield string to variable to use as src for img

  1. #1
    Join Date
    Dec 2011
    Thanked 0 Times in 0 Posts

    Default textfield string to variable to use as src for img

    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:

    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.

  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    function addInput(i){
    var nImg = document.getElementsByTagName('img');
    nImg[i].src = document.getElementById('icon' + [i + 1]).value;
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts