We Keep Coding

node js get select variable based on database value

I have a number of dropdowns like this
code:
<label for="schoolType">
Type of School <span style="color: red">*</span>
</label>
<select class="form-control" id="schoolType" name="schoolType" value="{{user.schoolType}}">
<option value="none">None</option>
<option value="public">Public</option>
<option value="private">Private</option>
<option value="homeSchool">Home School</option>
</select>
and the database field is like so
What I'm trying to accomplish
This is a select field that is filled out in registration so I want to grab the value from the database and display it in the edit profile so the users can edit their profiles and change the select if need be.
But as the user refreshes I want the option that they select to be in the select as the selected value.
For reference I am using node.js, express and the handlebars templating engine.

To solve an issue like this, I will advise you to fetch the value selected by the user before, store it in a variable and use a ternary operator to activate it. An actual example is given below.
var selectedValue = user.schoolType;
<select class="form-control" id="schoolType" name="schoolType" value="
{{user.schoolType}}">
<option value="none" selected="{{user.schoolType ===
this.value}}">None</option>
<option value="public" selected="{{user.schoolType ===
this.value}}">Public</option>
<option value="private" selected="{{user.schoolType ===
this.value}}">Private</option>
<option value="homeSchool" selected="{{user.schoolType ===
this.value}}">Home School</option>
</select>

validating single set of fields on click using Jquery validate

Ive made a form that has several sections, later sections are hidden but will be displayed after a user clicks a next button on current section. Im trying to do simple "must be filled" validation on this click before the rest of the form is displayed.
As far as i can gather from other questions on here my method should work.. var validate should equal true if errors are found which will stop the form progressing but will allow the form to progress once the fields have been filled and the button is clicked again
However all this seems to do at the moment is validate the very first field and then do nothing. Even if the field is valid it still will not progress with the rest of the actions on the function.
js library : http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js
method im trying to use: http://jqueryvalidation.org/Validator.element/
<div class="col-sm-8 sec-one">
<div class="form-group">
<select name="t1" required>
<option value="" disabled selected>Choose an option...</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="A">A</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group">
<select name="t2" required>
<option value="" disabled selected>Choose an option...</option>
<option value="A">A</option>
<option value="D">D</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<button type="button" class="formbut next1">Next</button>
</div>
var validator = $("form").validate();
$(".next1").click(function () {
validator.element('.sec-one [name]');
if (validator) {
$(".sec-one").slideUp("slow", function () {
$(".sec-two").slideDown("slow");
});
} else {}
});

"As far as i can gather from other questions on here my method should work.. var validate should equal true if errors are found"
I'm not sure where you saw that. In your code, you've dropped the element() part from your conditional. And $('#yourform').validate().element() is supposed to return true if there are no errors.
var validator = $("#myform").validate(); // create the validator variable
validator.element("#myselect"); // test an element
Better way...
Refer to the official website and simply use the .valid() method to test the form and/or individual elements. A true indicates no errors.
$('#myform').valid();
or
$('input[name="myelement"]').valid();

Javascript Calculation script to calculate form input value's then save as hidden input for page2.php

So ive been spending the last week trying to figure out what im doing wrong.. i have tried to use several other scripts posted to other stack overflow users but can not seem to get anything to do what i need it to do, im still learning html, php and java script so everything is taking me a little while, so any help, advice or input is greatly appreciated.
So in my form i have several input fields that are selection fields, here is some for example:
</div>
<div class="form-field">
<label class="frm">*Approx Property Value</label>
<select name="fldAPV" title="Approx_Property_Value" id="fldAPV" class="form-action select-details">
<option value="100" selected="selected">Select value</option>
<option value="100">£0 - £100,000</option>
<option value="200">£100,001 - £200,000</option>
<option value="300">£200,001 - £300,000</option>
<option value="400">£300,001 - £400,000</option>
<option value="500">£400,001 - £500,000</option>
<option value="600">£500,001 - £600,000</option>
<option value="700">£600,001 - £700,000</option>
<option value="800">£700,001 - £800,000</option>
<option value="9000">£800,001 - £900,000</option>
<option value="1Million">£900,001 - £1,000,000</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Number of Bedrooms</label>
<select name="fldNOBEDS2" title="Number_Of_Bedrooms" id="fldNOBEDS2" class="form-action select-details">
<option value="Not_Sure" selected="selected">I'm Not Sure</option>
<option value="1">1 Bedroom</option>
<option value="2">2 Bedrooms</option>
<option value="3">3 Bedrooms</option>
<option value="4">4 Bedrooms</option>
<option value="5">5 Bedrooms</option>
<option value="6">6 Bedrooms</option>
<option value="7">7 Bedrooms</option>
<option value="8+">8 Bedrooms +</option>
</select>
</div>
<div class="form-field">
<label class="frm">*Reason for Survey</label>
<select name="fldRFS" title="Reason for Survey" id="fldRFS" class="form-action select-details">
<option value="Not-Sure" selected="selected">Not Sure</option>
<option value="Selling">Selling</option>
<option value="Buying">Buying</option>
<option value="Other-Reason">Other Reason</option>
</select>
Now what i am trying to achieve is to have a javascript that will calculate the input value on each field the user selects his/hers answer.. My initial thoughts was to do it with each value="" having a default price value so for example the reason for survey fields, instead of saying "Not-Sure" or "Buying" they will say "50" or "100" to represent the cost of the service.
Is it possible to have a script that would understand code like this for example:
Buying
The reason i say this is i am hoping the value's don't make things confusing, if not then i am happy to use the value="50" for example to determine what the overall cost of the service will be. I guess its the client basically putting together their own package.
The most important part of the script is to make the calculation hidden, so when clicking (View Quote) the form will submit the data either by $_GET or $_POST to page2.php where the client can view their quoted price.
I really hope i have not confused everyone! i see people post very small posts and they seem to get it on the head in one, i can not stress enough i am still learning and we all started somewhere :) This is for my own personal website and one hopes some kind experienced member can help me out, anything is much appreciated as i have spent 6 days trying to figure this out, Thanks!
King Regards

