0

I am trying to create an mcq question by using this code

<div data-role="content">
        <form name="newdocument">

            <div id="questions" data-role="fieldcontain"><input type="text" value="dsa"/></div>
            <input type="button" value="Add Question" onclick="AddQuestion();" />

        </form>
    </div>

the text box with value of dsa is working fine with the jquery using fieldcontain. but when i press the button to add question using code below

<script type="text/javascript">
                var questionNum = 1;//question number
                //function to add question

                function AddQuestion(){
                    document.getElementById('questions').innerHTML+=

                    "<div id='question"+questionNum+"'>"+
                    "<div data-role='fieldcontain'>"+
                    "Q"+questionNum+"."+
                    "<input type='text' id='questionText"+questionNum+"' placeholder='Put your question here' data-mini='true'/>"+
                    "<input type='button' id='"+questionNum+"' name='1' value='Add Option' onclick='AddOption(this);' />"+
                    "<div id='optionList"+questionNum+"'"+
                    "</br>"+
                    "<input type='radio' id='question"+questionNum+"option0' name='radio' onclick='DisableCheck(this);' />"+
                    "<input type='text' id='question"+questionNum+"option0text' placeholder='Option 1' data-mini='true' />"+
                    "</br>" +
                    "</div>" + 
                    "</div>" +
                    "</br>";
                    questionNum++;
                }

                function AddOption(element){
                    var buttonName = element.getAttribute("name");//define unique question
                    var buttonId = element.getAttribute("id");//define unique choice
                    //ex: id=question1option1 for question 1 choice A 
                    if(buttonName<5){
                        buttonName++;
                        document.getElementById('optionList'+buttonId).innerHTML+=
                        "<input type='radio' id='question"+buttonId+"option"+buttonName+"' name='radio' onclick='DisableCheck(this);' />"+
                        "<input type='text' id='question"+buttonId+"option"+buttonName+"text' placeholder='Option "+buttonName+"' data-mini='true'/>"+
                        "</br>";
                        element.name = buttonName;
                    } else {
                        buttonName = 1;
                        document.getElementById('optionList'+buttonId).innerHTML=
                        "<input type='radio' id='question"+buttonId+"option"+buttonName+"' name='radio' onclick='DisableCheck(this);' />"+
                        "<input type='text' id='question"+buttonId+"option"+buttonName+"text' placeholder='Option "+buttonName+"' data-mini='true'/>"+
                        "</br>";
                        element.name = buttonName;
                    }

                }

                function DisableCheck(element){
                    element.checked = false;
                }

    </script>

the textbox that is created by addquestion function is not the same with the textbox that is created on the form. can somebody tell me why it doesn't work?

user2779065
  • 175
  • 1
  • 2
  • 15
  • You shouldn't use only a number for an ID, though HTML5 does permit it. See the answer [here](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) for info on IDs. What do you mean by "not the same with the textbox that is created on the form?" – Matthew Johnson Nov 13 '13 at 15:57
  • Try changing `function AddQuestion()` to `AddQuestion = function()`. It should work then. See my [jsfiddle](http://jsfiddle.net/Xv3Xq/1/) – James Nov 13 '13 at 16:00
  • I'm not sure of the overall goal, but your fiddle clears any input in the text boxes once you click "Add Question". – Matthew Johnson Nov 13 '13 at 16:03
  • @matthewJohnson yea i've just realized that the "addquestion" button will clear the textboxes which is shouldn't be. Thanks to check it for me – user2779065 Nov 13 '13 at 16:30
  • actually i want to create textbox which is like this link http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-text.html. by using javascript. in the html it works but in the javascript function it doesn't work – user2779065 Nov 13 '13 at 16:31

0 Answers0