We Keep Coding

How to make a Multi Role for different dashboard

I want to make a role in one login form for different admin users. But when I try to select finance in the dropdown menu I still get to enter the admin dashboard, not the finance dashboard. my db roles are called 'admin' and 'finance'.
This is my login form:
this is what I have so far:
<form method="post" name="login_form">
<div class="form-group">
<input class="form-control form-control-lg" id="username" alt="username" type="text" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control form-control-lg" id="password" type="password" alt="password" placeholder="Password" autocomplete="off">
</div>
<div class="input-group mb-3">
<select type="text" class="form-control" name="type" required="">
<option value="" disabled="" disabled="" selected="true">--Select Role--</option>
<option value="admin">Admin</option>
<option value="finance">Finance</option>
</select>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="remember" onclick="myFunction()"><span class="custom-control-label">Show Password</span>
</label>
</div>
<div class="form-group">
<button class="btn btn-lg btn-block button3" ;color: rgb(243, 245, 238) !important;" value="Sign in" id="btn-login" name="btn-login">Log in</button>
</div>
<div class="form-group" id="alert-msg">
</form>
am I missing something?
<script type="text/javascript">
jQuery(function(){
$('form[name="login_form"]').on('submit', function(e){
e.preventDefault();
var u_username = $(this).find('input[alt="username"]').val();
var p_password = $(this).find('input[alt="password"]').val();
// var s_status = 1;
if (u_username === '' && p_password ===''){
$('#alert-msg').html('<div class="alert alert-danger"> Required Username and Password!</div>');
}else{
$.ajax({
type: 'POST',
url: 'init/controllers/login_process.php',
data: {
username: u_username,
password: p_password
//status: s_status
},
beforeSend: function(){
$('#alert-msg').html('');
}
})
.done(function(t){
if (t == 0){
$('#alert-msg').html('<div class="alert alert-danger">Incorrect username or password!</div>');
}else{
$("#btn-login").html('<img src="assets/images/loading.gif" /> Signing In ...');
setTimeout(' window.location.href = "documents/index.php"; ',2000);
}
});
}
});
});
</script>
<script>
function myFunction() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>

form onSubmit not reading return status it seems

