We Keep Coding

Show fields IF select option is selected

I'm trying to make my form somehow more user-friendly. So don't show at the first spot all the fields but only the necessary one, and if a user will meet certain criteria, then show the rest of the fields. It's based on newest bootstrap. My codes are like below:
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
var showHidden = document.querySelectorAll('.d-none');
var selectGroup = document.getElementById('target-audience');
selectGroup.addEventListener('change', function handleChange(event) {
if (event.target.value === '8') {
showHidden.style.display = 'block!important';
} else {
showHidden.style.display = 'none';
}
});
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap');
html, body {
font-family: 'Poppins', sans-serif;
}
#mailchimp-container h1 {
font-size:1em;
text-transform:uppercase;
font-weight:bold;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="mailchimp-container">
<div class="row">
<div class="col">
<h1 class="py-3">
Form test
</h1>
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="email" class="col-form-label">Email</label>
<input id="email" name="email" type="email" class="form-control" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="form-group">
<label for="fname" class="col-form-label">Name</label>
<input id="fname" name="fname" type="text" class="form-control" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="form-group">
<label for="target-audience" class="col-form-label">Who are you?</label>
<select id="target-audience" name="target-audience" class="form-select" required>
<option disabled selected value="">--</option>
<option value="8">Fans of cars, motors and bikes</option>
<option value="16">Fans of flowers</option>
<option value="24">Fans of food</option>
</select>
<div class="invalid-feedback">
Pick proper option
</div>
</div>
<div class="form-group">
<label for="location" class="col-form-label">Your location</label>
<select id="location" name="location" class="form-select" required>
<option disabled selected value="">--</option>
<option value="europe">Europe</option>
<option value="anz">ANZ</option>
<option value="americas">Americas</option>
</select>
<div class="invalid-feedback">
Pick proper option
</div>
</div>
<div class="form-group d-none">
<label for="fav-car" class="col-form-label">Favourite car brand</label>
<input id="fav-car" name="fav-car" type="text" class="form-control">
</div>
<div class="form-group d-none">
<label for="fav-bike" class="col-form-label">Favourite bike brand</label>
<input id="fav-bike" name="fav-bike" type="text" class="form-control">
</div>
<div class="form-group d-none">
<label for="fav-motorcycle" class="col-form-label text-start">Favourite motorcycle brand</label>
<input id="fav-motorcycle" name="fav-motorcycle" type="text" class="form-control">
</div>
<div class="form-group py-3">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
While the form is validating properly, unfortunately the javascript that is suppose to show the fields doesn't. In practice when a user will pick value=8 so he will be a fan of cars/bikes/motors, then the fields should appear.
Thank!

showHidden has a 3 nodes. So you need to iterate and for importing implementation you can use setProperty() method like this;
selectGroup.addEventListener('change', function handleChange(event) {
if (event.target.value === '8') {
showHidden.forEach(div => div.style.setProperty('display', 'block', 'important'))
} else {
showHidden.forEach(div => div.style.setProperty('display', 'none', 'important'))
}
});

Loop through showHidden since it's a NodeList, then use setAttribute('style', 'display: block!important') since you can't add important to an HTMLElement:
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
var showHidden = document.querySelectorAll('.d-none');
var selectGroup = document.getElementById('target-audience');
selectGroup.addEventListener('change', function(event) {
if (event.target.value === '8') {
showHidden.forEach(function(el) {
el.setAttribute('style', 'display: block!important');
})
} else {
showHidden.forEach(function(el) {
el.setAttribute('style', 'display: none');
})
}
});
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap');
html,
body {
font-family: 'Poppins', sans-serif;
}
#mailchimp-container h1 {
font-size: 1em;
text-transform: uppercase;
font-weight: bold;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="mailchimp-container">
<div class="row">
<div class="col">
<h1 class="py-3">
Form test
</h1>
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="email" class="col-form-label">Email</label>
<input id="email" name="email" type="email" class="form-control" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="form-group">
<label for="fname" class="col-form-label">Name</label>
<input id="fname" name="fname" type="text" class="form-control" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="form-group">
<label for="target-audience" class="col-form-label">Who are you?</label>
<select id="target-audience" name="target-audience" class="form-select" required>
<option disabled selected value="">--</option>
<option value="8">Fans of cars, motors and bikes</option>
<option value="16">Fans of flowers</option>
<option value="24">Fans of food</option>
</select>
<div class="invalid-feedback">
Pick proper option
</div>
</div>
<div class="form-group">
<label for="location" class="col-form-label">Your location</label>
<select id="location" name="location" class="form-select" required>
<option disabled selected value="">--</option>
<option value="europe">Europe</option>
<option value="anz">ANZ</option>
<option value="americas">Americas</option>
</select>
<div class="invalid-feedback">
Pick proper option
</div>
</div>
<div class="form-group d-none">
<label for="fav-car" class="col-form-label">Favourite car brand</label>
<input id="fav-car" name="fav-car" type="text" class="form-control">
</div>
<div class="form-group d-none">
<label for="fav-bike" class="col-form-label">Favourite bike brand</label>
<input id="fav-bike" name="fav-bike" type="text" class="form-control">
</div>
<div class="form-group d-none">
<label for="fav-motorcycle" class="col-form-label text-start">Favourite motorcycle brand</label>
<input id="fav-motorcycle" name="fav-motorcycle" type="text" class="form-control">
</div>
<div class="form-group py-3">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>

