Develop Reference

Disabling couple input area if dropdown equal to 1

I am stuck up with this on my php page. I can't disable 3 input area after selected dropdown
I Just want to disable irrelevant input areas if type of slider selected like 1 otherwise do nothing
HTML Code which will use for condition:
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
HTML Code Which i want to disable if slider_type equal to 1
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>
I tried this JavaScript code lines for 1 input area but it's not worked
<script type="text/javascript">
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
</script>
What's really wrong?

You almost have done all the job, one thing that was missing is the actual call of the function DisableSliderInputArea once your select box has changed its' value. You needed to add an event listener, so once user changes the selected option, your function will get triggered, and the textarea will be disabled or enabled.
Feel free to run the snippet below, and see how it works. I added comments on the lines you need to add in JS section.
function DisableSliderInputArea() {
if (document.getElementById("slider_type").value == "1") {
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
// Get the select out of the DOM and store in a local variable
const dropdown = document.getElementById("slider_type");
// Attach an event listener, so once the select changes
// its' value, this function will be called
dropdown.addEventListener("change", DisableSliderInputArea);
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" onchange="DisableSliderInputArea()" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

you're almost done, just incorrectly putting onchange="DisableSliderInputArea()"
function DisableSliderInputArea(){
if(document.getElementById("slider_type").value=="1"){
document.getElementById("slider_title").disabled = true;
} else {
document.getElementById("slider_title").disabled = false;
}
}
<div class="form-group">
<label for="slider_type">Slider Type</label>
<select name="slider_type" class="form-select" id="slider_type" onchange="DisableSliderInputArea()" required>
<option value="" disabled selected>Please Select</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<label for="slider_title">Slider Title</label>
<input type="text" name="slider_title" id="slider_title" class="form-control round" placeholder="Slider Title" required>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_description">Slider Body</label>
<input type="text" name="slider_description" id="slider_description" class="form-control round" placeholder="Slider Body" required>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-group">
<label for="slider_button_link">Slider Button Link</label>
<input type="text" name="slider_button_link" id="slider_button_link" class="form-control round" placeholder="Slider Button Link" required>
</div>
</div>

jQuery form validation fails only on a specific input

I have a fairly straightforward validation function that only checks if input is empty or not. I'm using it across a half dozen different forms and it seems to be working everywhere except one specific input id="driver_first_name" . Can't figure out why it fails there.
If I leave all fields empty I get errors on all of them, and is generally correct across any combination I have tried except driver_first_name In the case that I fill out everything except driver_first_name the form submits anyways.
Any insight on what might be going on here?
Thank you!
My Validation function is this:
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result=false;
$.each( fields.rules, function( key, value ) {
if(!$("#"+key+"").val()){
$("#"+key+"").addClass("form-error");
$( "<div class='form-input-error'>"+value.message+"</div>" ).insertBefore("#"+key+"");
result = false;
//console.log(this.val());
}
else{
$("#"+key+"").removeClass("form-error");
result = true;
}
});
return result;
}
I am calling my validation on my submit triggers, generally like this for fields that should not be empty:
$(".app-canvas").on('click', ".submitNewDriver", function () {//list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if(validateForm($("#addDriverForm"),checkInputs) == true){
console.log("form submit");
addNewDriver();
}
else{
console.log("form errors");
}
});
My full form HTML is
<div class="form-wrapper">
<form id="addDriverForm" class="post-form" action="modules/add_driver.php" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<div class="submitNewUnit button green"><i class="material-icons">save</i>Submit</div>
</form>
</div>