I feel stupid not knowing why this isn't working, seems simple enough. I have a form and trying to validate it using onSubmit="return validateForm()" however if you submit it with none of the fields that are required filled in which would result in a "false" it is submitting to itself.
Javascript:
function validateForm(){
var errorFlag = true;
var fields = $("input.required");
var currFlag = true;
var i;
for(i=0; i < fields.length; i++){
var myName = $(fields[i]).attr("name");
if(myName == "payment_method"){
if($('input[name=payment_method]:checked').val().trim() == "credit card"){
var ad1 = $("#address").val().trim();
var adC = $("#city").val().trim();
var adS = $("#state").val().trim();
var adZ = $("#zip").val().trim();
if(ad1 == "" || adC == "" || adS == "" || adZ == ""){
$("#address-error").addClass("showError");
errorFlag = false;
}
}else{
$("#address-error").removeClass("showError");
}
}else{
currFlag = checkField($(fields[i]));
if(!currFlag){
errorFlag = false;
}
}
}
return errorFlag;
}
function checkField(target){
var myType = $(target).attr("type");
var myValue = $(target).val().trim();
var myName = $(target).attr("name");
var errorFlag = true;
if((myType == "text" || myType == "number") && (myValue == "" || myValue == " ")){
$("#"+myName+"-error").addClass("showError");
errorFlag = false;
}else if(myType == "email" && !validateEmail(myValue)){
$("#"+myName+"-error").addClass("showError");
errorFlag = false;
}else{
$("#"+myName+"-error").removeClass("showError");
errorFlag = true;
}
return errorFlag;
}
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
The the form consists of text boxes mostly, but there is a set of radio buttons and if the first if statement in validateForm() is hit, meaning the user selected credit card then everything is fine and the form recognizes the return false. But if they just submit the form with absolutely nothing marked then it just refreshes the page as if it is submitting.
even if I just put "return false;" it still doesn't stop it. It is just very weird.
html of form is below.
<form class="span6" name="bookingForm" action="" onSubmit="return validateForm()" method="post">
<section class="grid12">
<h4 class="span12">Contact Information</h4>
<div id="first-name-error" class="error span12"><i class="fas fa-exclamation-circle"></i> Oops it looks like you may have forgotten to fill this out</div>
<label class="span12" for="first-name">First Name (required)
<input class="required" type="text" id="first-name" name="first-name">
</label>
<div id="last-name-error" class="error span12"><i class="fas fa-exclamation-circle"></i> Oops it looks like you may have forgotten to fill this out</div>
<label class="span12" for="last-name">Last Name (required)
<input class="required" type="text" id="last-name" name="last-name">
</label>
<div id="email-error" class="error span12"><i class="fas fa-exclamation-circle"></i> The email entered is invalid</div>
<label class="span12" for="email">Email (required)
<input class="required" type="email" id="email" name="email">
</label>
<label class="span12" for="phone">Phone Number (required for credit card payment)
<input type="text" id="phone" name="phone">
</label>
</section>
<section class="grid12">
<h4 class="span12">Booking Details</h4>
<div id="arrivalPicker-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need to know when you would like to stay</div>
<label class="span6" for="arrivalPicker">Arrival (required)
<input class="dateInput required" id="arrivalPicker" type="text" name="arrivalPicker">
</label>
<label class="span6" for="departPicker">Depart (required)
<input class="dateInput required" id="departPicker" type="text" name="departPicker">
</label>
<label class="span6" for="adults">Number of Adults (required)
<input class="required" type="number" id="adults" name="adults" value="1" min="1">
</label>
<label class="span6" for="children">Number of Children (required)
<input type="number" id="children" name="children" min="0" value="0">
</label>
<span class="span12"><em>Our condo can hold a maximum occupancy of 6 persons. You may add 1 extra person but will be charged $30/night from the resort</em></span>
</section>
<section class="grid12">
<h4 class="span12">Preferred Payment Method</h4>
<p class="span12">We understand the importance of your information. If choosing "Credit Card by Phone", be assured we do not write down any of your credit card information or keep it for ourselves. We enter it right into the secured Las Palomas reservation system. If you still have doubts then please feel free to use the more secure bank to bank transfer method.</p>
<fieldset class="span12">
<div id="payment-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need to know how you would like to pay</div>
<legend>Choose Your Method</legend>
<ul>
<li>
<label for="payment_method">
<input class="required" type="radio" id="creditCard" name="payment_method" value="credit card">
Credit Card by Phone
</label>
</li>
<li>
<label for="bankTransfer">
<input type="radio" id="bankTransfer" name="payment_method" value="bank transfer">
Bank Transfer
</label>
</li>
</ul>
</fieldset>
<div id="address-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need your address for credit card transactions</div>
<label class="span12" for="address">If you chose "Credit Card by Phone" please include your Address below
<input type="text" id="address" name="address">
</label>
<label class="span4" for="city">City
<input type="text" id="city" name="city">
</label>
<label class="span4" for="state">State
<input type="text" id="state" name="state">
</label>
<label class="span4" for="zip">Zip Code
<input type="text" id="zip" name="zip">
</label>
</section>
<section class="grid12">
<h4 class="span12">Optional Items</h4>
<label class="span12" for="hear">How Did You Hear About Us?
<input type="text" id="hear" name="hear">
</label>
<label class="span12" for="comments">Any Comments or Questions?
<textarea id="comments" name="comments"></textarea>
</label>
</section>
<hr />
<section class="grid12">
<label class="span12">
<input type="checkbox" name="newsletter" value="Yes"> I would like to <strong>sign-up</strong> for your <strong>newsletter</strong><br>(we will only save your name and email address into a secure database for our future newsletter email list, we will NEVER share your contact information)
</label>
<div id="first-name-error" class="error span12"><i class="fas fa-exclamation-circle"></i> We need to have your consent to store your contact information for our newsletter (and only our newsletter)</div>
<label class="span12">
<input type="checkbox" name="gdpr" value="I agree"> I consent to having this website store my name and email address in order to add me to their online Newsletter list.<br><br>
</label>
<div class="g-recaptcha span12" data-sitekey="6LcW_C0UAAAAAOS1pFLC-A0QhnTvZW8Xi9Yi88z9"></div>
<input type="submit" value="Submit Your Inquiry" class="continue">
</section>
</form>
I will admit I haven't coded in awhile so maybe I made some simple mistake in the form set up.

