CODEWITHSUNDEEP
javascriptjqueryhtml
Pontus Svedberg
Pontus Svedberg

Reputation: 305

jQuery: Check value of each visible textbox

Ok, so finding a good title for this question is probably harder than the question itself.

I have created a error handler on a page I have when posting to the database. It checks if the input boxes are empty and doesn't run my AJAX code that would post the form, and instead says error. Looks like this.

$(document).ready(function () {
    $(".AddBtn").click(function () {
        if ($("input[name=Kg]").val() != "" &&
            $("input[name=Sett]").val() != "" &&
            $("input[name=Rep]").val() != "" &&
            $("input[name=Date]").val() != "")
        {
            mySubmit($(this)) // Calls AJAX function and posts.
        }
        else
        {
            $("#errorFieldReqMsg").fadeIn('slow');
                setTimeout(function () { $("#errorFieldReqMsg").fadeOut('slow'); }, 2000);
        }
    });
});

So this code checks for 4 of my input boxes, however, on a specific radiobutton click, one more input box will appear, and what I'm wondering if there is a neat solution to check that fifth input as well when that radio is clicked.

Check this fiddle out for a better understanding on what I mean, I'm refering to the radiobutton Secondary that makes the input box Daily Max appear.

And the code for that specific radio is the following:

<div class="exerciseTypeDiv">
    <input type="radio" name="Type" id="typ4" value="4" class="radioSelectLeft">
    <label class="radioLabel" for="typ4">Primary</label>
    <input type="radio" name="Type" id="typ5" value="5" class="radioSelect" />
    <label class="radioLabel" for="typ5">Secondary</label>
    <input type="radio" name="Type" id="typ6" value="6" class="radioSelect" />
    <label class="radioLabel" for="typ6">Assistance</label>
</div>


$(function() {
            $("input[type='radio']").change(function() {
                if ($(this).val() == 1  && this.checked) {
                    $("#exerVariNameS").show();
                    $("#exerVariNameB").hide();
                    $("#exerVariNameD").hide();
                    $("#exerVariNameA").hide();
                } else if ($(this).val() == 2  && this.checked){
                    $("#exerVariNameS").hide();
                    $("#exerVariNameB").show();
                    $("#exerVariNameD").hide();
                    $("#exerVariNameA").hide();
                } else if ($(this).val() == 3  && this.checked) {
                    $("#exerVariNameS").hide();
                    $("#exerVariNameB").hide();
                    $("#exerVariNameD").show();
                    $("#exerVariNameA").hide();
                }
            });

            $("input[name='Type']").click(function(){
            		var value=$(this).val();
                switch(value){
                	case '4':
                  	$("input[name='Exercise']").each(function(){
                    	$(this).closest('div').show();
                    });
                    $('#dropdown').hide();
                    $('#exerVariNameA').hide();
                    $("#dailyPR").hide();
                    $(".movementTypeDiv").show();
                    break;
                    case '5':
                        $("input[name='Exercise']").each(function(){
                          $(this).closest('div').show();
                        });
                        $('#dropdown').show();
                        $('#exerVariNameA').hide();
                        $("#dailyPR").show();
                        $(".movementTypeDiv").show();
                    break;
                  case '6':
                    $("input[name='Exercise']").each(function(){
                      $(this).closest('div').hide();
                    });
                    $('#dropdown').hide();
                    $('#exerVariNameA').show();
                    $("#dailyPR").hide();
                    $(".movementTypeDiv").hide();
                    break;
                }
            });
            //Remember which radiobutton was last clicked and keeps it that way
            //after a page refresh or form post.
            $('input[type=radio]').each(function() {
                var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );
                if (state) this.checked = state.checked;
                $(this).trigger('change');
            });
            $("input[name='Type']").each(function(){
            	var state=JSON.parse(localStorage.getItem('radio_val'+this.value));
              if(state) this.checked=state.checked;
              $(this).trigger('change');
            });
            $(window).bind('unload', function() {
                $('input[type=radio]').each(function() {
                    localStorage.setItem('radio_' + this.id, JSON.stringify({checked: this.checked}));
                });
                $("input[name='Type']").each(function(){
                	localStorage.setItem('radio_val'+this.value,JSON.stringify({checked:this.checked}));
                });
            });
        });
        
        $(document).ready(function() {
	        $('input[type=radio]').each(function() {
  	            radio_val = JSON.parse(localStorage.getItem('radio_'+this.id));
                if (radio_val.checked) {
                    $(this).trigger('click');
                }
            });
        });
