Add or Removing

CoolAsCarlito · 05-04-2011, 11:18 PM

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 {
            
        }
    });

bullant · 05-05-2011, 11:46 AM

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>

CoolAsCarlito · 05-06-2011, 12:06 AM

Do you know a good jquery equivilent.

CoolAsCarlito · 05-06-2011, 12:30 AM

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();
            }
        }
        
    });

bullant · 05-06-2011, 10:35 AM

Quote:

Originally Posted by CoolAsCarlito

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.

SB65 · 05-06-2011, 08:22 PM

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
            }
        }
        
    });

CoolAsCarlito · 05-07-2011, 07:29 AM

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;    
         }
    });

CoolAsCarlito · 05-07-2011, 07:35 PM

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!"
            }
        });