bugs in javascript [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

Want to improve this question? Guide the asker to update the question so it focuses on a single, specific problem. Narrowing the question will help others answer the question concisely. You may edit the question if you feel you can improve it yourself. If edited, the question will be reviewed and might be reopened.

Closed 7 months ago.

Improve this question

A couple of unexpected bugs here that I can't figure out.

Clicking the '+' button works all the time except when you '-' all the cloned divs away until there is one left.. then the '+' button no longer works.
When the div is cloned, it is supposed to clear the checkboxes and radio buttons.. but it doesn't. It DOES clear the text fields and the select.

General code help always welcome! Thanks...

    <div class="cloned" id="div1">

    <input type="text" id="_name" name="1_name" placeholder="Field Name" required>
    <input type="text" id="_hint" name="1_hint" placeholder="Hint">

    <select id="_fieldtype" name="1_fieldtype" required>
    <option value="">Field Type...</option>
    <option value="bla">bla</option>
    <option value="blabla">blabla</option>
    </select>

    <input type="checkbox" id="_required" name="1_required" value="true"> Required
    <input type="checkbox" id="_search" name="1_search" value="true"> Searchable
    <input type="checkbox" id="_editable" name="1_editable" value="true"> Editable
    <input type="radio" id="_label" name="label" value="1_label"> Label
    <input type="radio" id="_unique" name="unique" value="1_unique"> Unique
    <input type="button" class="add" value="+">
    <input type="button" class="remove" value="-">

    </div>


    <script>

    function addDiv(){
        window.num = $('.cloned').length;
        var num = $('.cloned').length;
        var newnum = num + 1;
        var newelem = $('#div'+num).clone().attr('id','div'+newnum);
        $.each(newelem.children(), function(){
            if (this.type == 'radio'){
                $(this).attr('value',newnum+this.id).removeAttr('checked')
            }
            else if (this.type == 'button'){
                $(this).removeAttr('checked')
            }
            else if (this.type != 'button'){
                $(this).attr('name',newnum+this.id).attr('value','')
            }
        });
        $('#div'+num).after(newelem);

    };

    function removeDiv(object){
        window.num = $('.cloned').length;
        if (num != 1)
            $(object.parentNode).remove();

    };

    $('.add').live('click', function(){
        addDiv();
    });

    $('.remove').live('click', function(){
        removeDiv(this);
    });

    </script>

Here's a JSFiddle I made for this. By the way, it looks like the +/- actually works fine. When you delete all the clones, it still makes new ones. (On Chrome 13) — sdleihssirhc
– sdleihssirhc, Commented Aug 19, 2011 at 6:14
hey that's cool.. didn't know about JSFiddle. However, try this to break it. Add a bunch of divs.. then use the first '-' button to remove them all. Then you will find the remaining '+' no longer works. Weird, no?? — MFB
– MFB, Commented Aug 19, 2011 at 6:17
I think this is one of those ones that needs to be rewritten from scratch and structured properly. — John Green
– John Green, Commented Aug 19, 2011 at 6:18

Baz1nga · Accepted Answer · 2011-08-19 06:51:06Z

for your second problem you have the button repeated change the code to

else if (this.type == 'checkbox' || this.type == 'radio'){
                $(this).removeAttr('checked')
            }

the problem of removing the divs is that when you remove the first div and try to clone a new one you are still looking for the first div i.e div with id div1 to clone and it cant be found.. this is cos of yo ur weird handling of numbers.. instead just hold a hidden copy of the div always and use the same hidden div to clone it and you odnt have to worry about clearing the contents, checkbox etc. cos it will be in the default state..

thus you will have

<div style="display:none" id="masterDiv">

    <input type="text" id="_name" name="1_name" placeholder="Field Name" required>
    <input type="text" id="_hint" name="1_hint" placeholder="Hint">

    <select id="_fieldtype" name="1_fieldtype" required>
    <option value="">Field Type...</option>
    <option value="bla">bla</option>
    <option value="blabla">blabla</option>
    </select>

    <input type="checkbox" id="_required" name="1_required" value="true"> Required
    <input type="checkbox" id="_search" name="1_search" value="true"> Searchable
    <input type="checkbox" id="_editable" name="1_editable" value="true"> Editable
    <input type="radio" id="_label" name="label" value="1_label"> Label
    <input type="radio" id="_unique" name="unique" value="1_unique"> Unique
    <input type="button" class="add" value="+">
    <input type="button" class="remove" value="-">

    </div>

and always clone that.

one more thing in general avoid global variables as much as possible.. You never know what might end up changing it..

John Green · Accepted Answer · 2011-08-19 08:44:58Z

0

Really, you should separate your model from your view. Not only should you not have to do any of those checks, the fact that you're doing them means that your structure could be improved.

See the fiddle: http://jsfiddle.net/cnJa9/3/

edited Aug 19, 2011 at 8:44

answered Aug 19, 2011 at 6:36

John Green

13.5k3 gold badges31 silver badges52 bronze badges

2 Comments

John Green Over a year ago

Actually, I left some console statements in there. I updated the fiddle location above (v3 instead of v2).

John Green Over a year ago

Awesome. That's why I take the time to not just answer questions, but to try to add meaning to the answers. Some folks definitely don't appreciate that. : )

Collectives™ on Stack Overflow

bugs in javascript [closed]

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related