PHP on page2.php:
<?php
If(isset($_POST['submit'])){
$Quote = $_POST['fldST'] + $_POST['fldAPV'] //... For all nummeric Fields
Switch ($_POST['fldPropertyType']){
/* Use the Switch Statement if you want to compare the same variable
(or expression) with many different values, and execute a different piece of code
depending on which value it equals to. */
case 'Semi':
$Quote = $Quote + 20; //Replace 20 wit you're Value
case 'Terraced':
$Quote = $Quote + 50;
//... For all cases
}
//Other Code and Page Content
echo $Quote;
}
else{
//ERROR Page was accessed without filling the form in.
}
?>
I hope this gives you an good Idea how to do it. Not every Client has Javascript enabeld and you don't know about their Maschine Performance. ist the better way to calculate via PHP.
Importend: NEVER echo/print/use POST/GET Variables direktly! Thats a big leck of Security. Always Filter your User Inputs to prevent Cross-Site-Scripting (XSS)
http://phpsec.org/projects/guide/2.html
http://resources.infosecinstitute.com/website-hacking-part-vi-input-validation-filtering-php/
http://phpsec.org/projects/guide/1.html#1.4.3
<---------------------------------------------- Update ----------------------------------->
When using the code above, Dreamweaver is saying that
Switch ($_POST['fldPropertyType']){
has a syntax error. Would this affect the script running before I add all the values or is it something simple to rectify?
Thanks

HTML:
<form>
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
<button type="submit">continue</button>
</form>
Javascript:
$('button').on('click', function(e) {
e.preventDefault();
var total = 0;
$('select').each(function(){
total += Number($(this).val());
});
$.ajax({
type: 'POST',
url: 'page2.php',
data: { total: total },
dataType: 'json',
success: function(result){
console.log(result);
}
});
});
PHP:
header('Content-Type: application/json');
echo JSON_encode($_POST['total']);

Getting a selected value from select box doesnt work

I made a function populating one select box using values from another select box when clicked and it works pretty well for the most of my selectboxes in the system but I am struggling with this one now lol:
function for testing the selected value and alerting if found:
function updateSelectBox(parent, child){
for(i = 0; i < document.getElementById(parent).length; i++){
if(document.getElementById(parent).options[i].selected){
alert(document.getElementById(parent).options[i].value);
}
}
this one when selected doesnt alert:
<input type="hidden" name="data[Series][3][Profession][Profession]" value="" id="Professions3_">
<select name="data[Series][3][Profession][Profession][]" multiple="multiple" id="Professions3" onchange="updateSelectBox("Professions3", "Specialisms3");">
<option value="24">Scientist</option>
and this is alerting when selected:
<input type="hidden" name="data[Series][4][Profession][Profession]" value="" id="Professions4_">
<select name="data[Series][4][Profession][Profession][]" multiple="multiple" id="Professions4" onchange="updateSelectBox("Professions4", "Specialisms4");">
<option value="24">Scientist</option>
this is the full html output from different selectbox that is also WORKING
<div class="input select"><label for="Zones">Zones</label><input type="hidden" name="data[Series][0][Zone][Zone]" value="" id="Zones_">
<select name="data[Series][0][Zone][Zone][]" multiple="multiple" id="Zones" onchange="updateSelectBox("Zones", "Countries");">
<option value="4">Europe</option>
</select>
</div>

This doesn't work. Even if it works on your page, the code in your post cannot work: your JavaScript is missing closing brackets, you're using HTLM with double quotes inside of double quotes, no one will be able to run this. So let's step back and rewrite this to something that'll definitely work:
HTML
<select onchange="updateSelectBox(this);">
<option value="0">Scientist 1</option>
<option value="12">Scientist 2</option>
<option value="24">Scientist 3</option>
</select>
JS
function updateSelectBox(selectBox) {
var sid = selectBox.selectedIndex;
var selectedOption = selectBox.children[sid];
console.log(selectedOption);
}
Now we at least have something we know works, using the minimal amount of code, that we can build back out. I'd recommend using this to build up the HTML and function you have right now. You definitely need to stop using so many strings and lookups, for instance. Especially trusting strings to not have typos is going to ruin your day (your have an input called 'Professions3_' and a select called 'Professions3'... this is just asking for trouble)

dynamic dropdown list ( select boxes )

Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.

First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com

Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.