Dont send or dont show the empty/blank input when sending the form

Question

Im having two trouble or issue on my code

How can I achieve not send when a value of the input field is empty if I click the submit button?
I have the select-1 and select-2 javascript how can I name its value to the name given for example for select-1 if I select AS400 (the value is set to option-1 but I want to name it AS400) then when selecting the options for select-2 AS400 New Account((the value is set to option-1a class is option-1 but I want to name it AS400 New Account)

$(function() {
  
  $('#select-2 option:not([default])').wrap('');
});

$('#select-1').change(function() {
  $('#select-2 span > option').unwrap();
  $('#select-2 option:not(.' + $('#select-1').val() + ', [default])').wrap('');
  //console.log($('#select-2').val());
});

$('#select-2').trigger('change');
$("#otherFieldGroupMod").hide();
$("#otherFieldGroupRes").hide();
$("#otherFieldGroupRem").hide();
$("#otherFieldGroupOutacc").hide();
$("#outlookAccountDistri").hide();
$("#otherFieldGroupWinacc").hide();
$("#otherFieldGroupKdrive").hide();
$("#otherFieldGroupDcnet").hide();
$("#otherFieldGroupResPass").hide();
$("#otherFieldGroupValpo").hide();

//AS400 NEW ACCOUNT SCRIPT//
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-1a") {
      $("#otherFieldGroupNewacc").show();
    } else {
      $("#otherFieldGroupNewacc").hide();
    }
  });
});

//AS400 MODFIY ACCOUNT SCRIPT//
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-1b") {
      $("#otherFieldGroupMod").show();
    } else {
      $("#otherFieldGroupMod").hide();
    }
  });
});

//AS400 RESET ACCOUNT SCRIPT//
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-1c") {
      $("#otherFieldGroupRes").show();
    } else {
      $("#otherFieldGroupRes").hide();
    }
  });
});

//AS400 REMOVE ACCOUNT SCRIPT//
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-1d") {
      $("#otherFieldGroupRem").show();
    } else {
      $("#otherFieldGroupRem").hide();
    }
  });
});
//Disabling a text input field with regular JavaScript.
document.getElementById("hideInput").disabled = true;


//OUTLOOK NEW ACCOUNT /
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-2a") {
      $("#otherFieldGroupOutacc").show();
    } else {
      $("#otherFieldGroupOutacc").hide();
    }
  });
});

//Add TO DISTRIBUTION LIST
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-2b") {
      $("#outlookAccountDistri").show();
    } else {
      $("#outlookAccountDistri").hide();
    }
  });
});


//WINDOWS NEW ACCOUNT SCRIPT//
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-3a") {
      $("#otherFieldGroupWinacc").show();
    } else {
      $("#otherFieldGroupWinacc").hide();
    }
  });
});

//K DRIVE AND GROUP ACCESS
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-3b") {
      $("#otherFieldGroupKdrive").show();
    } else {
      $("#otherFieldGroupKdrive").hide();
    }
  });
});

//DC NET ACCESS
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-3c") {
      $("#otherFieldGroupDcnet").show();
    } else {
      $("#otherFieldGroupDcnet").hide();
    }
  });
});


//RESET PASSWORD ACCESS
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-3d") {
      $("#otherFieldGroupResPass").show();
    } else {
      $("#otherFieldGroupResPass").hide();
    }
  });
});


//VAPLO NEW ACCOUNT SCRIPT//
$(function() {
  $("#select-2").change(function() {
    if ($(this).val() == "option-4a") {
      $("#otherFieldGroupValpo").show();
    } else {
      $("#otherFieldGroupValpo").hide();
    }
  });
});

$('#select-3').change(function() {
  $('#select-4 span > option').unwrap();
  $('#select-4 option:not(.' + $('#select-3').val() + ', [default])').wrap('');
  //console.log($('#select-2').val());
  //if ($(this).val() == "option-1") {
  // $("#select-1a").show();
  // $("#select-1b").show();
  //  }
});

$('#select-4').trigger('change');



//DO NOT SEND EMPTY INPUT FIELDS //
$(document).ready(function() {
  $("form").submit(function() {
    $("input").each(function(index, obj) {
      if ($(obj).val() == "") {
        $(obj).remove();
      }
    });
  });
});

html,
body {
  min-height: 100%;
}

body,
div,
form,
input,
label {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 15px;
  color: #666;
  line-height: 22px;
}

legend {
  color: #fff;
  background-color: #095484;
  padding: 3px 5px;
  font-size: 20px;
}

h1 {
  position: absolute;
  margin: 0;
  font-size: 36px;
  color: #fff;
  z-index: 2;
}

.testbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  padding: 20px;
}

form {
  width: 75%;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 20px 0 #095484;
}