unable to save to database when using javascript .change function

I have this javascript here which is supposed to show/hide a div based on a selection of a select box. When I try to insert it in the database it only inserts the last option (paypal).
For example if i choose a cash option it will insert a blank field in the database. While if i choose Paypal it will insert it.. same goes for the rest of the options. Only Paypal is being inserted.
(I apologize for both my bad English and my spaghetti code)
$(document).ready(function(){
$("#payment").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="bank"){
$(".box1").not(".bank").hide();
$(".bank").show();
}
else if($(this).attr("value")=="cash"){
$(".box1").not(".cash").hide();
$(".cash").show();
}
else if($(this).attr("value")=="cheque"){
$(".box1").not(".cheque").hide();
$(".cheque").show();
}
else if($(this).attr("value")=="invoice"){
$(".box1").not(".invoice").hide();
$(".invoice").show();
}
else if($(this).attr("value")=="paypal"){
$(".box1").not(".paypal").hide();
$(".paypal").show();
}
else{
$(".box1").hide();
}
});
}).change();
});
<style type="text/css">
.box{
display: none;
}
.box1{
display: none;
}
.income{ background: #fff; }
.expense{ background: #fff; }
.blue{ background: #fff; }
.cash{ background: #fff; }
.card{ background: #fff; }
.cheque{ background: #fff; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<select id="payment" name="payment_type" class="form-control" required>
<option value="" disabled selected>Select Payment Type</option>
<option value="bank">Bank Transfer</option>
<option value="cash">Cash</option>
<option value="cheque">Cheque</option>
<option value="invoice">Invoice</option>
<option value="paypal">Paypal</option>
</select>
</div></div>
<div class="form-group bank box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Bank Account" maxlength="40" />
</div>
</div>
<div class="form-group cash box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Cash Amount" maxlength="40" />
</div>
</div>
<div class="form-group cheque box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Cheque Reference" maxlength="40" />
</div>
</div>
<div class="form-group invoice box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_" class="form-control" placeholder="Invoice Number" maxlength="40" />
</div>
</div>
<div class="form-group paypal box1">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" name="transaction_amount" class="form-control" placeholder="Paypal Reference" maxlength="40" />
</div>
</div>

Your problem is in having all of your input fields named the same thing. This is going to confuse the php script on the server side, because the input name is how it differentiates values. You might wan to try just having a single input field for the transaction amount and indicating the payment in some other way.

When you use style display: none you only hides input. It is still send on submit. Paypal is the last so the last value is nothing because you didn't write anything in hidden input. You must change names of inputs to be individuals.

Instead of adding another element It is landing to a another page

I have created a modal list using bootstrap and Actually I have a form list created and when entered details, it will land me to a desired page. Register button performs this function. But now I have also added a dependent dropdown(Skills,Level) options. It also has a add button and Whenever I am clicking on add button instead of adding another elements,its landing me to that same page and displays added successfully message. Can anyone help me?
<form id='work' method="post" action="registerdb.php">
<div class="form-group">
<label for="recipient-name" class="control-label">First Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "firstname" name = "firstname" class="form-control"
placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">Last Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-user"></span></span>
<input type="text" id = "lastname" name = "lastname" class="form-control"
placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label>Company Name</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-briefcase"></span></span>
<input type="text" id= "companyname" name = "companyname" class="form-
control" placeholder="Company Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group"><label for="exampleInputEmail1">E-mail ID</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-envelope"></span></span>
<input type="text" id = "emailid" name = "emailid" class="form-control"
placeholder="Email" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group"><span class="input-group-addon" id="basic-addon1">
<span class="glyphicon glyphicon-asterisk"></span></span>
<input type="password" id = "password" name = "password" class="form-
control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Type of Industry</label>
<div class="input-group">
<select class="input-medium bfh-countries" data-country="US">
<option value="" disabled="disbaled" selected="selected">Please Select a
Value</option>
<option value="Accounting">Accounting</option>
<option value="Aeronautical">Aeronautical</option>
<option value="Agriculture">Agriculture</option>
<option value="Science and Research">Science and Research</option>
</select>
</div>
</div>
</div>
<hr>
<div align="center">
<button type="button" class="btn btn-primary" data-
dismiss="modal">Close</button>
<input class="btn btn-primary" type = "submit" name = "submit" value =
"register" />
</div>
</form>
<script>
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
//row.remove("#add");
$('#wrapper').append(row);
});
</script>
<div id="wrapper" width="100%">
<div id="wrapper-1" style="float: left; width: 85%;">
<div id="first" style="float: left; width: 65%;">
<label for="skills">Skills</label>
<select id="one" class="step1">
<option value="">Please select an option</option>
<option>C</option>
<option>C++</option>
<option>Java</option>
<option>PHP</option>
</select>
</div>
<div class="general" style="float: left; width: 35%;">
<label for="skills">Level</label>
<select id="two" class="step2">
<option value="">option</option>
<option>Begineer</option>
<option>Expert</option>
<option>Advanced</option>
</select>
</div>
</div>
<div class="add-general" style="float: left; width: 15%;">
<button id="add">add</button>
</div>
</div>

Your jsfiddle is messed up, you should load external CSS and scripts using the "external" feature on the left. And obviously your local files will not be accessible, so use absolute paths. I took the time to set it up properly this time.
Your HTML also looks messy, but browsers still understand it.
As for your unexpected behaviour, I think this post applies to your situation: Form is submitted when I click on the button in form. How to avoid this?
In essence: you just need to specify a type attribute (with value different from "submit" obviously) so that your "Add" button stops acting as a submit button.
<button id="add" type="button">add</button>
You also have a problem with attaching event listener on your "Add" button: your code must be executed after your button exists in DOM.
2 simple methods:
Put your script tag after your button HTML.
Have your code executed after DOM is ready / loaded (e.g. use jQuery(document).ready(function() { /** your code **/}) to request jQuery to execute it once DOM is ready).
jQuery(document).ready(function() {
$( "#add" ).click(function() {
var row = $("#wrapper-1").clone();
// You should change the id to avoid multiple elements
// with same id in your DOM...
$('#wrapper').append(row);
});
});
Updated jsfiddle: http://jsfiddle.net/qc3tu1f1/4/

Why I'm not able to run the jQuery code in one of my pages from the project in following scenario?

I'm using PHP, jQuery, Smarty, etc. for my website.
I've one form on which there are three input text fields viz. zip_code, city and state. I've written jQuery code to auto-populate the city and state input text fields when user enters valid US zip code into input text field zip_code.
Other jQuery functionality on the form is working fine and perfect but I'm having issue only with this functionality. I created one demo page for this functionality there this zip_code functionality worked properly. But it's not working in my project.
I'm putting below the whole HTML of the page which contains the form :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of Fixed Layout with Twitter Bootstrap version 2.0 from w3resource.com">
<meta name="author" content="">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/example-fixed-layout.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap-modal.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/slippry.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/signin.css" rel="stylesheet" type="text/css">
<link href="http://localhost/project_folder/user_ui_files/css/jquery.dateLists.css" rel="stylesheet" type="text/css">
<style type="text/css">
.hideme {
opacity:0;
}
#media (max-width: 979px) {
.navbar-fixed-top.navbar-absolute {
position: absolute;
margin: 0;
}
}
.navbar-absolute + div {
margin-top: 58px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-absolute">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://localhost/project_folder/index.php"><img src="http://localhost/project_folder/user_ui_files/img/logo.png"/></a>
<div class="nav-collapse">
<ul class="nav pull-right navbar-fixed-bottom">
<li><i class="icon-user icon-black"></i> LOGIN</li>
<li><i class="icon-pencil icon-black"></i> REGISTER</li>
<li><i class="icon-edit icon-black"></i> REBATE STATUS</li>
<li><i class="icon-envelope icon-black"></i> CONTACT</li>
<li><i class="icon-map-marker icon-black"></i> STORE LOCATOR</li>
<li>
<form action="index.php" class="navbar-form pull-right" id="formzip" method="post">
<input type="hidden" class="form-control" name="op" id="op" value="zip_code">
<input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
<input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip_code" id="zip_code" value="" > <i class="icon-zip" style="margin-top:3px;" onclick='$("#formzip").submit();'></i>
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<style type="text/css">
.list {
width:60px;
}
.dateLists_container {
}
.dateLists_container .list {
float:left;
}
.dateLists_container .day_container {
}
.dateLists_container .day_container .list {
margin-right:10px;
}
.dateLists_container .month_container {
}
.dateLists_container .month_container .list {
margin-right:10px;
}
.dateLists_container .year_container {
}
.dateLists_container .year_container .list {
}
</style>
<div class="container" style="padding-top: 140px; margin-bottom: 90px;">
<div class="row">
<div class="span12 account-container12">
<legend>New User? Register</legend>
<form action="register.php" class="form-horizontal" method="post">
<div class="row">
<input type="hidden" class="form-control" name="op" id="op" value="preview">
<input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
<input type="hidden" class="form-control" name="main_op" id="main_op" value="">
<div class="col-xs-1"></div>
</div>
<div class="span6">
<div style="float: clear;"></div>
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="First Name">First Name<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="first_name" id="first_name" value="" type="text" placeholder="Enter your first name">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Last Name">Last Name<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="last_name" id="last_name" value="" type="text" placeholder="Enter your last name">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Street 1">Address 1<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="street1" id="street1" value="" type="text" placeholder="Enter the address">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Street 2">Address 2</label>
<div class="controls">
<input name="street2" id="street2" value="" type="text" placeholder="Enter your address">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Zip">Zip<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="zip_code" id="zip_code" value="" type="text" placeholder="Enter your zip code" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="City">City<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="city" id="city" value="" readonly="readonly" type="text" placeholder="Select your city" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="State Code">State<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="state_code" id="state_code" value="" readonly="readonly" type="text" placeholder="Enter state code" class="input-medium">
</div>
</div>
</fieldset>
</div>
<div class="span5">
<fieldset>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="DOB">Date Of Birth<span style="color:#FF0000">*</span></label>
<div class="controls">
<input class="form-control date_control" type="text" name="dob" id="dob" value="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email Id">Email Id<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="email" id="email" value="" type="text" placeholder="Enter your mail ID">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="num">Phone No.</label>
<div class="controls">
<input name="phone_no" id="phone_no" value="" type="text" placeholder="Enter phone no." class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Password">Password<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="password" id="password" value="" type="password" placeholder="Enter the Password" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Password">Confirm Password<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="password_confirmation" id="password_confirmation" value="" type="password" placeholder="Re-enter the password" class="input-medium">
</div>
</div>
<!-- Multiple Radios -->
<div class="control-group">
<label class="control-label" for="radios">Mode of Payment</label>
<div class="controls">
<label class="radio" for="radios-0">
<input type="radio" name="mode_of_payment" value="paypal">
PayPal
</label>
<label class="radio" for="radios-1">
<input type="radio" name="mode_of_payment" value="check">
Check
</label>
</div>
</div>
<!-- Text input-->
<div id="paypal_op" style="display:none;" class="control-group">
<label class="control-label" for="email">PayPal Email Account</label>
<div class="controls">
<input type="text" name="pay_pal_email" id="pay_pal_email" value="" placeholder="Enter email id" class="input-large">
</div>
</div>
</fieldset>
</div>
<div class="container">
<div class="row">
<div class="span2"></div>
<div class="span5">
<button type="submit" class="btn btn-success"><i class="icon-white icon-ok"></i> Preview</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div> <!-- /container -->
<footer style="background-color:#000" id="footer">
<div class="container">
<div class="row">
<div class="span3 top-buffer-footer">
<p> © 2014 PROJECT NAME</p>
</div>
<div align="center" class="span7 top-buffer-footer">
About Us |
Privacy Policy |
Terms & Conditions
</div>
<div class="span2 top-buffer-footer">
<a style="float:right" href="#">Powered By COMPANY NAME</a>
</div>
</div>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster and more quicker-->
<script src="http://localhost/project_folder/user_ui_files/js/jquery.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/slippry.min.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tooltip.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-alert.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-button.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-carousel.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-collapse.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-dropdown.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modal.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-popover.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-scrollspy.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tab.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-transition.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-typeahead.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modalmanager.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/jquery.dateLists.min.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/custom/common.js"></script>
</body>
</html>
The jQuery code to run this zip code functionality is written into file common.js which is included at last of this page.
Following is the code from the file common.js:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i) {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > (bottom_of_object - (bottom_of_object * 0.2)) ) {
$(this).animate({'opacity':'1'},300);
}
});
});
/*jQuery code for autopo-populate city and state when customer enters valid zip code*/
$("#zip_code").keyup(function() {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.elevenbasetwo.com",
cache: false,
dataType: "json",
type: "GET",
data: "zip=" + el.val(),
success: function(result, success) {
$("#city").val(result.city);
$("#state_code").val(result.state);
}
});
}
});
$('#dob').dateDropDowns({dateFormat:'mm-dd-yy'});
$("input[type='radio']").change(function() {
if($(this).val()=="paypal") {
$("#paypal_op").show();
} else {
$("#paypal_op").hide();
}
});
});
$(function() {
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: $('#brand_slider_time').val() * 1000,
auto: true,
preload: 'visible'
});
$('.stop').click(function () {
demo1.stopAuto();
});
$('.start').click(function () {
demo1.startAuto();
});
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
I'm using jQuery v1.7.1 in my project.
I've also created a jsFiddle with only these necessary fields it's working fine. You can see the fiddle here.
In my project I tried to debug the code, tried to put alert inside the function I wrote for zip_code. Neither the Firebug console shown me any error nor the alert got printed.
Then I tried to print the alert outside the zip_code function (i.e. on page load) it printed. The alert is not getting printed inside the function. Also I tried various other events like focus, blur, etc. instead of key up then also the alert didn't print. The Firebug console never shown me any error or warning.

