Unable to upload to firebase database from html form - javascript

I'm struggling to figure out what's going wrong with my attempts to upload data to firebase with the below code, but data is not saving in firebase.
When i clicked submit nothing happens but success message comes
could somebody help me.
my java script code fbdb.js is
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid');
var orin = document.getElementById('ori');
var recv = document.getElementById('recvdt');
var requnby = document.getElementById('reqn');
var wksrc = document.getElementById('wsrc');
var wktyp = document.getElementById('wtyp');
var furn = document.getElementById('fur');
var custm = document.getElementById('cust');
var strt = document.getElementById('stdt');
var endd = document.getElementById('enddt');
var remar = document.getElementById('rema');
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
}
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
</body>
</html>
I'm struggling to figure out what's going wrong with my attempts to upload data to firebase with the below code, but data is not saving in firebase. When i clicked submit nothing happens but success message comes could somebody help me


While writing this answer, I've changed multiple things:
Datalists do not return the value, the input does source.
The document.getElementById('ori').value; was changed to orgi
Got the .value from the elements
Added <script src="//cdn.jsdelivr.net/npm/sweetalert2#10"></script> to be able to use swal
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid').value;
var orin = document.getElementById('orgi').value;
var recv = document.getElementById('recvdt').value;
var requnby = document.getElementById('reqn').value;
var wksrc = document.getElementById('wsrc').value;
var wktyp = document.getElementById('wtyp').value;
var furn = document.getElementById('fur').value;
var custm = document.getElementById('cust').value;
var strt = document.getElementById('stdt').value;
var endd = document.getElementById('enddt').value;
var remar = document.getElementById('rema').value;
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
};
console.log(userData);
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi-list" id="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi-list">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn-list" id="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn-list">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc-list" id="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc-list">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp-list" id="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp-list">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur-list" id="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur-list">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#10"></script>
</body>
</html>
Let me know how this goes.

Related

How to change a custom bootstrap input onchange

I have this form below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form method="post">
<div class="form-group">
<label for="model">Offer Model / Type</label>
<select name="model" id="model" class="form-control" required>
<option value="1">Set Rate</option>
<option value="2">Percentage</option>
</select>
</div>
<div class="form-group">
<label for="price">Price:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</span>
</div>
<input type="text" id="price" name="price" class="form-control" required>
</div>
</div>
<button type="submit">Update Product Price</button>
</form>
I am trying to make it so where when someone selects the percentage in the select input, it changes the price input below it, from the $ prepending the input to a % sign at the end of the input and of course reverse back if they change back to set rate.
I am not completely familiar with Java Script. Can anyone please help me figure out the correct way to achieve this?

