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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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.