Web Analytics Made Easy -
StatCounter info disappearing from fields generated by js - CodingForum

Announcement

Collapse
No announcement yet.

info disappearing from fields generated by js

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • info disappearing from fields generated by js

    I created a script that allows me to add another step (text field) to a form. However, when I fill out that field, and click the add another step button, the information that I put in the previous step disappears. Here is the working form : http://www.paintersfriend.com/recipe form.htm

    here is the code found in the .js file that is called out:

    Code:
    var stepnum = 0;
    
    function addIngredient() {
    var tdiv = document.getElementById("ingredients");
    tdiv.innerHTML =
    tdiv.innerHTML + "<div id='step"+stepnum+"'><input type='text' name='ingredient"+
    stepnum+"'><br>"+
    "<input onclick='return addIngredient()' type='button' "+
    "name='add"+stepnum+"' value='Add Ingredient'> "+
    "<input type='button' "+
    "onclick='return removeIngredient(\""+stepnum+"\")' "+
    "name='remove"+stepnum+"' value='remove'><br></div>";
    stepnum++;
    return true;
    }
    
    function removeIngredient(stepno) {
    if(stepnum == 0) return false;
    var tdiv = document.getElementById("step"+(stepno-0));
    tdiv.innerHTML = "";
    return true;
    }
    I am still a noob at this, so any expert advice would be greatly appreciated!

    Jason

  • #2
    Use the DOM... Stop using innerHTML

    I would start over from scratch and use the document object module methods to provide dynamic HTML.

    Try this out
    PHP Code:
    <html>
        <
    head>
            <
    title>Adding and removing form elements.</title>
        </
    head>
        <
    body>
            <
    h1>Ingredients</h1>
            <
    hr>
            <
    form>
            <
    div id="ingredients">
            </
    div>
            <
    hr>
            <
    input type="submit" value="Submit Ingredients">
            <
    input onclick="addIngredient()" type="button" value="Add Ingredient">
            </
    form>
            <
    script type="text/javascript">
                var 
    ingredients = new Array();
                var 
    container document.getElementById("ingredients");
                function 
    addIngredient(){
                    var 
    stuff document.createElement("span");
                    var 
    ing document.createElement("input");
                    
    ing.setAttribute("type","text");
                    
    ing.setAttribute("name","step"+(ingredients.length+1));
                    
    ing.style.width="220px";
                    
    stuff.appendChild(ing);
                    var 
    btn document.createElement("input");
                    
    btn.setAttribute("type","button");
                    
    btn.onclick=function(){
                        
    container.removeChild(stuff);
                        
    window.status "";
                        
    0;
                        for(var 
    0ingredients.length 1;i++){
                            if (
    ingredients[i] == stuff)j++;
                            
    ingredients[i]=ingredients[j];
                            
    ingredients[i].firstChild.setAttribute("name","step"+(i+1));
                            
    j++;
                        }
                        
    ingredients.length--;
                    }
                    
    btn.setAttribute("value"," X ");
                    
    btn.style.color "#ff0000";
                    
    btn.style.fontWeight="bold";
                    
    stuff.appendChild(btn);
                    
    stuff.appendChild(document.createElement("br"));
                    
    ingredients[ingredients.length] = stuff;
                    
    container.appendChild(stuff);
                    
    ing.focus();
                }
            </
    script>
        </
    body>
    </
    html

    Comment


    • #3
      thanks!

      That is what I was looking for....thank you very much!

      I suppose I have alot to read re: DOM

      Comment

      Working...
      X