Your validation logic is a little messed up. This is what's happening:
#driver_first_name is validated as invalid... result is set false
#driver_last_name is validated as valid... result is set true
#driver_address_street is validated as valid... result is set true
After all that the code thinks the form is valid. You're only preventing the form from being submitted if the last field as validated as not-valid.
Change your logic to assume the form is valid from the beginning. Then set it to false if any of the fields are invalid.
I also don't see anything in your code that actually prevents the form submition, so I also added e.preventDefault()
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result = true;
$.each(fields.rules, function(key, value) {
if (!$("#" + key + "").val()) {
$("#" + key + "").addClass("form-error");
$("<div class='form-input-error'>" + value.message + "</div>").insertBefore("#" + key + "");
result = false;
//console.log(this.val());
} else {
$("#" + key + "").removeClass("form-error");
}
});
return result;
}
$(".app-canvas").on('click', ".submitNewDriver", function(e) { //list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if (validateForm($("#addDriverForm"), checkInputs) == true) {
console.log("form submit");
} else {
e.preventDefault();
console.log("form errors");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-canvas form-wrapper">
<form id="addDriverForm" class="post-form" action="" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<input type="submit" class="submitNewDriver button green" value="Submit" />
</form>
</div>

Two Dynamic Forms via Select Option (datepicker)

I would like to choose between form_two and for_three in the main_form(fiddle at the bottom of the post). Under the main form should be one of the two forms(form_two/form_three). I can choose between the two forms, but they are not editable, because they are not in the source code, if I inspect the code with the browser.
I would like to have a datepicker from jquery in it, to submit the date. But I have got the problem, that I can see the two(form_two/form_three) different forms in the browser, but if I look in the source code, there is no form in the dom.
Here is my code:
Form to select one of these forms (main_form)
<!-- Content begin -->
<div id="content">
<form method="post" onsubmit="return false">
<fieldset name="inseration_option">
<legend>Inseratauswahl</legend>
<label for="choice">Auswahl:</label>
<select name="choice" id="choice" size="1">
<option value="joboffers" selected="selected">Jobangebot aufgeben</option>
<option value="workeroffers">Job finden</option>
</select>
<button value="ok" id="choice_btn" name="choice_btn" >Los</button>
</fieldset>
</form>
</div>
<div id="form"></div>
<!-- Content end -->
form_two
<!-- Content begin -->
<div id="content">
<form action="index.php?site=suche_inserat" method="post">
<fieldset name="search_option">
<legend>Suche Inserate</legend>
<fieldset>
<legend>Jobinformationen</legend>
<label for="j_select">Jobart:</label><br>
<select name="j_select" size="1">
<option>Gelegenheitsjob</option>
<option>Ausbildungsplatz</option>
<option>Praktika</option>
<option>Fachkräfte</option>
</select><br>
<label for="j_cat">Berufsfeld:</label><br>
<select name="j_cat" size="1">
<option>Bau, Architektur, Vermessung</option>
<option>Dienstleistung</option>
<option>Elektro</option>
<option>Gesellschaft-, Geisteswissenschaften</option>
<option>Gesundheit</option>
<option>IT, Computer</option>
<option>Kunst, Kultur, Gestaltung</option>
<option>Landwirtschaft, Natur, Umwelt</option>
<option>Medien</option>
<option>Metall, Maschinenbau</option>
<option>Naturwissenschaften</option>
<option>Produktion, Fertigung</option>
<option>Soziales, Pädagogik</option>
<option>Technik, Technologiefelder</option>
<option>Verkehr, Logistik</option>
<option>Wirtschaft, Verwaltung</option>
</select><br>
<label for="j_destrict">Stadtteil:</label><br>
<select name="j_destrict" size="1">
<option>Charlottenburg</option>
<option>Friedrichshain</option>
<option>Hellersdorf</option>
<option>Köpenick</option>
<option>Kreuzberg</option>
<option>Lichtenberg</option>
<option>Marzahn</option>
<option>Mitte</option>
<option>Neuköln</option>
<option>Pankow</option>
<option>Reinickendorf</option>
<option>Schöneberg</option>
<option>Spandau</option>
<option>Steglitz</option>
<option>Tempelhof</option>
<option>Treptow</option>
<option>Zehlendorf</option>
</select><br>
<label for="j_date">Gesucht ab Datum:</label><br>
<input type="date" name="j_date"><br>
<label for="j_cash">Vergütung:</label><br>
<input type="text" name="j_cash"><br>
<label for="j_title">Titel:</label><br>
<input type="text" name="j_title"><br>
<label for="j_desc">Beschreibung:</label><br>
<textarea name="j_desc"></textarea>
</fieldset>
<fieldset>
<legend>Auftraggeberinformationen</legend>
<label for="j_company">Unternehmen/Firma:</label><br>
<input type="text" name="j_company"><br>
<label for="j_street">Straße/Nr.:</label><br>
<input type="text" name="j_street"><br>
<label for="j_plz">PLZ:</label><br>
<input type="text" name="j_plz"><br>
<label for="j_town">Ort:</label><br>
<input type="text" name="j_town"><br>
<label for="j_pic">Foto/Logo:</label><br>
<input type="file" name="j_pic">
</fieldset>
<fieldset>
<legend>Kontaktinformationen</legend>
<label for="j_email">E-Mail-Adresse:</label><br>
<input type="text" name="j_email"><br>
<label for="j_phone">Telefonnummer:</label><br>
<input type="text" name="j_phone"><br>
<label for="j_fax">Fax:</label><br>
<input type="text" name="j_fax">
</fieldset>
<button name="search_btn">Inserieren</button>
</fieldset>
</form>
</div>
<!-- Content end -->
form_three
<!-- Content begin -->
<div id="content">
<form action="index.php?site=finde_inserat" method="post">
</fieldset>
<fieldset name="find_option">
<legend>Finde Inserat</legend>
<fieldset>
<legend>Jobinformationen</legend>
<label for="w_select">Jobart:</label><br>
<select name="w_select" size="1">
<option>Gelegenheitsjob</option >
<option>Ausbildungsplatz</option>
<option>Praktika</option>
<option>Fachkräfte</option>
</select><br>
<label for="w_cat">Berufsfeld:</label><br>
<select name="w_cat" size="1">
<option>Bau, Architektur, Vermessung</option>
<option>Dienstleistung</option>
<option>Elektro</option>
<option>Gesellschaft-, Geisteswissenschaften</option>
<option>Gesundheit</option>
<option>IT, Computer</option>
<option>Kunst, Kultur, Gestaltung</option>
<option>Landwirtschaft, Natur, Umwelt</option>
<option>Medien</option>
<option>Metall, Maschinenbau</option>
<option>Naturwissenschaften</option>
<option>Produktion, Fertigung</option>
<option>Soziales, Pädagogik</option>
<option>Technik, Technologiefelder</option>
<option>Verkehr, Logistik</option>
<option>Wirtschaft, Verwaltung</option>
</select><br>
<label for="w_destrict">Stadtteil:</label><br>
<select name="w_destrict" size="1">
<option>Charlottenburg</option>
<option>Friedrichshain</option>
<option>Hellersdorf</option>
<option>Köpenick</option>
<option>Kreuzberg</option>
<option>Lichtenberg</option>
<option>Marzahn</option>
<option>Mitte</option>
<option>Neuköln</option>
<option>Pankow</option>
<option>Reinickendorf</option>
<option>Schöneberg</option>
<option>Spandau</option>
<option>Steglitz</option>
<option>Tempelhof</option>
<option>Treptow</option>
<option>Zehlendorf</option>
</select><br>
<label for="w_date">Verfügbar ab Datum:</label><br>
<input type="text" name="w_date" id="w_date"><br>
<label for="w_cash">Vergütung:</label><br>
<input type="text" name="w_cash"><br>
<label for="w_title">Titel:</label><br>
<input type="text" name="w_title"><br>
<label for="w_desc">Beschreibung:</label><br>
<textarea name="w_desc"></textarea><br>
<label for="w_pic">Profilbild/Foto:</label><br>
<input type="file" name="w_pic">
</fieldset>
<fieldset>
<legend>Kontaktinformationen</legend>
<label for="w_email">E-Mail-Adresse:</label><br>
<input type="text" name="w_email"><br>
<label for="w_phone">Telefonnummer:</label><br>
<input type="text" name="w_phone"><br>
<label for="w_fax">Fax:</label><br>
<input type="text" name="w_fax">
</fieldset>
<button name="find_btn">Inserieren</button>
</fieldset>
</form>
</div>
And the JS File
$(document).ready(function(){
var pfad = "";
$("#choice_btn").click(function(){
//console.log($("#choice").val());
if ( $("#choice").val() == "joboffers" ){
pfad = "sites/suche_inserat.php";
}else{
pfad = "sites/finde_inserat.php";
//console.log($("#choice").val());
}
$( "#form" ).load( pfad );
$( "#w_date" ).datepicker();
/*
$.ajax({
url: pfad,
type: "POST",
async: true,
success: function(callback) {
//console.log(callback);
$("#form").innerHTML(callback);
}
})
*/
})
});
Sorry for my english!! I hope somebody can help me!
edit: Here is a fiddle: click
(I do not know, how to make more html windows in fiddle) :(

I made it this way(jsfiddle) now. Maby could someone have a look at it.
I have took all forms in one file. So I do not need three diffrent files and have to load them into it.
$(document).ready(function(){
$("#form_1").hide();
$("#form_2").hide();
$("#choice_btn").click(function(){
if ( $("#choice").val() == "joboffers" ){
$("#form_2").hide();
$("#form_1").show();
}else{
$("#form_1").hide();
$("#form_2").show();
}
})
$("#j_date").datepicker();
$("#w_date").datepicker();
});

Simplify angular controller posting to Firebase using AngularFire

I'm new to angular but picking it up quickly. I have this controller that works, based on demo code ive hacked together, but there has to be an easier cleaner way to get all the fields and post so if i want to add a new field i dont need to keep adding it in the various locations.
Heres the controller:
'use strict';
angular.module('goskirmishApp').controller('addEvent', function ($scope, fbutil, $timeout) {
// synchronize a read-only, synchronized array of messages, limit to most recent 10
$scope.messages = fbutil.syncArray('messages', {limit: 10});
// display any errors
$scope.messages.$loaded().catch(alert);
// provide a method for adding a message
$scope.addMessage = function(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink) {
if( newEventName ) {
// push a message to the end of the array
$scope.messages.$add({
eventName: newEventName,
eventType: newEventType,
startDate: newStartDate,
startTime: newStartTime,
endDate: newEndDate,
endTime: newEndTime,
eventDescription: newEventDescription,
address: newAddress,
postcode: newPostcode,
ticketInformation: newTicketInformation,
bookLink: newBookLink
})
// display any errors
.catch(alert);
}
};
function alert(msg) {
$scope.err = msg;
$timeout(function() {
$scope.err = null;
}, 5000);
}
});
And the view:
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="newEventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="newEventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newStartDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newStartTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newEndDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newEndTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="newEventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="newAddress">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="newPostcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="newTicketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="newBookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink,newLat,newLong,newApproved);newEventName = null;newEventType = null;newStartDate = null;newStartTime = null;newEndDate = null;newEndTime = null;newEventDescription = null;newAddress = null;newPostcode = null;newTicketInformation = null;newBookLink = null;">Add Event</button>
</form>
Help is greatly appreciated!

Define all your input in a object that you will be directly send send to firebase
For example init in your controller this :
$scope.form = {};
After in your template just define your input as 'form attributes'.
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="form.eventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="form.eventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.startDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.startTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.endDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.endTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="form.eventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="form.address">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="form.postcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="form.ticketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="form.bookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage()">Add Event</button>
</form>
and directly in your addMessage function
$scope.addMessage = function() {
if( $scope.form.eventName ) {
// push a message to the end of the array
$scope.messages.$add($scope.form)
// display any errors
.catch(alert);
//Reset your form
$scope.form = {};
}
};

Javascript hide/show questions depending on user input values

I am trying to hide and/or show form elements when a user selects certain values.
For example, if the user selects "yes" to the consent question, I need it to show a few questions, However, if they change their response to the consent question, I need it to hide those questions.
Here is what I have come up with so far...
$(document).ready(function () {
var input = document.getElementById('consent');
var consent_responses = [{ "0": hideConsent },{ "1": showConsent }];
input.addEventListner('click', function () {
var consent_response;
if (consent_responses[this.value]) {
content_response = consent_responses[this.Function()]
}
else {
content_response = consent_responses[this.Function]
}
});
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
function hideConsent(){
$("#date").hide(),
$("#referrer").hide(),
$("#f_name").hide(),
$("#phone_num").hide(),
$("#leave_msg").hide(),
$("#email").hide(),
}; });
Fiddle here: http://jsfiddle.net/7jX47/1/

You could do it like this: JSFiddle
Basically I only fixed a few typos (did you actually try your code before you posted here?) and added event listeners to the radio buttons with
document.getElementById(...).addEventListener(...)
I also gave your radio buttons unique IDs.

This can be simplified:
var input = document.getElementById('consent');
// Let's use the value as key, and the functions as values
var consent_responses = {
"0" : hideConsent,
"1" : showConsent
};
input.addEventListener("click", function () {
// Get the appropriate function given the value, and invoke it
consent_responses[this.value]();
});
function hideConsent() {
// ...
}
function showConsent() {
// ...
}

It's better to envelop your questions (that needs to be hidden) by a div with a class ".hidden" or style "display: none;". And simplify your code by simply asking that div to show() or hide() when needed.
Like so:
<form id="screening">
<div class="col-md-12 col-sm-12 col-xs-12 nopad" id="create">
<div class="form-group text-center">
<b>Do you agree to answer the screening questions?</b><br />
<div class="radio" id="consent">
<label>
<input type="radio" name="consent" id="consent" value="1">
Yes, I consent
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="consent" id="consent" value="0">
No, I do not consent
</label>
</div>
</div>
<!-- simplify by using this -->
<div id="questions" style="display: none;">
<div class="form-group" id="date">
<label for="date">What is today's date?</label>
<input type="date" class="form-control" id="date" name="date" />
</div>
<div class="form-group" id="referrer">
<label for="referrer">How did you hear about us/our studies?</label>
<select class="form-control" name="referrer" id="referrer">
<option></option>
<option value="1">Flyers</option>
<option value="2">Print Media</option>
<option value="3">A friend</option>
<option value="4">Online (e.g., Craigslist)</option>
<option value="5">Other</option>
</select>
</div>
<div class="form-group" id="other_explain">
<label for="other_explain">Please specify other source.</label>
<textarea class="form-control" rows="3" id="other_explain" name="other_explain"></textarea>
</div>
<div class="form-group" id="f_name">
<label for="f_name">What is your first name?</label>
<input type="text" class="form-control" id="f_name" name="f_name" />
</div>
<div class="form-group" id="phone_num">
<label for="phone_num">What is a phone number at which you can be contacted? </label>
<input type="tel" class="form-control" id="phone_num" name="phone_num" />
</div>
<div class="form-group" id="leave_msg">
<label for="leave_msg">If we call and you are not available, may we leave a message?</label><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="1">
Yes
</label>
</div><br />
<div class="radio">
<label>
<input type="radio" name="leave_msg" id="leave_msg" value="0">
No
</label>
</div>
</div>
<div class="form-group" id="email">
<label for="email">What is an e-mail at which you can be contacted?</label>
<input type="email" class="form-control" id="email" name="email" />
</div>
</div>
</div>
</form>
and in your javascript instead of using this:
function showConsent(){
$("#date").show(),
$("#referrer").show(),
$("#f_name").show(),
$("#phone_num").show(),
$("#leave_msg").show(),
$("#email").show(),
};
you use:
function showConsent(){
$("#questions").show(),
};