Click here to Skip to main content
15,906,463 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
Hi friends,

i need help urgent,

now i have div tags like A,B,C,D. inside have radio, textarea, dropdown,removelink(for remove div),for each div tag.

if click button(addoption) i need show E Div with all controls, if again i click the button, need to show F Div with all controls, so it will continued...until Z Div.

i try ready many websites, also many jquery. but its not working well.

kindly pls anyone share with me your suggestion and ideas. i need very urgent.

Thanks :)
renga
Posted
Comments
Dennis E White 8-Sep-14 10:41am    
do you have an example of where you are stuck??
jaideepsinh 8-Sep-14 10:44am    
Paste you tried code or explain clearly..
You can also do it by programmatically in code behind if you want then i put my code behind code here.
TryAndSucceed 8-Sep-14 12:21pm    
Sharing code is essential for anyone to help you.
Renga.g 22-Sep-14 1:27am    
<DIV id="Div_A">
<div>A : <input önClick="javascript:noCheck_A();" name="answer" type="radio" id="Radio_A" style="display: table-cell;padding:0px;margin:0px; vertical-align:middle">
<div style="display: table-cell;padding:0px;margin:10px;vertical-align:middle" class="rich-text-wrapper"> <textarea class="input-xxlarge">Answer A
</textarea></div></div><br>

<div id="Facet_A">Facet:
<select style="width:540px; margin-top:5px">
<option value="1">Select Facet</option>
<option value="2">01. The student determines distance ny adding two or more positions during the motion.</option>
<option value="3">02. The student does not distinguish position and/or distance from speed.</option>
<option value="4">03. The student views a position or speed graph as a map of the actual motion.</option>
</select>

</div>
</DIV><br><br>

<DIV ID="Div_B">
<div>B : <input önClick="javascript:noCheck_B();" name="answer" type="radio" id="Radio_B" style="display: table-cell;padding:0px;margin:0px; vertical-align:middle">
<div style="display: table-cell;padding:0px;margin:10px;vertical-align:middle" class="rich-text-wrapper"> <textarea class="input-xxlarge">Answer B
</textarea></div></div><br>
<DIV id="Facet_B">Facet:
<select style="width:540px; margin-top:5px">
<option value="1">Select Facet</option>
<option value="2">01. The student determines distance ny adding two or more positions during the motion.</option>
<option value="3">02. The student does not distinguish position and/or distance from speed.</option>
<option value="4">03. The student views a position or speed graph as a map of the actual motion.</option>
</select>

</DIV>
</DIV>

<div><button class="btn add-answer" type="button" id="btn_addoption">Add Option</button></div>

above is my code, now i have radio, dropdown, select in each div.

if i click button i need to show, those control with div, dynamically, like A,B,C,D,......

so for i feel very confuse part is create textarea.

pls share with me your ideas
thanks

Hi Renga.g,

Here is a sample i have created using your html design :-

I have taken only one div for example and 'Add Option' button can add more divs with next letter.

ASP.NET
<form id="form1" runat="server">
        <div id="Div_B">
            <div>B : <input onclick="javascript:noCheck_B();" name="answer" type="radio" id="Radio_B" style="display: table-cell;padding:0px;margin:0px; vertical-align:middle" />
            <div style="display: table-cell;padding:0px;margin:10px;vertical-align:middle" class="rich-text-wrapper"> <textarea class="input-xxlarge">Answer B
            </textarea></div></div><br />
            <div id="Facet_B">Facet:
            <select style="width:540px; margin-top:5px">
            <option value="1">Select Facet</option>
            <option value="2">01. The student determines distance ny adding two or more positions during the motion.</option>
            <option value="3">02. The student does not distinguish position and/or distance from speed.</option>
            <option value="4">03. The student views a position or speed graph as a map of the actual motion.</option>
            </select> 

            </div>
        </div>
        <input id="btnClone" type="button" value="Add Option" />
    </form>


Here is the Javascript code to add the new div on click of 'Add Option' button.
Ex :-

JavaScript
$(function () {
            // 'btnClone' is the button to make clone of the last div
            $('#btnClone').click(function () {
                // get all divs with id having text 'Div_'
                var allDivs = $(document).find("div[id*='Div_']");
                // get the id of last div from the array of all divs
                var lastDivID = allDivs.last()[0].id;
                // get the the letter in div like A/B/C
                var currentLetterCode = lastDivID.split('_')[1];
                // get the char code for the letter in last div id
                var c = currentLetterCode.charCodeAt(0);
                // create the clone with new id with next letter just before the button of 'Add Option'
                $('#' + lastDivID).clone().attr("id", "Div_" + String.fromCharCode(++c)).insertBefore($('#btnClone'));
            });
        });


Hope this will definitely of help.
 
Share this answer
 
Comments
Renga.g 23-Sep-14 21:23pm    
thankyou very much :)
SRS(The Coder) 24-Sep-14 0:11am    
You are wel come dear.
Hi Renga,

There is a clone method to create another clone for the particular div you want like below :-

$('#divTest').clone().insertBefore($('#btnText '));

It will create a clone for the 'divTest' and insert at the respective place i want like it will add the clone before the 'btnText' input type button.

Now you can change the id of the newly created div as below :-

$('#divTest').clone().attr("id","theid").insertBefore($('#btnText '));

Reference:-
https://forum.jquery.com/topic/is-it-possible-to-set-id-to-dynamically-created-div[^]

Hope this will definitely of help to you.
 
Share this answer
 
Comments
Renga.g 22-Sep-14 1:24am    
hi, thanks !!!!

pls find below my code


<DIV id="Div_A">
<div>A : <input önClick="javascript:noCheck_A();" name="answer" type="radio" id="Radio_A" style="display: table-cell;padding:0px;margin:0px; vertical-align:middle">
<div style="display: table-cell;padding:0px;margin:10px;vertical-align:middle" class="rich-text-wrapper"> <textarea class="input-xxlarge">Answer A
</textarea></div></div><br>

<div id="Facet_A">Facet:
<select style="width:540px; margin-top:5px">
<option value="1">Select Facet</option>
<option value="2">01. The student determines distance ny adding two or more positions during the motion.</option>
<option value="3">02. The student does not distinguish position and/or distance from speed.</option>
<option value="4">03. The student views a position or speed graph as a map of the actual motion.</option>
</select>

</div>
</DIV><br><br>

<DIV ID="Div_B">
<div>B : <input önClick="javascript:noCheck_B();" name="answer" type="radio" id="Radio_B" style="display: table-cell;padding:0px;margin:0px; vertical-align:middle">
<div style="display: table-cell;padding:0px;margin:10px;vertical-align:middle" class="rich-text-wrapper"> <textarea class="input-xxlarge">Answer B
</textarea></div></div><br>
<DIV id="Facet_B">Facet:
<select style="width:540px; margin-top:5px">
<option value="1">Select Facet</option>
<option value="2">01. The student determines distance ny adding two or more positions during the motion.</option>
<option value="3">02. The student does not distinguish position and/or distance from speed.</option>
<option value="4">03. The student views a position or speed graph as a map of the actual motion.</option>
</select>

</DIV>
</DIV>

so inside div i have radio, textarea, select.

now i want to create those control with div dynamically,

if i click addoption(button) means need to show after C,D,E,F.

im very confuse to create the textarea part.

pls help me to solve.

thanks
SRS(The Coder) 22-Sep-14 23:57pm    
Please see the cod example i have added next.

The next character we got can be used for various options to set later as well.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900