You need to prevent the default form submission in your function:
function validateForm(event) {
event.preventDefault();
And your event listener should look like this:
<form onsubmit="validateForm(e)">

Data From Svc Not Modeling Into View Elements AngularJS

I have a view that is modeled to functions which pass data through to a database. This is all working and I see the data coming back when called, but it is not pre-populating the fields in my view when it comes back. I've been banging my head for a while on this. Everything is modeled (from what I can tell) properly.
I have stepped through the JS code below in Chrome and see the data being assigned to my $scope variables from the data.XXX return.
But, after load finishes, it's not preselecting my radio button or populating the fields with the data. Any help greatly appreciated.
Here is the View:
<div class="notification-container">
<form name="notificationForm" class="form-horizontal" ng-submit="saveQrNotifications()">
<div class="list-unstyled">
<input id="text" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="text" type="radio" ng-value="1001"> Text Message<br>
<input id="email" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="email" type="radio" ng-value="6"> Email<br>
<input id="voice" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="voice" type="radio" ng-value="1003"> Voice<br>
<input id="nocontact" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="nocontact" type="radio" ng-value="1000"> Do Not Contact<br>
</div>
<div class="col-md-12 notification-fields" ng-show="notifyFieldVisibility == true">
<div class="col-md-12" ng-if="NotificationMethods.NotificationMethodId == '1001'">
<label class="notication-input">Text Number</label>
<span class="clearfix"></span>
<input class="form-control area-code" type="text" ng-model="NotificationMethods.NotificationTextAreaCode" placeholder="(555)" required>
<input class="form-control phone-number" type="text" ng-model="NotificationMethods.NotificationTextPhoneNumber" placeholder="555-5555" required>
</div>
<div class="col-md-12" ng-if="NotificationMethods.NotificationMethodId == '6'">
<label class="notification-input" for="email">E-mail Address
<input class="form-control" id="email" name="email" type="text" ng-model="NotificationMethods.NotificationEmailAddress" placeholder="ex.me#example.com" required>
</label>
</div>
<div class="col-md-12" ng-if="NotificationMethods.NotificationMethodId == '1003'">
<label class="notication-input">Voice Number </label>
<span class="clearfix"></span>
<input class="form-control area-code" type="text" ng-model="NotificationMethods.NotificationVoiceAreaCode" placeholder="(555)" required>
<input class="form-control phone-number" type="text" ng-model="NotificationMethods.NotificationVoicePhoneNumber" placeholder="555.5555" required>
<label class="small">Ext.</label>
<input class="form-control extension" type="text" ng-model="NotificationMethods.NotificationVoiceExtension" placeholder="555">
</div>
<span class="clearfix"></span>
<div ng-show="notifyLoading" class="text-center" style="margin-top: 10px;">
<i class="fa fa-spinner fa-spin"></i> Saving...
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary notification-btn">Save Notifications</button>
</div>
</div>
</form>
</div>
Here is my controller:
DATA COMING FROM DB:
if (data.StatusCode == "SUCCESS") {
$scope.refill = data;
//$scope.deliverTypes = data.DeliveryTypes;
$scope.showError = false;
$scope.submitRefill = true;
$scope.findRefillStatus = userMessageService.QuickRefillMessage(data.Prescriptions[0]);
$scope.isRefillable = data.Prescriptions[0].IsRefillable;
$scope.prescription.noPrescription.$valid = true;
$scope.loading = false;
$scope.NotificationMethods.NotificationEmailAddress = data.NotificationEmailAddress;
$scope.NotificationMethods.NotificationMethodId = data.NotificationMethodId;
$scope.NotificationMethods.NotificationTextAreaCode = data.NotificationTextAreaCode;
$scope.NotificationMethods.NotificationTextPhoneNumber = data.NotificationTextPhoneNumber;
$scope.NotificationMethods.NotificationVoiceAreaCode = data.NotificationVoiceAreaCode;
$scope.NotificationMethods.NotificationVoicePhoneNumber = data.NotificationVoicePhoneNumber;
$scope.NotificationMethods.NotificationVoiceExtension = data.NotificationVoiceExtension;
}

Figured it out. I was declaring the controller on the view used in ng-include. Removing that and letting the view inherit controller from surrounding view solved issue.

Javascript results need to capture in php to email

I have a form where I have a total of 11 checkboxes for the user to select from. I want to be able to capture which particular checkbox the user has selected and be able to send that out via email. I am currently using php to do that.
I am able to capture the value and display it as an alert using Javascript. However, I am unable to figure out how I could possibly take that specific data captured using javascript and be able to pass it to PHP.
I am very unfamiliar with PHP and have tried to pass a variable through but have failed. See link for my code in further detail.
<!-- Modal Body -->
<div class="modal-body">
<p>Please fill out the information below.</p>
<form class="j-forms" style="box-shadow: none;"
id="TSCreatePackageForm" role="form" method="post"
action="php/customPackage.php">
<!-- Company Name -->
<div class="span6 unit">
<label class="label">Company Name</label>
<div class="input">
<label class="icon-right" for="tscpCompanyName">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpCompanyName" name="tscpCompanyName"
placeholder="e.g XYZ Company">
</div>
</div>
<!-- Business Entity Type -->
<div class="span6 unit">
<label class="label">Business
Entity Type</label>
<div class="input">
<label class="icon-right" for="tscpBusinessType">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpBusinessType" name="tscpBusinessType"
placeholder="(I.E. Corporation, LLC,ETC)">
</div>
</div>
<!--Years in Business -->
<div class="span6 unit">
<label class="label">Years In Business</label>
<div class="input">
<label class="icon-right" for="tscpYears">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpYears" name="tscpYears" placeholder="e.g. 5">
</div>
</div>
<!-- Number of Units -->
<div class="span6 unit">
<label class="label">Number of units Owned/Managed</label>
<div class="input">
<label class="icon-right" for="tscpNumberOfUnits">
<i class="fa fa-briefcase"></i>
</label>
<input type="text" id="tscpNumberOfUnits" name="tscpNumberOfUnits"
placeholder="e.g. 525">
</div>
</div>
<!-- First Name -->
<div class="span6 unit">
<label class="label">First Name</label>
<div class="input">
<label class="icon-right" for="tscpFirstName">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpFirstName" name="tscpFirstName"
placeholder="e.g John">
</div>
</div>
<!-- Last Name -->
<div class="span6 unit">
<label class="label">Last Name</label>
<div class="input">
<label class="icon-right" for="tscpLastName">
<i class="fa fa-user"></i>
</label>
<input type="text" id="tscpLastName" name="tscpLastName"
placeholder="e.g Doe">
</div>
</div>
<!-- Email -->
<div class="span6 unit">
<label class="label">Email</label>
<div class="input">
<label class="icon-right" for="tscpEmail">
<i class="fa fa-mail"></i>
</label>
<input type="text" id="tscpEmail" name="tscpEmail"
placeholder="e.g John#therrd.com">
</div>
</div>
<!-- Phone Number -->
<div class="span6 unit">
<label class="label">Phone</label>
<div class="input">
<label class="icon-right" for="tscpNumber">
<i class="fa fa-phone"></i>
</label>
<input type="text" placeholder="phone/mobile" id="tscpNumber"
name="tscpNumber">
<span class="tooltip tooltip-right-top">Your contact phone number</span>
</div>
</div>
<!-- Services -->
<div class="span12 unit">
<label class="label">Please Select Services You're Interested In:</label>
<div class="span6">
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService1"
value="Incident Reporting Database" checked>
<i></i>
Incident Reporting Database
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService2"
value="Rapsheet (National Criminal Background Search)">
<i></i>
Rapsheet (National Criminal Background Search)
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService3"
value="Social Security Number Validation">
<i></i>
Social Security Number Validation
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService4"
value="Sex Offender Database Check">
<i></i>
Sex Offender Database Check
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService5"
value="Evictions, Liens, and Judgment Search">
<i></i>
Evictions, Liens, and Judgment Search
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService6"
value="Trans Union And Equifax Credit Report">
<i></i>
Trans Union And Equifax Credit Report
</label>
</div>
<div class="span6">
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService7"
value="FICO Score">
<i></i>
FICO Score
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService8"
value="Bankruptcy Report">
<i></i>
Bankruptcy Report
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService9"
value="ID Mismatch Alert">
<i></i>
ID Mismatch Alert
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService10"
value="Equifax Credit Report">
<i></i>
Equifax Credit Report
</label>
<label class="checkbox-toggle">
<input type="checkbox" name="tscpService[]" id="tscpService11"
value="Sex Offender Search (Meagan’s Law)">
<i></i>
Sex Offender Search (Meagan’s Law)
</label>
</div>
</div>
<!-- Captcha -->
<div class="span12 unit">
<div class="captcha-group">
<div class="input">
<label class="icon-right" for="captcha_code">
<i class="fa fa-unlock-alt"></i>
</label>
<input type="text" id="captcha_code" name="human"
placeholder="solve the captcha">
<span class="tooltip tooltip-right-top">Enter sum of the digits</span>
</div>
<label class="captcha" for="captcha_code">
2 + 3 = ?
</label>
</div>
</div>
<!-- Buttons -->
<div class="span6 unit">
<button type="submit" name="submit" value="Send"
class="btn btn-lg btn-theme-bg">Send
</button>
<a class="btn btn-lg btn-primary" data-dismiss="modal">Close</a>
</div>
<!-- Last Name -->
<div class="span6 unit hidden">
<label class="label">Last Name</label>
<div class="input">
<label class="icon-right" for="vals">
<i class="fa fa-user"></i>
</label>
<input type="text" id="vals" name="vals">
</div>
</div>
</form>
<!-- Validation -->
<script>
var vals = [];
/**CheckBox Value Function **/
var $checkes = $('input:checkbox[name="tscpService[]"]').change(function () {
var vals = $checkes.filter(':checked').map(function () {
return this.value;
}).get();
alert(JSON.stringify(vals));
});
$('#TSCreatePackageForm').validate({
/* #validation states + elements */
errorClass: 'error-view',
validClass: 'success-view',
errorElement: 'span',
rules: {
tscpCompanyName: {
required: true,
letterswithbasicpunc: true
},
tscpBusinessType: {
required: true,
letterswithbasicpunc: true
},
tscpYears: {
required: true,
digits: true,
min: 1
},
tscpNumberOfUnits: {
required: true,
digits: true,
min: 1,
max: 99999
},
tscpFirstName: {
required: true
},
tscpLastName: {
required: true
},
tscpEmail: {
required: true,
email: true
},
tscpNumber: {
required: true,
phoneUS: true
},
captcha_code: {
required: true
}
},
// Add class 'error-view'
highlight: function(element, errorClass, validClass) {
$(element).closest('.input').removeClass(validClass).addClass(errorClass);
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').removeClass(validClass).addClass(errorClass);
}
},
// Add class 'success-view'
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.input').removeClass(errorClass).addClass(validClass);
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').removeClass(errorClass).addClass(validClass);
}
},
// Error placement
errorPlacement: function(error, element) {
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').append(error);
} else {
$(element).closest('.unit').append(error);
}
}
});
</script>
PHP Code
<?php
if ($_POST["submit"]) {
$companyName = $_POST['tscpCompanyName'];
$businessType = $_POST['tscpBusinessType'];
$yearsBusiness = $_POST['tscpYears'];
$numberOfUnits = $_POST['tscpNumberOfUnits'];
$firstName = $_POST['tscpFirstName'];
$lastName = $_POST['tscpLastName'];
$email = $_POST['tscpEmail'];
$number = $_POST['tscpNumber'];
$human = intval($_POST['human']);
$from = "From:senderEmail#senderEmail.com";
$to = "recieverEmail#recieverEmail.com";
$subject = 'Custom Package Request';
$body ="Company Name: $companyName\n\n Business Type: $businessType\n\n Years In Business: $yearsBusiness\n\n First Name: $firstName\n\n Last Name: $lastName\n\n Email: $email\n\n Number: $number\n\n Services: $selected\n\n";
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
if (mail ($to, $subject, $body, $from)) {
header("Location: /thank-you/mortgage-lending.html");
} else {
header("Location: /Error.html");
}
}
else {
header("Location: /error.html");
}
}
?>

