#1
  1. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,990
    Rep Power
    375

    Dynamic select box messes up the code


    Ok i have a "plus" icon which dynamically creates labels, text box and a select box.

    Before i was generating TWO text boxes and this seemed fine.

    what i want the code to create is:

    Code:
    <span>
      <label>
      <textbox>
    
       <label>
       <select>
       remove button
    </span>
    but for some reason it creates this: (Notice the closing span). This causes problem with removing this set of fields because the "remove button" cannot properly remove the parent and so removes the <div> (which i have placed to create dynamic generated form elements in)

    Code:
    <span>
    <label>Email* </label>
    <input name="friend_email[]" type="text"> 
    <label>Gender* </label>
    </span>
    <select id="select_1" name="friend_gender[]">
    <option value="">--Please Select--</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    </select> 
    <input class="remove_this button" value="-" type="button"><br>
    Code at the bottom


    Code:
    $("#add_more").click(function(){
                        var span = '<span>';
                        var span_end = '</span>';
                        
                        var field_label = '<label>Email* </label>';
                        var field_input = '<input type="text" name="friend_email[]" />';
                        
                        var field_label_2 = ' <label>Gender* </label>';
                        
                        var remove = ' <input class="remove_this button" type="button" value="-"/>'
                        
                        $("#additional_emails").append(span+field_label+field_input+field_label_2);
                        $("#additional_emails").append('<select id="select_'+id+'" name="friend_gender[]"></select>');
                        $("#additional_emails").append(remove+'<br/>'+span_end);
                        
                        
                        $("#select_"+id).append( $('<option></option>').val("").html("--Please Select--")   );
                        $("#select_"+id).append( $('<option></option>').val("male").html("Male")   );
                        $("#select_"+id).append( $('<option></option>').val("female").html("Female")   );
                        id++;
                    });
                    
                    $(".remove_this").live("click", function(){
                        $(this).parent().remove();
                    });
                });
  2. #2
  3. Did you steal it?
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,072
    Rep Power
    9398
    If you .append() HTML as a string then you have to do everything for each tag in one go. Meaning you can't have the opening tag in one call and the closing tag in another call. If you do then the browser, possibly jQuery, will fix your invalid HTML: you give only the opening tag so it automatically adds the end tag.

    Option A) Do the entire span in one string and one call to .append()
    Option B) Use actual elements instead of building up a large HTML string. Like create a real <span> element and add your label and textbox to it.

    Comments on this post

    • paulh1983 agrees : sorry for late reply, option B worked fine.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Dec 2004
    Posts
    2,990
    Rep Power
    375
    i will try option B and let you know as i was doing it all in one go (option a)and that wasnt working ... :s. thanks

IMN logo majestic logo threadwatch logo seochat tools logo