html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0; 
}

body {
    background-color: white;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


a {
    text-decoration: none;
    color: black;
}

.validation-summary-errors {
    font-weight:bold; 
    color:red; 
    font-size: 11pt;
}

header, footer, hgroup,
nav, section {
    display: block;
}

mark {
    background-color: #a6dbed;
    padding-left: 5px;
    padding-right: 5px;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}
/*Viewworkout page*/
.squatColor {
    color: #8c479a;
    font-weight: bold;
}

.benchColor {
    color: #2482c5;
    font-weight: bold;
}

.deadliftColor {
    color: #f96716;
    font-weight: bold;
    
}

.blackColor {
    color: #000;
    font-weight: bold;
}

.whiteColor {
    color: #fff;
    font-weight: bold;
}

.showDate {
    text-transform: capitalize;
    font-weight: bold;
    font-size: 18px;
}

.capitalFirst {
    text-transform: capitalize;
}

.metricDateTextbox {
    width: 150px;
    padding: 11px;
    font-size: 16px;
    border: 1px solid white;
    color: transparent;
    text-shadow: 0 0 0 black;    
    font-family: Verdana;   
    font-weight: 500;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    vertical-align: middle;
    box-sizing:border-box;
}

.viewWorkoutDateBox {
    width: 150px;
    padding: 11px;
    font-size: 16px;
    border: 1px solid white;
    font-family: Verdana;   
    font-weight: 500;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    vertical-align: middle;
    box-sizing:border-box;
}

::-webkit-input-placeholder {
    color: grey;
    font-weight: 500;
    font-family: Verdana;
}
/*Day, week, month dropdown selector.*/
.dwmViewSelect, .baseliftSelect, .exerVariNameSelect {
    height: 43px;
    font-weight: bold;
    border: 1px solid white;
    margin: auto;
    vertical-align: middle;
    cursor: pointer;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    -webkit-appearance:none;
    padding-left: 10px;
    padding-right: 28px;
    box-sizing: border-box;
    font-size: 14px;
}

/*Submit button for metrics to show charts.*/
.showDateBtn {
    width: auto;
    padding: 10px;
    text-align: center;
    height: 43px;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
    border: 1px solid white;
    color: black;
    font-weight: 600;
}

.showDateBtn:focus {
    outline: none;
    border: 1px solid white;
}

.baseliftSelect:focus, .dwmViewSelect:focus {
    outline: none;
    border: 1px solid white;
}

/*Reportion period title text*/
.RPtxt {
    vertical-align: middle;
    margin-right: 5px;
}

.RPtxtTo {
    margin: 0px 5px 0px 5px;
}

.metricsTitle {
    font-weight: 600;
    text-transform: uppercase;
    font-family: Tahoma;
}

#chart_div {
    width: 100%;
    height: 500px;
    border-bottom: 5px solid #898989;
    
}

.repPieChart {
    width: 100%;
    height: 500px;
    border-bottom: 5px solid #898989;
}

.topmargin {
    margin-top: 15px;
}

/*Div to hold the displayed charts coming from ajax calls*/
#here {
    margin-top: 3px;
}

.testthis {
    border: none;
    width: 100px;
    height: 33px;
    vertical-align: middle;
    text-align:center;
    color: transparent;
    text-shadow: 0 0 0 black; 
    cursor:pointer;
    user-select: none;
}

input:hover::-webkit-input-placeholder {
    color: red;
}
input:focus::-webkit-input-placeholder {
    color: red;
}


.holdMetricLinks {
    display: inline-block;
    width: 33%;
    height: 180px;
    line-height: 180px; /* needs to be same as height. */
    background-color: white;
    text-align:center;
    font-size: 20px;
    margin-bottom: 10px;
    border-bottom: 5px solid #898989;
}

.holdMetricLinkboxes {
    width: 100%;
    text-align:center; /* centers the divs inside this div. */
}

.holdLiftMenu {
    margin-top: 10px;
    background-color: white;
    padding: 10px;
}

.holdLiftMenuUL, .holdTimeMenuUL {
    margin:0;
}

.holdTimeMenuUL {
    float:right;
    position:relative;
    right: 5px;
    top: -24px;
}