.banner {
  position: relative;
  height: 300px;
  background-image: url("/Krishneel/Walgreens Logo's/Walgreens New Logo/banner.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.banner::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

input {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 15px;
  font-weight: bold;
}

input {
  width: calc(100% - 10px);
  padding: 5px;
}

select {
  width: 100%;
  padding: 3px 0;
  background: transparent;
  font-size: 15px;
  font-weight: bold;
}

input[type="date"] {
  padding: 4px 5px;
}

.item:hover p,
.item:hover i,
.question:hover p,
.question label:hover,
input:hover::placeholder {
  color: #095484;
}

.item input:hover {
  border: 1px solid transparent;
  box-shadow: 0 0 6px 0 #095484;
  color: #095484;
}

.item {
  margin: 10px 0;
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

.item i,
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  font-size: 20px;
  color: #095484;
}

.item i {
  right: 2%;
  top: 30px;
  z-index: 1;
}

[type="date"]::-webkit-calendar-picker-indicator {
  right: 1%;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.question span {
  margin-left: 30px;
}

.btn-block {
  margin-top: 10px;
  text-align: center;
}

button {
  width: 150px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #095484;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #4286f4;
}

@media (min-width: 568px) {
  .name-item,
  .city-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .name-item input,
  .city-item input,
  .name-item div {
    width: calc(50% - 20px);
  }
  .name-item div input {
    width: 97%;
  }
  .name-item div label {
    display: block;
    padding-bottom: 5px;
  }
}

.status label:hover input {
  box-shadow: 0 0 5px 0 #095484;
}

.status-item input,
.status-item span {
  width: auto;
  vertical-align: middle;
}

.status-item input {
  margin: 0;
}

.status-item span {
  margin: 0 20px 0 5px;
}

textarea {
  width: calc(100% - 12px);
  padding: 5px;
  font-family: Roboto, Arial, sans-serif;
}



  
    
                  ID Request Form
    
    

    Please fill out with the information that is requested below and submit the id request form. Thank you!
    
      Request Type
      
      

      Choose a Sub-Category
      
    
    
    
    
    
      AS400 New Account
      
      
        
          Requestor Full Name
          
        
        


        
          Beneficiary (Full Name)
          
        
        


        
          Employee ID
          
        
        

        
          New Job Category
          
        
        

        
          New AS400 ID
          
        
      
    
    
    
      AS400 Modify Account
      
      
        
          Requester (Full Name)
          
        
        


        
          Beneficiary (Full Name)
          
        
        


        
          Employee ID
          
        
        


        


        
          AS400 ID
          
        
        

        
          New Job Category>
          
        
        

        
          New AS400 ID
          
        
      
    
    
    
      AS400 Reinstate Password
      
      
        
          Requester (Full Name)
          
        
        


        
          Beneficiary (Full Name)
          
        
        


        
          Employee ID
          
        
        


        


        
          AS400 ID
          
        
      
    
    
    
      Remove AS400 Account
      
      
        
          Requester (Full Name)
          
        
        

        
          Terminated TM (Full Name)
          
        
        

        
          Employee ID
          
        
        

        
          AS400 ID
          
        
        

        
          Reason
          
        
      
    

  
    
    
    
      Outlook New Account
      
      
        
          Full Name
          
        
        


        
          Employee ID
          
        
        


        
          ONE ID (Formally Authenticator ID)
          
        
        


      
    

    
    
      Add to Distribution List
      
      
        
          Full Name
          
        
        


        
          ONE ID (Formally Authenticator ID)
          
        
        


        
          Select a Distribution List
          
        
      
    

  
    

    
    
      Windows New Account
      
      
        
          Full Name
          
        
        


        
          Employee ID
          
        
        


        
          ONE ID (Formally Authenticator ID)
          
        
        


        
           Mirror Account ONE ID
          
        
        


        
          Comments
          
        
      
    

    
    
      K Drive and Group Access
      
      
        
          Full Name
          
        
        


        
          Employee ID
          
        
        


        
          ONE ID (Formally Authenticator ID)
          
        
        


        
           Mirror Account ONE ID
          
        
        


        
          Comments
          
        
      
    

    
    
      DC Net Access
      
      
        
          Full Name
          
        
        


        
          Employee ID
          
        
        


        
          ONE ID (Formally Authenticator ID)
          
        
        

        
           Select your Job Title
          
          


          
        
      
    

    
    
      Reset Windows Password
      
      
        Click the link for Reset Password Help
        Password Resets & Account Unlocks for Direct Reports
      
    

 
    
    
    
      Valpo New Account
      
      
        
          Full Name
          
        
        


        
          Employee ID
          
        
        


        
          ONE ID (Formally Authenticator ID)
          
        
        


        
          Badge Number
          
        
      
    

    
      
        
          Enter your Email

user_15438127 · Answer

You don't need to add some extra JS function to check data is present in the field or not while submitting. you can simply do this by adding required to the input field.

If you want to any of those fields as optional then don't add require


      

        Full Name
          
        
        



        Employee ID
          
        
        



        ONE ID (Formally Authenticator ID)
          
        
        



        Badge Number
          
        
        



        Enter your Email:

Dont send or dont show the empty/blank input when sending the form

1 Answers