Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Add or Removing

  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Add or Removing

    What is supposed to happen here is the first time the user selects a value from the dropdown it adds the amount of divs to the fieldset which it does but my issue is with the if statements if the user changes their selection. Its supposed to find the change in the dropdown and either subtract the difference or add more divs. Meaning if the user selects 3 the first time then it makes 3 divs. If the user changes their mind and selects 4 then it will ADD 1 to make 4 total divs or with 3 selected hte first time if the user selects 2 the secodn time then it REMOVES 1 to make 2 total. Not sure what I'm doing wrong because my coding is wrong for the if statements.

    Code:
    $('#numAnswers').change(function() {
            var numAnswers = $("select#numAnswers").val();
            for ( var answerNum = 0; answerNum < numAnswers; answerNum++) {
                $('<div class="field required answers"><label for="answer'+ (answerNum + 1) +'">Answer #'+ (answerNum + 1) +'</label><input type="text" class="text" name="answer'+ (answerNum + 1) +'" id="answer'+ (answerNum + 1) +'" title="Answer '+ (answerNum + 1) +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');    
            }
            var answerCount = $("fieldset.answerLeg div").size(); 
            if( answerCount < numAnswers ) { 
                var answersSubtracted = numAnswers - answerCount;
                alert(answersSubtracted);
                $("fieldset.answerLeg div:gt(answersSubtracted)").remove();
            }  else {
                
            }
        });

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Maybe use this demo without jquery as a guide.

    If the number of divs selected the second time is less than the current number shown then the divs no longer required are deleted from the end.

    Basically, last div added is first div deleted.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #fldDivsContainer {
                    width: 50%;
                    border: 1px solid red;
                    margin: 20px auto 0px auto;
                    padding: 20px 20px 20px 20px;
                }
                #fldDivsContainer div {
                    margin: 15px 0px 15px 0px;
                    padding: 10px 10px 10px 10px;
                    border: 1px solid blue;
                }
            </style>
            <script type="text/javascript">
                function displayDivs(obj){
                    if(obj.selectedIndex == 0){return;}
                    var curNumDivs =   oFldset.childNodes.length;
                    var extraDivs = obj.value - curNumDivs;
                    switch (extraDivs > 0){
                        case true:
                            for(i=0; i < extraDivs; i++){
                                var newDiv = document.createElement('div');
                                newDiv.appendChild(document.createTextNode('This is div '+(++curNumDivs)));
                                oFldset.appendChild(newDiv);
                            }
                            break;
                        case false:
                            for(i=-extraDivs; i > 0; i--){
                                oFldset.removeChild(oFldset.childNodes[oFldset.childNodes.length-1]);
                            }
                    }   
                }
                window.onload=function(){
                    oFldset = document.getElementById('fldDivsContainer');
                    document.getElementById('selNumDivs').onchange=function(){displayDivs(this);}
                }
            </script>
        </head>
        <body>
            <div>
                <select id="selNumDivs">
                    <option>Select number of divs</option>
                    <option value="0">0 Divs</option>
                    <option value="1">1 Div</option>
                    <option value="2">2 Divs</option>
                    <option value="3">3 Divs</option>
                    <option value="4">4 Divs</option>
                    <option value="5">5 Divs</option>
                </select>
            </div>
            <fieldset id="fldDivsContainer"></fieldset>
        </body>
    </html>
    Last edited by bullant; 05-05-2011 at 11:51 AM.

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Do you know a good jquery equivilent.

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    I came up with this and only the part works that adds the neccessary amount but the part that removes them does not.

    Code:
    $('#numAnswers').change(function() {
            var numAnswers = $("select#numAnswers").val();
            var answerCount = $("fieldset.answerLeg div").size();
             
            if (numAnswers > answerCount) {
                var numDiff = numAnswers - answerCount;
                for ( var answerNum = 0; answerNum < numDiff; answerNum++) {
                    $('<div class="field required answers"><label for="answer'+ (answerNum + 1) +'">Answer #'+ (answerNum + 1) +'</label><input type="text" class="text" name="answer'+ (answerNum + 1) +'" id="answer'+ (answerNum + 1) +'" title="Answer '+ (answerNum + 1) +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');    
                }
            }else {
                var numDiff = answerCount - answerNum
                for (var answerNum = 0; answerNum > numDiff; i--) {
                    $('.answers').remove();
                }
            }
            
        });

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by CoolAsCarlito View Post
    Do you know a good jquery equivilent.
    Why do you need to use jquery for something relatively straight forward?

    It was quicker for me to do it without jquery.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think your loop logic is wrong. Additionally

    Code:
    $('.answers').remove();
    is always going to remove all matched elements. Try:



    Code:
    $('#numAnswers').change(function() {
            var numAnswers = $("select#numAnswers").val();
            var answerCount = $("fieldset.answerLeg div").size();
            if (numAnswers > answerCount) {
                var numDiff = numAnswers - answerCount;
                for ( var answerNum = 0; answerNum < numDiff; answerNum++) {
                    $('<div class="field required answers"><label for="answer'+ (answerNum + 1) +'">Answer #'+ (answerNum + 1) +'</label><input type="text" class="text" name="answer'+ (answerNum + 1) +'" id="answer'+ (answerNum + 1) +'" title="Answer '+ (answerNum + 1) +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');    
                }
            }else {
                for (var i = answerCount; i > numAnswers; i--) {//start with the number of divs, proceed if it's bigger than the required number, decrement
                    $('.answers').last().remove();//remove the last div on each loop
                }
            }
            
        });

  • #7
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    I apologize for not having posted back quickly enough but i was able to get it.

    Here is the solution I went with the following code. However I'm trying to figure out how I can get this to validate with the jquery validation plugin. At the bottom of this post is what I was trying to use for validation and its giving me errors so I'm wondering what I'm doing wrong. All I know is the each function is wrong somehow.

    Code:
    $('#numAnswers').change(function() {
            var numAnswers = $("select#numAnswers").val();
            var answerCount = $("fieldset.answerLeg div").size();
             
            if (numAnswers > answerCount) {
                var numDiff = numAnswers - answerCount;
                for ( var answerNum = 0; answerNum < numDiff; answerNum++) {
                    var answerLabel = answerNum + answerCount + 1
                    $('<div class="field required answers"><label for="answer'+ answerLabel  +'">Answer #'+ answerLabel +'</label><input type="text" class="text" name="answer'+ answerLabel +'" id="answer'+ answerLabel +'" title="Answer '+ answerLabel +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');    
                }
            }else {
                var numDiff = answerCount - numAnswers;
                $('.answers').slice(-numDiff).remove();
            }
            
        });
    Code:
    $("#pollForm").validate({ 
            $("fieldset.answerLeg div.answers input.text").each(function(){
                rules: {
                        required: true
                },
                messages: {
                        "Please enter an answer for the poll!"
                }                   
            });  
            rules: {
                question: {
                    required: true
                },
                dateExpires: {
                    required: true
                },
                statusID: {
                    required: true
                },
                numAnswers: {
                    required: true
                }
            },
            messages: {
                question: "Please enter a question for the poll!",
                dateExpires: "Please enter the date the poll expires!",
                statusID: "Please enter the poll's status!",
                numAnswers: "Please enter how many answers for the poll!"
            },
            submitHandler: function(form) {
                var userID = $("input#userID").val();
                var question = $("input#question").val();
                var dateExpires = $("input#dateExpires").val();
                var statusID = $("select#statusID").val();
                var numAnswers = $("select#numAnswers").val();
                var dataString = 'userID=' + userID + '&question=' + question + '&dateExpires=' + dateExpires + '&statusID=' + statusID + '&numAnswers=' + numAnswers + '&submitPoll=True';
                $.ajax({
                    type: "POST",
                    url: "processes/polls.php",
                    data: dataString,
                    success: function(myNewVar) { 
                        if (myNewVar == 'good') {
                            $('div.message-error').hide();
                            $("div.message-success").html("<h6>Operation successful</h6><p>" + question + " was saved successfully.</p>");
                            $("div.message-success").show().delay(10000).hide("slow");
                            $(':input','#pollForm')
                            .not(':submit, :hidden')
                            .val('');   
                        } else {
                            $('div.message-success').hide();
                            $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + question + " already exists in the database.</p>");
                            $("div.message-error").show();    
                        }
                    }
                });
                return false;    
             }
        });

  • #8
    Regular Coder
    Join Date
    Jun 2008
    Posts
    682
    Thanks
    114
    Thanked 2 Times in 2 Posts
    I was told that the each needed to look like this but I"m still getting errors in the page itself.

    Code:
    $("fieldset.answerLeg div.answers input.text").rules('add', {
                required: true,
                messages: {
                    required: "Please enter an answer for the poll!"
                }
            });


  •  

    Posting Permissions

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