.holdLiftMenuLI, .holdTimeMenuLI {
    display:inline-block;
}

.holdLiftMenuA, .holdTimeMenuA {
    background-color:white;
    padding: 10px;
    cursor:pointer;
    color: black;
    font-weight:700;
    font-size: 18px;
    text-align:center;  
    white-space: nowrap;  
}
.current {
    border-bottom: 3px solid red;
}
.holdLiftMenuA:hover {
    border-bottom: 3px solid red;
}
.holdTimeMenuA:hover {
    border-bottom: 3px solid red;
}

.hideThis {
    display: none;
}
/*Insert workout click button (submit ajax), on .insertWorkout.*/
.AddBtn {
    padding: 17px 20px 17px 20px;
    cursor:pointer;
    width:100%;
    display: block;
    box-sizing:border-box;
    margin: 0px;
    text-align: center;
    font-size: 25px;
    font-weight: bolder;
    text-transform:uppercase;
    background-color: #6ebf4a;
    color: white;
}

.AddBtn:hover {
    background-color: #404040;
}

/* A div with a message shown on ajax call success. */
#successMsg {
    position:fixed;
    top: 25%;
    padding: 15px;
    width: 200px;
    text-align: center;
    left: 41.5%;
    border-radius: 40px;
    font-size: 25px;
    font-weight: bolder;
    background-color: #6ebf4a;
    color: white;
    text-transform:uppercase;
    display: none;
}

/* A div with a message shown on ajax call failure/error. */
#errorMsg {
    position:fixed;
    top: 25%;
    padding: 15px;
    width: 200px;
    text-align: center;
    left: 41.5%;
    border-radius: 40px;
    font-size: 25px;
    font-weight: bolder;
    background-color: #ff4343;
    color: white;
    text-transform:uppercase;
    display: none;
}

#errorFieldReqMsg {
    position:fixed;
    top: 25%;
    padding: 15px;
    width: 300px;
    text-align: center;
    left: 38%;
    border-radius: 40px;
    font-size: 25px;
    font-weight: bolder;
    background-color: #ff4343;
    color: white;
    text-transform:uppercase;
    display: none;
}

.centerthis {
    margin:auto;
    background-color: grey;
}

.alignCenterThis {
    text-align:center;
}

/*Radios on insertWorkout*/
.radioSelect {
    width: 20px;
    vertical-align: middle;
    height: 20px;
    margin: 0px 3px 0px 15px;
    cursor:pointer;
}

.radioSelectLeft {
    width: 20px;
    vertical-align: middle;
    height: 20px;
    margin: 0px 3px 0px 0px;
    cursor:pointer;
}

/*Labels in insertWorkout*/
.radioLabel {
     font-weight: bold;
     vertical-align:sub;
     font-size: 18px;
     cursor: pointer;
}
/*univeral use*/
.inlineBlock {
    display:inline-block;
}

/*Holds all content to center it on insertWorkout page.*/
.insertWorkoutFormHolder {
    width: 500px;
    margin:auto;
}
/*holds 3 radios and labels on insertWorkout*/
.exerciseTypeDiv, .movementTypeDiv {
    background-color: white;
    padding: 30px 15px 30px 10px;
    border-bottom: 3px solid #898989;
}

/*********************** View Workout page. ****************************/

.vwForm {
    /*margin-bottom: 10px;*/
}

.vwHoldDateStuff {
    width:100%;
    background-color: #6fbf4a;
    padding:20px;
    box-sizing:border-box;
    margin-bottom: 10px;
}

.vwHoldLiftInfo {
   
}

.vwLiftVariTDiv {
    padding: 20px;
    font-size: 20px;
    margin-bottom: 7px;
    cursor: pointer;
    background: #000 center left 20px no-repeat url('Images/minusicon.png'); 
    background-size: 30px 30px;
}

.plusSign {
    background: #000 center left 20px no-repeat url('Images/plusicon.png'); 
    background-size: 30px 30px;
}

.minusSign {
    
}

.liftVariTitle {
    margin-left: 40px;
}

.vwSetRepHolder {
    display: none;
    padding: 5px 20px 5px 20px;
    margin: -3px 0px 7px 10px;
    border: 1px solid #ebebeb;
    background-color: white;
}