The markup in your post includes two form elements, one in what appears to be a navigation menu and another in what appears to be the main content of the page. Both these forms have an input element with the id zip_code.
In HTML id attributes are meant to be unique. For this reason, the expression $('#zip_code') would return only the first of the two elements with that id - the one in the navigation menu. This in turn causes the keyup event to not be bound to the second (and relevant) input field.
The reason it works in your fiddle is that the HTML in the fiddle does not include the navigation menu and therefore the markup includes only a single input element with the zip_code id.

Keeping the function active even if I pressed backspace/delete. And getting the value of a select when I load the page

I am wondering how can I make my function still active even if I pressed backspace/delete it would still work and also I want to get the value of my select for my function. It will depend on the value of my select
This is my code:
<label class="control-label" for="discountType">Type</label>
<div class="controls" >
<select id="discountType" name="discountType" class="span10" required>
<option value="PR">Percentage</option>
<option value="P">Peso Value</option>
</select>
</div>
<label class="control-label" for="discountValue">Discount Value</label>
<div class="controls">
<input type="text" id="discountValue" name="discountValue" maxlength="3" placeholder="numbers and decimals only" class="span10" required><br>
<span id="value-min" style="text-align: right; color: red; width: 250px; text-align: left; font-size: 12px;"></span>
</div>
this is my script:
$(document).ready(function(){
$("#discountType").on("ready",function(){
var disType = $("#discountType").val();
if (disType == "PR"){
$("#discountValue").on("keyup",function(){
var disval = $("#discountValue").val();
if (disval.trim().length >= 3){
$("#value-min").html("<span> Discount value cannot be larger than 99 if discount type is PERCENTAGE</span>");
}else{
$("#value-min").hide()/*html("")*/;
}
});
}else{
$("#value-min").hide()/*html("")*/;
}
});
});
but it's not working.

Actually you can also use a plain hide/show on that span and put the value initially. Example:
<label class="control-label" for="discountType">Type</label>
<div class="controls" >
<select id="discountType" name="discountType" class="span10" required>
<option value="PR">Percentage</option>
<option value="P">Peso Value</option>
</select>
</div>
<label class="control-label" for="discountValue">Discount Value</label>
<div class="controls">
<input type="text" id="discountValue" name="discountValue" maxlength="3" placeholder="numbers and decimals only" class="span10" required><br>
<span id="value-min" style="text-align: right; color: red; width: 250px; text-align: left; font-size: 12px; display: none">
Discount value cannot be larger than 99 if discount type is PERCENTAGE
</span>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#discountValue').on('keyup focus', function(e){
var value = $('#discountValue').val();
var disType = $("#discountType").val();
if(disType == 'PR' && value > 99) {
$('#value-min').show();
} else {
$('#value-min').hide();
}
});
});
</script>