Why don't you use a hidden field form and send data to hidden field value.
`<input type="hidden" name="sth" id="sth">
now you can send the javascript value to this input field
as you described above you have grabbed value of check box
let's suppose you have taken checkbox value to a variable named vals in js
now you can do
<script>
//if your value from checkbox is placed on variable vals
$('#sth').val(vals)
</script>
using this what you can do is you can grab your value using any of post method

I figured out a way to obtained the value and be able to email it out using PHP.
Here is the code:
<!-- Checkbox Value -->
<script>
var vals = [];
document.getElementsByName('vals').value = vals;
/**CheckBox Value Function **/
var $checkes = $('input:checkbox[name="tscpService[]"]').change(function () {
var vals = $checkes.filter(':checked').map(function () {
return this.value;
}).get();
alert(JSON.stringify(vals));
document.getElementById('vals').value = JSON.stringify(vals);
});
<!-- Checkbox Value -->

Dynamic HTML form input depending on SQL query results

I have an HTML form that allows users to enter a nickname and choose a gender to connect.
Code
<form class="form-horizontal" role="form" action="start" method="post">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="nickname">Nickname</label>
<div class="col-sm-10">
<input id="nickname" name="nickname" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="gender">Gender</label>
<div class="col-sm-10">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default btn-lg">
<input type="radio" name="username" value="Female" id="username"> <i class="fa fa-female"></i> Female
</label>
<label class="btn btn-default btn-lg">
<input type="radio" name="username" value="Male" id="username"> <i class="fa fa-male"></i> Male
</label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-sm-2 control-label" for="button"></label>
<div class="col-sm-offset-2 col-sm-10">
<button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
</div>
</div>
</fieldset>
</form>
Screenshot
Question
Once the nickname input field has been completed by the user, I want to run a SQL query:
SELECT COUNT(u.id) FROM users u WHERE u.nickname = **value_of_input_field**
if the SQL result is >0:
then a password input field should magically appear between the nickname and gender fields.
How on earth can I accomplish this?
I have no idea where to even start looking or what to look for, so any pointers, suggestions etc. are very welcome but code examples would be even better.

Disclaimer: I didnt test this but I think if it doesnt work, it is close enough to get you going.
You would have a css class
.hiding{
display: none;
}
Your html snippet would look something like this:
<form method="post">
<input name="nickname" type="text" id="nickname">
<input name="password" type="text" id="password" class="hiding">
<input> <!-- other buttons and form elements -->
</form>
The js would look something like this (assuming you have included jquery)
<script type="text/javascript">
$(document).ready(function(){
//other jquery/js stuff
$("#nickname").change(function(){
var nick = $(this).val();
$.ajax({
type: "POST",
data: {
nickname: nick
},
url: "actions/validate.php",
dataType: "text",
success: function(data){
if(data>0){
$("#password").removeClass("hiding");
}
}
});
});
});
</script>
and the php would look something like this
<?php
//connect to db
$nickname= $_POST["nickname"];
$sql = "SELECT COUNT(u.id) FROM users u WHERE u.nickname = '".$nickname."'";
$result = mysql_query($sql);
$numRows = mysql_num_rows($result);
echo $numRows;
//disconnect to db
?>