You can do it using onchange event on the model select, then based on the selected option we show either the percentage or dollar.
If you are planning to use jquery this could be helpfull instead of the js code bellow:
$( "#model" ).change(function() {
$('#percent').toggleClass('d-none');
$('#dollar').toggleClass('d-none');
});
document.getElementById("model").addEventListener("change", myFunction);
function myFunction() {
var model = document.getElementById("model").value;
var dollar = document.getElementById("dollar");
var percent = document.getElementById("percent");
if (model == 1) {
percent.classList.add('d-none');
dollar.classList.remove('d-none');
} else {
dollar.classList.add('d-none');
percent.classList.remove('d-none');
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form method="post">
<div class="form-group">
<label for="model">Offer Model / Type</label>
<select name="model" id="model" class="form-control" required>
<option value="1">Set Rate</option>
<option value="2">Percentage</option>
</select>
</div>
<div class="form-group">
<label for="price">Price:</label>
<div class="input-group">
<div class="input-group-prepend" id="dollar">
<span class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</span>
</div>
<input type="text" id="price" name="price" class="form-control" required>
<div class="input-group-prepend d-none" id="percent">
<span class="input-group-text">
<i class="fas fa-percent"></i>
</span>
</div>
</div>
</div>
<button type="submit">Update Product Price</button>
</form>

How to get dynamically appended options without using on change or onclick event?

I am adding options dynamically in country select box.Options appears in select box and become selected on click but i want to get them in js as they are appended. If I console select box html in after they are appended. I only got option that is added in html not all other options that are append by js. I am not sure whats going wrong. Here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<title>login</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css" />
<link rel="stylesheet" href="assets/css/style1.css" />
</head>
<body>
<div class="dashboard" style="text-align: center;">
<div class="wrapper">
<section id="nav-tabs">
<div class="container">
<div class="row justify-content-between">
<div class="col-8 p-0">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active p-11" id="nav-profil1-tab" data-toggle="tab" href="#nav-profil1" role="tab" aria-controls="nav-home" aria-selected="true"><span class="word-profile hide">Profile</span> 1</a>
</div>
</nav>
</div>
<div class="col-2 align-self-center">
<i class="fa fa-plus plus" aria-hidden="true"></i>
</div>
<div class="col-xs-2">
<i class="fa fa-cog text-white setting" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<section id="tabs">
<div class="container">
<div class="row" style="background-color: #013e77;">
<div class="col-xs-12 ">
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-profil1" role="tabpanel" aria-labelledby="nav-profil1-tab">
<form class="text-center profile" style="color: #757575;" action="#!">
<div class="form-row">
<div class="form-group col-12">
<select class="form-control prefer" id="exampleFormControlSelect1" name="preferred">
<option>Preferred Profile</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group col-6">
<input type="text" class="form-control fname" id="inputfname" placeholder="First Name" name="first_name" required>
<p class="fname-error text-danger hide"></p>
</div>
<div class="form-group col-6">
<input type="text" class="form-control lname" id="inputlname" placeholder="Last Name" name="last_name" required>
<p class="lname-error text-danger hide"></p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control address" id="inputAddress" placeholder="Address" name="address" required>
<p class="address-error text-danger hide"></p>
</div>
<div class="form-group">
<input type="text" class="form-control apartment" id="inputAddress2" placeholder="Apartment, suite, etc. (optional)" name="apartment">
</div>
<div class="form-row">
<div class="form-group col-12">
<input type="text" class="form-control city" id="inputCity" placeholder="City" name="city" required>
<p class="city-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<select id="inputCountry" class="form-control country" name="country">
<option>--Select Country--</option>
</select>
</div>
<div class="form-group col-4">
<select id="inputState" class="form-control states" name="state">
<option>--Select State --</option>
</select>
</div>
<div class="form-group col-4">
<input type="text" class="form-control zip" id="inputZip" placeholder="Zip code" name="zip" required>
<p class="zip-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control phone" id="inputAddress" placeholder="Phone" name="phone" required>
<p class="phone-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_num" id="inputAddress" placeholder="Card Number" name="card_num" required>
<p class="card_num-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_name" id="inputAddress" placeholder="Name on Card" name="card_name" required>
<p class="card_name-error text-danger hide"></p>
</div>
<div class="form-group col-5">
<input type="date" class="form-control expiry" id="inputAddress" placeholder="Expiration Date" name="expiry" required>
<p class="expiry-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<input type="text" class="form-control cvv" id="inputAddress" placeholder="CVV" name="cvv" required>
<p class="cvv-error text-danger hide"></p>
</div>
<div class="form-group col-3">
<button type="submit" class="btn btn-primary save">Save</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-danger delete" data-id="">Delete</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-primary update" data-id="">Update</button>
</div>
<div class="form-group col-4">
<button type="button" class="activate"><i class="fa fa-bolt" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./Tabs -->
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="popup.js"></script>
</body>
</html>
Here is js:
/*----- Dashboard -----*/
appendCountries();
console.log($(".country").html());
/*------get countries from json-----*/
function appendCountries(){
$.getJSON('countries.json',function(result){
console.log(result.countries);
$.each(result.countries,function(index,country){
var option='<option value="'+country.id+"-"+country.name+'">'+country.name+'</option>';
$(".country").append(option);
});
});
}
Thanks in Advance!
I am stuck here please guide me what is the way to get options without adding any event on select box

This happens, because here is some asynchronously actions. If you call $('.country').html() after inserting options - it will show you generated html code. It is possible by two ways minimum:
Call $('.country').html() in the callback of $.getJSON after $.each(...).
As in my snippet - in processing of Promise of appendCountries, but firstly we should return it by adding return before $.getJSON.
appendCountries().then(() => {
console.log($(".country").html());
});
/*------get countries from json-----*/
function appendCountries(){
return $.getJSON('https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json',
function(result){
// console.log(result);
$.each(result, function(index, country){
var option='<option value="'+index+"-"+country.country+'">'+country.country+'</option>';
$(".country").append(option);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="countries" id="countriesSelect" class="country">
<option> -- select country -- </option>
</select>

click event handler for an id that is non responsive. (or at-least I think)

I have built out a pop-up button module using Bootstrap with the intent in adding it to each of my product pages. The roadblock Issue I am having is listed below.
*This is my first post here so If there is anything posted that would not be necessary or how I format the issue should be different please let me know.
The issue is I have set a drop down to allow the site's users to select the topic of their email information request. The other option presented me with the question, should I remove the drop down and provide a text filed for the user to fill out to best suit their needs for the evolution.
I am unable to figure a response in the console (at my tech ability) so I know how to assign it to disappear and allow the other field to appear when the "other" option is selected. I have two variants attached and was hoping to get one of them to work but have been unsuccessful. Please advise.
Thank you!
J
//What I expected to work and did not.
/* First attempt code start */
// $(document).ready(function(){
// console.log("Do Something rad today...");
// $('#mce-other-subject').hide();
// });
// $('#tenth-choice').on("click", function () {
// $('#mce-MMERGE3').hide();
// $('#mce-other-subject').show();
// });
/* First attempt code end */
/* Second attempt code start */
// var newDiv = document.getElementById('tenth-choice');
// newDiv.addEventListener("click", listener, false);
// function listener() {
// document.getElementById('tenth-choice').innerHTML = "other";
// $('#mce-MMERGE3').hide();
// $('#mce-other-subject').show();
// }
// /* Second attempt code end */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Working primary content for button click - Module pop out -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- additional meta tags -->
<meta author=" Jxxxx Sxxxx ">
<meta copyright="© 2019 | Jxxxx Sxxxx ">
<meta user="RxxxxxxxxxxxxSxxxx.com">
<meta keywords="bootstrap, html, jquery, module, button, contact, form, javascript">
<!-- Jquery | Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async></script>
</head>
<body>
<!--------------- primary button ---------------------------------->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong" id="ques-btn" style=" margin-left: 40%; margin-top:10%;">
Have Questions
</button>
<!--------------- Modal Begin ----------------------->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgba(255,255,255, .003);">
<h5 class="modal-title text-center" id="exampleModalLongTitle">Contact Our Tech Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background-color: "rgba(255,255,255, .003)";
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://thedomain.com/things/morethings/onelastthing" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Have questions? We are here to help</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL"> <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" * Your#email.com * ">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"> </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
<label for="mce-LNAME"> </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
<label for="mce-Link"> </label>
<input type="text" value="" name="LINK" class="" id="mce-LNAME" placeholder="https://linkGoesHere.com">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE4"> </label>
<input type="number" name="MMERGE4" class="" value="" id="mce-MMERGE4" placeholder="5 5 5 - 5 5 5 - 5 5 5 5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice" id="tenth-choice">Other</option>
</select>
<div class="mc-field-group">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" id="mce-other-subject" placeholder="RE: ( alt: Custom subject )">
</div>
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5"> <span class="asterisk">*</span>
</label>
<input type="text" value="" name="MMERGE5" class="required" id="mce-MMERGE5" placeholder=" * Your quesitons go here . . . * ">
</div>
<div class="mc-field-group input-group">
<strong>Format </strong>
<ul>
<li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0"> html</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1"> text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0e27360bc21d21bdeb3dc8509_e155794398" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'number';
fnames[3] = 'MMERGE3';
ftypes[3] = 'dropdown';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
link to an image of console and client-side

You don't really need to listen the click on the option 10 of your list. What you need to do is listen to the onChange event of the select tag and compare the value with the option you want to condition the visibility of the input, in your case "Tenth Choice".
If the comparison is true you will be able to change the visibility as you wish. let's have a look to this example:
$('#mce-MMERGE3').on("change", function (e) {
if (e.target.value == "Tenth Choice") {
$('#mce-MMERGE3').hide();
$('#mce-other-subject').show();
}
});
.mce-other-subject {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice">Other</option>
</select>
<div class="mc-field-group mce-other-subject" id="mce-other-subject">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" placeholder="RE: ( alt: Custom subject )">
</div>
</div>

This is the function you need to toggle the custom subject input field group:
$(function () {
var subjectInputGroup = $('#mce-other-subject').closest('.mc-field-group');
subjectInputGroup.hide()
$('#mce-MMERGE3').on('change', function (e) {
if ($('option:selected', this).attr('id') == 'tenth-choice') {
subjectInputGroup.show()
}
else {
subjectInputGroup.hide()
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Working primary content for button click - Module pop out -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- additional meta tags -->
<meta author=" Jxxxx Sxxxx ">
<meta copyright="© 2019 | Jxxxx Sxxxx ">
<meta user="RxxxxxxxxxxxxSxxxx.com">
<meta keywords="bootstrap, html, jquery, module, button, contact, form, javascript">
<!-- Jquery | Javascript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" async></script>
</head>
<body>
<!--------------- primary button ---------------------------------->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong" id="ques-btn" style=" margin-left: 40%; margin-top:10%;">
Have Questions
</button>
<!--------------- Modal Begin ----------------------->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgba(255,255,255, .003);">
<h5 class="modal-title text-center" id="exampleModalLongTitle">Contact Our Tech Department</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background-color: "rgba(255,255,255, .003)";
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://thedomain.com/things/morethings/onelastthing" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Have questions? We are here to help</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL"> <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder=" * Your#email.com * ">
</div>
<div class="mc-field-group">
<label for="mce-FNAME"> </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="First Name">
</div>
<div class="mc-field-group">
<label for="mce-LNAME"> </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME" placeholder="Last Name">
</div>
<div class="mc-field-group">
<label for="mce-Link"> </label>
<input type="text" value="" name="LINK" class="" id="mce-LNAME" placeholder="https://linkGoesHere.com">
</div>
<div class="mc-field-group size1of2">
<label for="mce-MMERGE4"> </label>
<input type="number" name="MMERGE4" class="" value="" id="mce-MMERGE4" placeholder="5 5 5 - 5 5 5 - 5 5 5 5">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE3"> </label>
<select name="MMERGE3" class="" id="mce-MMERGE3">
<option value="">Email Subject</option>
<option value="First Choice">Schedule a Bike Fit</option>
<option value="Second Choice">Schedule Bike Service</option>
<option value="Third Choice">Order Question</option>
<option value="fourth Choice">Overseas shipping</option>
<option value="fifth Choice">I want to do a custom build</option>
<option value="Sixth Choice">I dont see it on your site, Can you get it for me?</option>
<option value="Seventh Choice">Request a call back</option>
<option value="Eigth Choice">Upcoming Rides</option>
<option value="Nineth Choice">Waranty</option>
<option value="Tenth Choice" id="tenth-choice">Other</option>
</select>
<div class="mc-field-group">
<label for="mce-other-subject"> </label>
<input type="text" value="" name="other-subject" class="" id="mce-other-subject" placeholder="RE: ( alt: Custom subject )">
</div>
</div>
<div class="mc-field-group">
<label for="mce-MMERGE5"> <span class="asterisk">*</span>
</label>
<input type="text" value="" name="MMERGE5" class="required" id="mce-MMERGE5" placeholder=" * Your quesitons go here . . . * ">
</div>
<div class="mc-field-group input-group">
<strong>Format </strong>
<ul>
<li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0"> html</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1"> text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0e27360bc21d21bdeb3dc8509_e155794398" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
(function($) {
window.fnames = new Array();
window.ftypes = new Array();
fnames[0] = 'EMAIL';
ftypes[0] = 'email';
fnames[1] = 'FNAME';
ftypes[1] = 'text';
fnames[2] = 'LNAME';
ftypes[2] = 'text';
fnames[4] = 'MMERGE4';
ftypes[4] = 'number';
fnames[3] = 'MMERGE3';
ftypes[3] = 'dropdown';
fnames[5] = 'MMERGE5';
ftypes[5] = 'text';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Here's an ES6 shorthand alternative:
const subjectInputGroup = $('#mce-other-subject').closest('.mc-field-group').hide();
$('#mce-MMERGE3').on('change', e => subjectInputGroup[
$('option:selected', e.target).attr('id') == 'tenth-choice' ? 'show' : 'hide'
]());

ng-repeat not updating when new data is introduced

I have a simple app where it takes data from a local json object and displays it on the screen. this part works perfectly, there is also a feature where you can fill out a form to add a new element to the json and it will also display on the page however this is not working.
I can tell the function that is supposed to push the data to the JSON is working because its secondary function is to clear the form data after submission which it is doing.. I also logged the JSON after the ng-click submit button is clicked and I can see the new data added in the log entry but ng-repeat is not adding it to the page.
heres the code
index.html
<html>
<head>
<meta charset="utf-8">
<title>AngTest </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<!-- nav bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Star Wars BnB</a>
</div>
</div>
</nav>
<div class="container">
<!-- Min / Max Price Filter -->
<div class="col-sm-12" id="price-form">
<div class="row price-form-row" ng-if="!addListing">
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">Min Price</span>
<select name="minPrice" id="minPrice" ng-model="priceInfo.min" class="form-control">
<option value="0">$0</option>
<option value="500">$500</option>
<option value="1000">$1000</option>
<option value="10000">$10,000</option>
<option value="100000">$100,000</option>
<option value="1000000000000">$1,000,000,000,000</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">Max Price</span>
<select name="maxPrice" id="maxPrice" ng-model="priceInfo.max" class="form-control">
<option value="0">$0</option>
<option value="500">$500</option>
<option value="1000">$1000</option>
<option value="10000">$10,000</option>
<option value="100000">$100,000</option>
<option value="1000000000000">$1,000,000,000,000</option>
</select>
</div>
</div>
</div>
<button
class="btn btn-primary"
ng-click="addListing = !addListing"
ng-show="!addListing"> Add Listing
</button>
<button
class="btn btn-danger"
ng-click="addListing = !addListing"
ng-show="addListing"> Close
</button>
<div class="listing-form" ng-if="addListing">
<h4>Add a Listing</h4>
<div class="row listing-form-row">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input
type="text"
placeholder="Enter a Name"
class="form-control"
ng-model="newListing.name">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Price</span>
<input
type="text"
placeholder="Enter a Price"
class="form-control"
ng-model="newListing.price">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Address</span>
<input
type="text"
placeholder="Enter a address"
class="form-control"
ng-model="newListing.address">
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea
type="text"
placeholder="Enter a description"
class="form-control"
ng-model="newListing.description">
</textarea>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Allegiance</span>
<select
type="select"
name="propertyType"
id="propertyType"
class="form-control"
ng-model="newListing.details.allegiance">
<option value="Empire">Empire</option>
<option value="Rebels">Rebels</option>
<option value="Neutral">Neutral</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">Leader</span>
<input
type="text"
placeholder="Enter a Leader Name"
class="form-control"
ng-model="newListing.details.leader">
</input>
</div>
</div>
</div>
<button class="btn btn-primary listing-button" ng-click="addCrib(newListing)" ng-show="addListing">Add </button>
<pre> {{newListing | json}} </pre>
</div>
</div>
</div>
<div class="container">
<p id="desclaimer">(note: all prices are in Galactic Credits although some (Jabba) may accept barter)</p>
<div class="col-sm-4" ng-repeat="crib in cribs | cribsFilter:priceInfo"> <!--pass in priceInfor arg into cribsFilter(listing argument is assigned to the crib in crib as the first argument in a filter is always the current ng-repeat obj) -->
<div class="thumbnail">
<img class="thumbPic" ng-src="{{crib.image}}.jpg" alt="">
<div class="caption">
<div ng-hide="showDetails === true">
<h3>{{crib.name}}</h3>
<p><i class="glyphicon glyphicon-home"></i><strong>Address: </strong>{{crib.address}}</p>
<p><i class="glyphicon glyphicon-tag"></i><strong>Price: </strong>{{crib.price | currency}}</p>
</div>
<button class="btn btn-xs btn-success" ng-hide="showDetails === true" ng-click="showDetails = !showDetails">
Details
</button>
<button class="btn btn-xs btn-danger" ng-show="showDetails === true" ng-click="showDetails = !showDetails">
Details
</button>
<div class="deatils" ng-show="showDetails === true" ng-click="showDetails = !showDetails">
<h4>
<span class="">Allegiance: <p>{{crib.details.allegiance}}</p></span><br>
<span class="">Leader: <p>{{crib.details.leader}}</p></span>
</h4>
<p><strong>Description: </strong>{{crib.description}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
<footer>
<script src="js/vendor/angular.min.js"></script>
<script stc="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/CribsController.js"></script>
<script src="js/services/cribsFactory.js"></script>
<script src="js/filters/cribsFilter.js"></script>
</html>
<!-- http://localhost:8888/AngTest/ -->
Controller
app.controller('cribsController', ['$scope','cribsFactory', function($scope, cribsFactory) {
$scope.$watch.cribs=[];
$scope.priceInfo = { // set default date for priceInfo so that page is not blank on load
min: 0,
max: 1000000000000
}
$scope.addCrib = function(newListing) {
if(newListing) {
newListing.image = "img/swdefault"; //set default listing image
$scope.cribs.push(newListing); //push data into new listing
$scope.newListing = {}; // clear newlisting field
console.log($scope.cribs);
}
};
cribsFactory.success(function(data){
$scope.cribs = data;
});
}]);
here is a link to the git hub: https://github.com/ericbezanson/StarWarsBnB
and the github pages to see the issue: https://ericbezanson.github.io/StarWarsBnB/
any help would be GREATLY appreciated. thanks!

jQuery Validation Custom Errors

I am currently working on a project and having quite a difficult time with this plugin I managed to get it to work without custom errors one problem I ran across was if I have required tags on all elements email doesn't work but when I have it on just the email input it works. When I attempt to run the custom validation I get no errors upon hitting the submit button.
$(document).ready(function () {
$(".form-horizontal").validate( {
rules: {
name: "required", social: "required", postal: {
required: true, postal: true
}
,
phone: {
required: true, phone: true
}
,
email: {
required: true, email: true
}
}
,
messages: {
radio: "Please select a gender.", option: "Please select a province."
}
}
);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lab 5 Part B</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="name" class="form-control" id="inputName" name="inputName" placeholder="Your name">
</div>
</div>
<div class="form-group">
<label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="social" class="form-control" id="inputSocial" name="inputSocial" placeholder="(9 digits)">
</div>
</div>
<div class="form-group">
<label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Gender:</label>
<div class="col-lg-10">
<div class="radio">
<div class="status"></div>
<label>
<input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
</label>
<label>
<input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Province:</label>
<div class="status"></div>
<div class="col-lg-10">
<select class="form-control" name="selectProvince" id="selectProvince">
<option value="">Select One</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland & Labrador</option>
<option value="NS">Novia Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="postal" class="form-control" id="inputPostal" name="inputPostal" placeholder="(Ex: L8S5CR)">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" input="inputPhone" placeholder="(Ex: 905-321-4587)">
</div>
</div>
<div class="form-group">
<label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" input="inputEmail">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<hr>
<footer>
<p>© Jamie Steele 2016</p>
</footer>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>

In your validation rules, you need to use the input element's name, but in your case that is not matching
You have name="inputName" in the element but in rules you are using name
$(document).ready(function() {
$(".form-horizontal").validate({
rules: {
name: "required",
social: "required",
postal: {
required: true,
postal: true
},
phone: {
required: true,
phone: true
},
email: {
required: true,
email: true
}
},
messages: {
radio: "Please select a gender.",
option: "Please select a province."
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
<!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for="inputName" class="col-lg-2 control-label">Name:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="name" class="form-control" id="inputName" name="name" placeholder="Your name">
</div>
</div>
<div class="form-group">
<label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="social" class="form-control" id="inputSocial" name="social" placeholder="(9 digits)">
</div>
</div>
<div class="form-group">
<label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Gender:</label>
<div class="col-lg-10">
<div class="radio">
<div class="status"></div>
<label>
<input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male
</label>
<label>
<input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Province:</label>
<div class="status"></div>
<div class="col-lg-10">
<select class="form-control" name="selectProvince" id="selectProvince">
<option value="">Select One</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland & Labrador</option>
<option value="NS">Novia Scotia</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="postal" class="form-control" id="inputPostal" name="postal" placeholder="(Ex: L8S5CR)">
</div>
</div>
<div class="form-group">
<label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="phone" class="form-control" id="inputPhone" name="phone" placeholder="(Ex: 905-321-4587)">
</div>
</div>
<div class="form-group">
<label for="inputEmail:" class="col-lg-2 control-label">Email:</label>
<div class="status"></div>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" name="email">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
<hr>
<footer>
<p>© Jamie Steele 2016</p>
</footer>
</div>

Categories

Resources