.vwVolumeTable {
    width: 100%;
    margin: 0px;
    box-sizing:border-box;
}

.vwVolumeTTD {
    padding: 15px 5px 15px 20px;
    width: 30px;
    margin: 0px;
}

.vwVolumeTTDfirst {
    padding: 15px 5px 15px 0px;
    width: 30px;
    margin: 0px;
}

.vwVolumeTTDspecial {
    margin: 0px;
    padding: 0px;
    width: 20px
}

.vwVolumeTTDverySpecial {
    width: 50px;
    padding-right: 10px;
}

.worksmaybe {
    border-top: 1px solid #ebebeb; 
    width: 100%;
}

.vwSpaceThing {
    height: 10px;
    background-color: red;
    width: 100%;
}

.vwCategoryHolder {
    border: 1px solid #e4e5e6;
    border-bottom: 4px solid #e4e5e6;
    background-color: white;
    padding: 10px;
    width: 300px;
    display: table-cell;
    margin-bottom: 15px;
}

.vwCategoryHolderHeader {
    border-bottom: 1px solid #e4e5e6;
    background-color: white;
    padding-bottom: 0px;
}

.vwCatergoryTitle {
    margin: 15px 0 25px 0;
    padding: 0;
}

.vwVerticalSpace {
    display: table-cell;
    width: 5px;
    background-color: #f5f5f5;
}

.vwBigCatHold {
    display: table-row;
}

.HUGE {
    display: table;
    width: 100%;
}

.vwPeakTable {
    width: 100%;
}

.vwFirstTD {
    cursor: context-menu;
}

.vwLastTD {
    width: 50px;
    border-top: 10px solid white;
    border-bottom: 10px solid white;
    border-left: 10px solid white;
    text-align:center;
    color: white;
    cursor: context-menu;
    padding: 10px 20px 10px 20px;
    font-weight: bold;
    font-size: 18px;
}

.tableLine {
    padding: 0;
    height: 1px;
    background-color: #e4e5e6;
}

.tableSpace {
    padding: 0;
    height: 5px;
}

.BGSquatColor {
    background-color: #8c479a;
}

.BGBenchColor {
    background-color: #2482c5;
} 

.BGDeadliftColor {
    background-color: #f96716;
}

.BGBlackColor {
    background-color: black;
}

.BGAssistanceColor {
    background-color: #9b9b9b;
}
    
#piechartt {
    margin-top: 5px;
    width: 300px;
}

/****************************************************/
/*************** Personal record page ***************/
/****************************************************/

.prTableCell {
    padding: 10px;
    border:1px solid red;
    width: 80px;
    text-align:center;
}

.prExerVariNameTD {
    width: 130px;
}




/*********************************************/
.workoutVariSelect {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    font-family: Verdana;   
    font-weight: 500;
    background: #fff center right 10px no-repeat url('Images/pil.jpg'); 
    background-size: 12px 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.insertWorkoutBoxes, .loginBoxes {
    border: 1px solid white;
    width: 100%;
    padding: 20px 11px 20px 11px;
    font-size: 18px;
    box-sizing:border-box;
    margin: 0px 0px 3px 0px;
}

.loginBoxes {
    border: 1px solid #efefef;
}

.squat {
    color: #8c479a;
}

.benchpress {
    color: #2482c5;
}

.deadlift {
    color: #f96716;
}



.fSize18 {
    font-size: 18px;
}
.fSize16 {
    font-size: 16px;
}
.fSize14 {
    font-size: 14px;
}
.fSize12 {
    font-size: 12px;
}

   

/* main layout
----------------------------------------------------------*/
.content-wrapper {
    margin: 0 auto;
    max-width: 960px;
    background-color: #f5f5f5;
}

#body {
    background-color: #f5f5f5;
    clear: both;
    padding-bottom: 35px;
    /*width: 1000px;*/
    width: 80%;
    margin: auto;
    padding: 20px;
}

    .main-content {
        background: url("../Images/accent.png") no-repeat;
        padding-left: 10px;
        padding-top: 30px;
    }

    .featured + .main-content {
        background: url("../Images/heroAccent.png") no-repeat;
    }

/*header .content-wrapper {
    padding-top: 20px; 
}*/

footer {
    clear: both;
    background-color: #e2e2e2;
    font-size: .8em;
    height: 100px;
}


