How to set div dynamic control in jquery?

Question

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 8-Sep-14 4:34am

Renga.g

Add a Solution

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

2 solutions

Solution 1

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.

Posted 8-Sep-14 18:45pm

SRS(The Coder)

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.

Add a Solution

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

SRS(The Coder) · Accepted Answer · 2014-09-22T17:51:00

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.

How to set div dynamic control in jquery?

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

How to set div dynamic control in jquery?

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us