How to add a text box on a button click?

Question

I am writing a JSP page where an admin can prepare the question format for the users. All the questions have multiple choices ranging from 2 (for yes or no) to 5. I want to provide a button for the admin which on click has to generate a text box corresponding to 1 answer. This button should also check that the answer boxes have not exceeded 5 as there can be no more than 5 multiple choices.

How can I go about this problem? How to stuff the JavaScript variable inside the innerHTML? I have done something like this:

function addAnswer(queryNum, ansCount){
    var d=document.getElementById("div");
    var i = queryNum;
    alert(i);   
    var j = ansCount;
    alert(j);   
    d.innerHTML+="<label class='optsurvey-answer' for='answer_'>Answer</label>"+"<input class='optsurvey-answerinput' type='text' name='<portlet:namespace />answer_'>";
}
</script>

Here queryNum and ansCount are params passed by JSP. I want to stuff them inside the d.innerHTML. Something like this

d.innerHTML+="<label class='optsurvey-answer' for='answer_'>Answer<HERE I HAVE TO STUFF "ansCOUNT" ></label>"+"<input class='optsurvey-answerinput' type='text' name='<portlet:namespace />answer_'>";

Answer 1

You are going to need to use JavaScript. You might want to start by reading up on JavaScript and DHTML. This would be a good place to start: http://www.devx.com/codemag/Article/15585

Answer 2

You need to get this working like below mentioned methods 1) Write a Javascript which displays the text box. When do we call the above javs script? ON click of the button call the JS and Show it to the user 2) on Action, send the values from the jsp to the servlets or Action class for processing.

I hope this is clear, else dont hesitate to put ur comments, will reply you

Answer 3

Like in Java you can concatenate strings in JavaScript using the + operator.

var foo = 'some JS string';
div.innerHTML += '<someElement>' + foo + '</someElement>';

To learn more about JavaScript, I recommend to go through this w3schools quick tutorial/reference. If you want to go a bit further, go through this advanced presentation/exercise of John Resig. If you want a genious and easy to-use JavaScript framework, have a look at jQuery. If you want to learn more about communication between Java/JSP and JavaScript, check this article.