/* site title
----------------------------------------------------------*/
.site-title {
    color: #c8c8c8;
    font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
    font-size: 2.3em;
    margin: 0;
}

.site-title a, .site-title a:hover, .site-title a:active {
    background: none;
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centerthis">
        
        <form method="post" action="~/AJAXcalls/InsWrkOAJAX.cshtml">
            <div class="insertWorkoutFormHolder">
                <div class="exerciseTypeDiv">
                    <input type="radio" name="Type" id="typ4" value="4" class="radioSelectLeft">
                    <label class="radioLabel" for="typ4">Primary</label>
                    <input type="radio" name="Type" id="typ5" value="5" class="radioSelect" />
                    <label class="radioLabel" for="typ5">Secondary</label>
                    <input type="radio" name="Type" id="typ6" value="6" class="radioSelect" />
                    <label class="radioLabel" for="typ6">Assistance</label>
                </div>

                <div class="movementTypeDiv hideThis">
                    <div class="hideThis inlineBlock">
                        <input class="radioSelectLeft" type="radio" name="Exercise" id="hej1" value="1" />
                        <label class="radioLabel squat" for="hej1">Squat</label>
                    </div>

                    <div class="hideThis inlineBlock">
                        <input class="radioSelect" type="radio" name="Exercise" id="hej2" value="2" />
                        <label class="radioLabel benchpress" for="hej2">Benchpress</label>
                    </div>

                    <div class="hideThis inlineBlock">
                        <input class="radioSelect" type="radio" name="Exercise" id="hej3" value="3" />
                        <label class="radioLabel deadlift" for="hej3">Deadlift</label>
                    </div>
                </div>
                <div id="dropdown">
                    
                    <select id="exerVariNameS" name="exerVariNameS" class="hideThis workoutVariSelect insertWorkoutBoxes">
                        
                            <option  value="">Squat</option>
                        }
                    </select>
                    
                    <select id="exerVariNameB" name="exerVariNameB" class="hideThis workoutVariSelect insertWorkoutBoxes">
                      
                            <option selected=@(Request.Form["exerVariNameB"] == get.exerVariName) value="">Benchpress</option>
                        }
                    </select>
                    
                    <select id="exerVariNameD" name="exerVariNameD" class="hideThis workoutVariSelect insertWorkoutBoxes">
                        
                            <option  value="">Deadlift</option>
                        }
                    </select>
                </div>
                
                <select id="exerVariNameA" name="exerVariNameA" class="hideThis workoutVariSelect insertWorkoutBoxes">
                    
                        <option  value="">Assistance</option>
                    }
                </select>
                <!-- Textbox for changing daily max on secondary exercises. -->
                <input id="dailyPR" placeholder="Daily Max" name="dailyPR" type="text" size="50" value="" class=" hideThis insertWorkoutBoxes" />
                <!-- Textbox for amount of weight. -->
                <input placeholder="Weight" name="Kg" type="text" size="50" value="" class="insertWorkoutBoxes" />
                <!-- Textbox for number of sets. -->
                <input placeholder="Sets" name="Sett" type="number" size="50" value="" class="insertWorkoutBoxes" />
                <!-- Textbox for number of reps. -->
                <input placeholder="Reps" name="Rep" type="number" size="50" value="" class="insertWorkoutBoxes" />
                <!-- Textbox for date of workout. -->
                <input placeholder="Date" type="text" spellcheck="false" autocomplete="off"
                       class="datepicker workoutVariSelect capitalFirst insertWorkoutBoxes" name="Date" value="" readonly="readonly" />
                <!-- Form submit button. -->
                <a class="AddBtn">Save</a>
            </div>
        </form>
        </div>

Upvotes: 0

Views: 1138

Answers (1)

Barmar
Barmar

Reputation: 780974

Instead of hard-coding all the input names, use a more general selector and loop over them. Then specify :visible so you only check the ones that are showing.

$(".AddBtn").click(function() {
    var valid = true;
    $(".insertWorkoutBoxes:visible").each(function() {
        if (this.value == '') {
            valid = false;
            return false;
        }
    });
    if (valid) {
        mySubmit($(this));
    } else {
        $("#errorFieldReqMsg").fadeIn('slow');
        setTimeout(function () { $("#errorFieldReqMsg").fadeOut('slow'); }, 2000);
    }
});

Upvotes: 1

Related Questions