mercredi 7 décembre 2016

Showing specific inputs based on value

I am running into an issue that I am sure is a simple fix, I just cannot figure it out. I have multiple inputs that only show if filled out. Well after you proceed to the second section, the second select input group named, "answered-question" I wanting to check the value, so that if the value is "Yes", the next labeled input appears, else it skips the next label and goes to the label id "no-color". Since attempting to do this, none of the following inputs will display at all.

Does anyone see what I am doing wrong?

This is what I added:

if($('#answered-question').val('Yes')){
            $nextLabel.has(":input").addClass("show");
        } else {
            $(":input").removeClass("show");
            $("#all-color-question").addClass("show");
        }

Snippet

  $(".labelsGroup").each(function() {

    var $thatGroup = $(this);
    var $nextGroup = $thatGroup.next(".labelsGroup");
    var $inputs    = $thatGroup.find("input");
    var $proceed   = $thatGroup.find("button");

    $inputs.on("input", function(){
      var $nextLabel = $(this).closest("label").next("label");
      if($.trim(this.value).length > 3) {
        $nextLabel.has(":input").addClass("show");
      }
    });
        
        $('#has-color').on("change", function(){
                var $nextLabel = $(this).closest("label").next("label");
        if($('#has-color').val()){
            $nextLabel.has(":input").addClass("show");
        } else {
            $nextLabel.has(":input").removeClass("show");
        }
    });
        $('#answered-question').on("change", function(){
                var $nextLabel = $(this).closest("label").next("label");
        if($('#answered-question').val('Yes')){
            $nextLabel.has(":input").addClass("show");
        } else {
            $(":input").removeClass("show");
                        $("#all-color-question").addClass("show");
        }
    });
    $proceed.on("click", function(e){
                $("html, body").animate({ scrollTop: 0 }, 200);
                e.preventDefault();
      
      var allValid = $inputs.filter(function() { 
        return $.trim(this.value).length > 3;
      }).length === $inputs.length;
      // TODO: use a better validation plugin than the above

      if(allValid) { // Finally proceed!!
        $thatGroup.addClass("hide");
        $nextGroup.addClass("show");
        // TODO: Submit form using AJAX to a service
      } else {       // or Log error!!
        return alert("Please fill-in the missing fields!");
      }

    });

  });
.labelsGroup {
        text-align: center;
}
.labelsGroup label {
        display: block;
        margin: 50px 0;
        font-size: 1.4em;
}
.labelsGroup label input, .labelsGroup label select {
        background: #fff;
        padding: 15px 15px;
        border: 1px solid #999;
        width: 40%;
        font-size: 1.3em !important;
}
.labelsGroup input, .labelsGroup select {
        margin-top: 20px;
}
.proceed-button {
        background: #0085A1;
        color: #FFF;
        padding: 15px 20px;
        border: none;
        font-size: 1.2em;
        margin-top: 15px;
        cursor: pointer;
        webkit-transition: .7s ease;
        transition: .7s ease;
        display: inline-block;
        width: auto;
}
.proceed-button:hover {
        background: #005b6e;
        webkit-transition: .7s ease;
        transition: .7s ease;
}       
/* hide all but first label in parent */
/* hide all subsequent labelsParents */
.labelsGroup label + label,
.labelsGroup + .labelsGroup,
.hide {
        opacity: 0;
        visibility: hidden;
        position: absolute;
}
.show {
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        -webkit-transition: opacity 0.7s ease-in;
        transition: opacity 0.7s ease-in;
}
<script src="http://ift.tt/1qRgvOJ"></script>
<div class="labelsGroup">
                        <div class="container-intro">First, let's find out a little bit about you.</div>
                        <label>
                        What is your name?<br>
                                <input name="name" type="text"><!-- PS: use name="" instead of id=""-->
                        </label>
                        <label>
                        Phone Number<br>
                                <input name="phone-number" type="email">
                        </label>
                        <label>
                                <button class="proceed-button">PROCEED</button>
                        </label>
                </div>
                <div class="labelsGroup">
                        <div class="container-intro">Now let's go over existing information.</div>
                        <label>
                                Have a favorite color?<br>
                                <select name="color-question" id="has-color">
                                        <option value="" disabled selected>Please choose option</option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                </select>
                        </label>
                        <label>
                                Do you frequenly choose this color?<br>
                                <select name="answered-question">
                                        <option value="" disabled selected>Please choose option</option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                </select>
                        </label>
                        <label>
                                List your favorite color(s)<br>
                                <input name="color-select" type="text">
                        </label>
                        <label id="no-color">
                                Do you like all colors?<br>
                                <select name="all-color-question" id="all-color-question">
                                        <option value="" disabled selected>Please choose option</option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                </select>
                        </label>
                        <label>
                                <button class="proceed-button">PROCEED</button>
                        </label>
                </div>

Aucun commentaire:

Enregistrer un commentaire