www.webdeveloper.com
Results 1 to 4 of 4

Thread: Dynamically adding new div by using jquery

  1. #1
    Join Date
    Apr 2014
    Posts
    8

    Unhappy Dynamically adding new div by using jquery

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    
        <div id="block1">
            <label style="float:left;">Age</label>
            <form style="float:left;">
                <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                </select>
            </form>
    
            <label style="float:left;">Name</label>
            <input type="text">
    
        </div>
    
        <div style="display:none;" id="block2">
            <label style="float:left;">Age</label>
            <form style="float:left;">
                <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                </select>
            </form>
    
            <label style="float:left;">Name</label>
            <input type="text">
            <span>Plus</span>
            <span>Remove</span>
        </div>
    
    
    
        <div>
            <input type="button" value="Add">
        </div>
    
    
    </body>
    </html>
    down vote favorite


    Please find the below js fiddle link.

    What I need is, First the user clicks on 'Add' button, then the 'block2' div need to be added to the HTML. After that if user clicks on 'Plus', again the same 'block2' need to be added and if he clicks on 'Remove', the whole 'block2' need to be removed. The main target is the user should be able to add any number of 'block2' divs by clicking on 'Plus' or he should be able to remove any 'block2' div by clicking on 'Remove'.

    http://jsfiddle.net/krbabuweb33/S34f7/2/
    Last edited by jedaisoul; 05-29-2014 at 09:15 AM. Reason: code tags added

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  3. #3
    Join Date
    May 2014
    Posts
    622
    Your HTML is gibberish -- you have LABEL and INPUT outside of forms, no block level containers like FIELDSET between your INPUT and their parent FORM...

    Until you can build a form properly using HTML and make the page work without scripting, you probably have no business playing the goofy scripting tricks you are asking about.

    For example:
    Code:
    <form action="#" method="post" id="testForm">
    
    	<fieldset>
    	
    		<label for="testForm_age">Age:</label>
    		<select id="testForm_age" name="age">
    			<option>1</option>
    			<option>2</option>
    			<option>3</option>
    			<option>4</option>
    			<option>5</option>
    			<option>6</option>
    		</select>
    		<br />
    		
    		<label for="testForm_name">Name:</label>
    		<select id="testForm_name" name="name">
    			<option>1</option>
    			<option>2</option>
    			<option>3</option>
    			<option>4</option>
    			<option>5</option>
    			<option>6</option>
    		</select>
    		
    	</fieldset>
                        
    	<div class="submitsAndHiddens">
    		<input type="submit" class="submit" value="Go" />
    	</div>
    	
    </form>
    Since I'd at least assume you want to submit those values at the same time?
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    Apr 2014
    Posts
    8
    I found the solution:


    jQuery(document).ready(function($) {
    $('#LM_MM_Plus_Icon').click(function(){
    $('#LM_MM_New_Div').append(
    $('#LM_MM_Plus_Icon_Block')
    .clone()
    .removeAttr('id')
    .show());
    });
    });

    $('#LM_MM_New_Div').on('click', '.LM_MM_Del_Icon', function() {
    $(this).closest('.LM_MM_Popup_Remove').remove();
    });

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles