javascript - add a new text field every time a button is pressed

i am trying to create a bit of javascript that will create a new text field every time a button is pressed, any help would be appreciated, it seems like the javascript doesn't want to run more than once

<!DOCTYPE html>
<html>
    <head>
        <title>Q&A Admin Panel</title>
    </head>
<body>
    <h1>Q&A Admin Panel</h1>
    <form action="add_question.php" method="post">
    Question Type: <input type="text" id="questionType" />
    Question Name: <input type="text" id="questionName" />
    Question Text: <input type="text" id="questionText" />
    <select id="myList" onchange="selectType()">
    <option>Yes or No</option>
    <option>Multiple Choice</option>  
    <option>Multiple Select</option>
    <option>Open Response</option>
    </select>
    <div id='buttons'> </div>
    </form>
    <script type="text/javascript">
    function selectType()
    {
    var type=document.getElementById("myList");
    if(type == "Multiple Choice" or type == "Multiple Select"){
    // add answer = visible
        }
    }
    </script>

    <script type="text/javascript">
    var answers = 0;
    function addAnswer()
    {
    write = document.getElementById('buttons');
    write.innerHTML = write.innerHMTL + "add answer: <input type=\"text\" id=\"answer" + answers + "\" <br>";
    answers = answers + 1;
    }
    </script>
    <button onclick="addAnswer(); return false;">add answer</button>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Q&A Admin Panel</title>
    </head>
<body>
    <h1>Q&A Admin Panel</h1>
    <form action="add_question.php" method="post">
    Question Type: <input type="text" id="questionType" />
    Question Name: <input type="text" id="questionName" />
    Question Text: <input type="text" id="questionText" />
    <select id="myList" onchange="selectType()">
    <option>Yes or No</option>
    <option>Multiple Choice</option>  
    <option>Multiple Select</option>
    <option>Open Response</option>
    </select>
    <div id='buttons'> </div>
    </form>
    <script type="text/javascript">
    function selectType()
    {
    var type=document.getElementById("myList");
    if(type == "Multiple Choice" or type == "Multiple Select"){
    // add answer = visible
        }
    }
    </script>

    <script type="text/javascript">
    var answers = 0;
    function addAnswer()
    {
    write = document.getElementById('buttons');
    write.innerHTML = write.innerHMTL + "add answer: <input type=\"text\" id=\"answer" + answers + "\" <br>";
    answers = answers + 1;
    }
    </script>
    <button onclick="addAnswer(); return false;">add answer</button>
</body>
</html>

Share Improve this question asked Jun 29, 2012 at 20:02 user1445218 1053 silver badges7 bronze badges

Have you thought of trying it in php? I can tell how it can be done in PHP if your ok with that. – DrinkJavaCodeJava Commented Jun 29, 2012 at 20:04
1 @redelman431 I don't think that a server side solution would be at all equivalent. – Pointy Commented Jun 29, 2012 at 20:05
Ok, i'll just move on to another question. – DrinkJavaCodeJava Commented Jun 29, 2012 at 20:06
You misspelled "innerHTML" :-) Also, declare "write" in that function with var! – Pointy Commented Jun 29, 2012 at 20:08

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

var answers = 0,
    write = document.getElementById('buttons');

function addAnswer() {
    write.innerHTML += 'Add answer: <input type="text" id="answer"' + answers + '/> <br />';
    answers++;
}

I faced the same problem in my college project. You can also acplish your work as David suggested, but using innerHTML doesn't add elements to DOM and as a result, when you'll refresh the page, text fields will disappear. So for getting persistent text fields, you can use the code mentioned below:

var i = 0;

function addMore()
{
   var x = document.getElementById('buttons');
   var input1 = document.createElement("input");
   input1.setAttribute("type","text");
   input1.setAttribute("name","i" + i );
   x.appendChild( input1 );
   i++;
}

You can use firebug for debugging javascript things. Thanks.

function addTextField(id){
    var colors = new Array('#660000','#33ff00','#0066ff','#cc3399','#9966ff');
    var container = document.getElementById(id);
    var ulElement = document.createElement('ul');
    container.appendChild(ulElement);
    var hideLink = function(){
        var firstElement = ulElement.firstChild.getElementsByTagName('a')[0];
            firstElement.style.display = (ulElement.childNodes.length==1)?'none':'inline';
        for(var i = 0 ; i <ulElement.childNodes.length; i++)
            ulElement.childNodes[i].style.color = colors[i%5];
    }
    var addListElement = function(){
        var liElement = document.createElement('li');
        ulElement.appendChild(liElement);
        var textElement = document.createElement('input');
        textElement.setAttribute('type','text');
        liElement.appendChild(textElement);

        var deleteLink = document.createElement('a');
        deleteLink.href = "#";
        deleteLink.appendChild(document.createTextNode('delete'));
        liElement.appendChild(deleteLink);
        deleteLink.onclick = function(){
            ulElement.removeChild(liElement);
            hideLink();
        }
        hideLink();
    }
    addListElement();
    var anchorElement = document.createElement('a');
    anchorElement.href = "#";
    anchorElement.appendChild(document.createTextNode('Add more'));
    container.appendChild(anchorElement);
    anchorElement.onclick = addListElement;
    hideLink();

}

Here is the Demo http://jsfiddle/mannejkumar/cjpS2/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - add a new text field every time a button is pressed - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)