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>
Related
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.
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'
]());
I have this dynamic form that lets me add more form inputs if user selects the + button or remove it if they select the - button. In this form I have a drop down selector I wanted to take this selector and make it so the user can select multiple options in the select box. I have included the select2 API however I am not able to select multiple options. Is there anything I can do to make this work?
var room = 1;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Dynamic Form Fields - Add & Remove Multiple fields - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- select2 boxes-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
</head>
<div class="panel panel-default">
<div class="panel-heading">Dynamic Form Fields - Add & Remove Multiple fields</div>
<div class="panel-heading">Education Experience</div>
<div class="panel-body">
<div id="education_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]">
<option value="">Date</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Next</button>
<div class="clear"></div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove form field :)</small></div>
</div>
<script type="text/javascript">
// select2 place holder text
$('#educationDate').select2({
placeholder: 'Pick An Option'
});
</script>
Select2 adopts to standard HTML attributes.
https://select2.org/configuration/options-api
You need to add multiple to your select
<select multiple
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!
I have the following HTML:
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://gregpike.net/demos/bootstrap-file-input/bootstrap.file-input.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post" > <input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' /> <div id="div_id_clustering_method_param" class="form-group"> <label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select> </div> </div> <div id="div_id_distance_method_param" class="form-group"> <label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select> </div> </div> <div class="form-group"> <div class="aab controls col-lg-2"></div> <div class="controls col-lg-8"> <input type="submit"
name="submit"
value="Submit"
class="btn btn-primary"
id="submit-id-submit"
/> </div> </div> </form>
<!--- END FORM DISPLAY-->
</body>
<html>
What I want to do is to set the condition. Namely the clustering method ward can only be applied with distance measure euclidean. If the user pass all other distance measure to ward it should return error message.
How can I do it using JavaScript?
To disable some of the menu options based on which option is selected, you can hook into the "on change" event for the first select element. Every time the first select element is changed, a bit of JavaScript then determines which options should be available in the second menu.
The following code uses an if-else block to show the general idea of how you can enable/disable the option elements in the second box. To make this solution more elegant, I would use a JavaScript object to keep track of which options in the second menu should be available when a certain option is selected in the first select element. Then whenever the first element is changed you can do a lookup and set the options in the second menu to be enabled or disabled as needed.
Live Demo:
var method = $("#id_clustering_method_param");
var dist = $("#id_distance_method_param");
function refreshOptions() {
// The following can be refactored to use a
// lookup instead if more option rules are needed.
if (method.find(':selected').text() === "Ward") {
dist.find("option[value='manhattan']").attr("disabled", true);
dist.find("option[value='pearsond']").prop("disabled", true);
} else {
dist.find("option").prop("disabled", false)
};
}
refreshOptions();
method.on("change", refreshOptions);
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' />
<div id="div_id_clustering_method_param" class="form-group">
<label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select>
</div>
</div>
<div id="div_id_distance_method_param" class="form-group">
<label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select>
</div>
</div>
<div class="form-group">
<div class="aab controls col-lg-2"></div>
<div class="controls col-lg-8">
<input type="submit" name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" />
</div>
</div>
</form>
<!--- END FORM DISPLAY-->
</body>
<html>