I'm trying to make an appointment management using php and mysql
so a user can register himself by filling a form. I have added a checkbox naming Mon, ) .Tue, Thu ... and gave two fields time_from and time_to (start time and end ti). I will split these time and store it in my db.
The problem is what if user have different timings on different days of the week like someone might work 9 - 5 on Monday to Friday and 11-2 on Saturday.
I want to capture these values when a user registers. Can I add an optional field in my html form or is there any other way I can do this.
My current code
<form class="form-horizontal" role="form" name=fdadd method=post action=dsave.php>
<div class="form-group">
<label for="DoctorName" class="col-sm-3 control-label">Doctor Name</label>
<div class="col-sm-9">
<input type="text" id="firstName" name=name placeholder="Doctor Name" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio" id="femaleRadio" value="Female">Female
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio" id="maleRadio" value="Male">Male
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" name="radio" id="uncknownRadio" value="Unknown">Unknown
</label>
</div>
</div>
</div>
</div> <!-- /.form-group -->
<div class="form-group">
<label for="Specilization" class="col-sm-3 control-label">Specilization</label>
<div class="col-sm-9">
<input type="text" id="spec" name=spec placeholder="Specilization" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label for="designation" class="col-sm-3 control-label">Designation</label>
<div class="col-sm-9">
<input type="text" id="designation" name=desig placeholder="Designation" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label for="fee" class="col-sm-3 control-label">Fee</label>
<div class="col-sm-9">
<input type="text" id="fee" name=fee placeholder="Fee" class="form-control" autofocus>
</div>
</div>
<div class="form-group">
<label for="checkbox1" class="col-sm-3 control-label">Available On</label>
<div class="col-sm-9">
<input type="checkbox" name="weekday" value="Mon">Mon
<input type="checkbox" name="weekday" value="Tue">Tue
<input type="checkbox" name="weekday" value="Wed">Wed
<input type="checkbox" name="weekday" value="Thu">Thu
<input type="checkbox" name="weekday" value="Fri">Fri
<input type="checkbox" name="weekday" value="Sat">Sat
<input type="checkbox" name="weekday" value="Sun">Sun
</div>
</div>
<div class="form-group">
<label for="timef" class="col-sm-3 control-label">Available from</label>
<div class="col-sm-9">
<input type="time" id="timef" name=timef class="form-control">
</div>
</div>
<div class="form-group">
<label for="timet" class="col-sm-3 control-label">Available upto</label>
<div class="col-sm-9">
<input type="time" id="timet" name=timet class="form-control">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" id="email" name=email placeholder="Email" class="form-control">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-3 control-label">Phone Number</label>
<div class="col-sm-9">
<input type="text" id="phone" name=phone placeholder="Phone Number" class="form-control">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-3 control-label">Address</label>
<div class="col-sm-9">
<textarea class="form-control" rows="3" id="address" name=address placeholder="Address"></textarea>
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-3 control-label">City</label>
<div class="col-sm-9">
<input type="text" id="city" name=city placeholder="City" class="form-control">
</div>
</div>
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" id="state" name=state placeholder="State" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" value=submit class="btn btn-primary btn-block">Register</button>
</div>
</div>
</form>
I even tried cloning the time fields with
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
Related
I have a page with many radio with same name
Problem I have it's when I click on one, that affect other.
kidSection can be added via ajax
$("#kidsSection").on('click', '.kidsTutorYes', function(e) {
$(this).parent().parent().nextAll('.kidTutor, #kidsSectionAdd').eq(0).removeClass('visually-hidden');
});
$("#kidsSection").on('click', '.kidsTutorNo', function(e) {
$(this).parent().parent().nextAll('.kidTutor, #kidsSectionAdd').eq(0).addClass('visually-hidden');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container" id="main" role="main">
<div>
<br>
<form class="row g-3" id="kidsForm">
<div id="kidsSection">
<div class="kidSection" id="kidSection">
<h5>Information de l'enfant</h5>
<div class="form-group col-md-6">
<label class="form-label" for="firstname">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label" for="lastname">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
<h6>Est-t'il mineur ou à charge?</h6>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input autocomplete="off" value="yes" name="kidsTutors1" type="radio" class="kidsTutorYes"> Oui
</label>
<label class="btn btn-secondary">
<input autocomplete="off" value="no" checked="" name="kidsTutors" type="radio" class="kidsTutorNo1"> Non
</label>
</div>
<br>
<div class="kidTutor">
<h5>Tuteur</h5>
<div class="form-group col-md-6">
<label class="form-label">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
</div>
</div>
<br>
<div class="kidSection" id="kidSection">
<h5>Information de l'enfant</h5>
<div class="form-group col-md-6">
<label class="form-label" for="firstname">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label" for="lastname">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
<h6>Est-t'il mineur ou à charge?</h6>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input autocomplete="off" value="yes" name="kidsTutors2" type="radio" class="kidsTutorYes"> Oui
</label>
<label class="btn btn-secondary">
<input autocomplete="off" value="no" checked="" name="kidsTutors2" type="radio" class="kidsTutorNo"> Non
</label>
</div>
<br>
<div class="kidTutor visually-hidden">
<h5>Tuteur</h5>
<div class="form-group col-md-6">
<label class="form-label">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
</div>
</div>
</div>
<div class="" id="kidsSectionAdd">
Ajouter un autre enfant
</div>
</form>
<br>
<div class="col-12 text-center">
Précédent
Suivant
</div>
<br>
</div>
</main>
I have a simple HTML Form and i am trying to validate it using Jquery Validation but for some reason the form is not being validated. Please help.
HTML :
<div class="row">
<div class="col-md-8">
<form novalidate="novalidate" action="http://talentcapture.com/Profile/save_profile" id="update-profile-form" method="POST" class="validateForm">
<fieldset>
<legend>Update Your Profile Information</legend>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="first_name">First Name:</label>
</label>
<div class="col-md-8">
<input name="users[first_name]" value="Jhon" data-required="true" id="users-first_name" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="user_name">Last Name:</label>
</label>
<div class="col-md-8">
<input name="users[last_name]" value="Doe" data-required="true" id="users-last_name" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="street_address">Street Address:</label>
</label>
<div class="col-md-8">
<input name="user_profiles[street_address]" value="" data-required="true" id="user_profiles-street_address" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="locality">Locality:</label> </label>
<div class="col-md-8">
<input name="user_profiles[locality]" value="" data-required="true" id="user_profiles-locality" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="city">City:</label>
</label>
<div class="col-md-8">
<input name="user_profiles[city]" value="" data-required="true" id="user_profiles-city" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="state">State:</label> </label>
<div class="col-md-8">
<input name="user_profiles[state]" value="" data-required="true" id="user_profiles-state" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="country">Country:</label> </label>
<div class="col-md-8">
<input name="user_profiles[country]" value="" data-required="true" id="user_profiles-country" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="zipcode">Zipcode:</label> </label>
<div class="col-md-8">
<input name="user_profiles[zipcode]" value="" data-required="true" data-number="true" id="user_profiles-zipcode" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="company_name">Company name:</label>
</label>
<div class="col-md-8">
<input name="user_profiles[company_name]" value="" data-required="true" id="user_profiles-company_name" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="company_desc">Company Description:</label>
</label>
<div class="col-md-8">
<textarea name="user_profiles[company_desc]" cols="40" rows="10" type="textarea" data-required="true" id="user_profiles-company_desc" class="form-control"></textarea>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="linkedin_url">Linkedin url :</label>
</label>
<div class="col-md-8">
<input name="user_profiles[linkedin_url]" value="" data-required="true" id="user_profiles-linkedin_url" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">
<label for="company_website_url">Company Website:</label>
</label>
<div class="col-md-8"><input name="user_profiles[company_website_url]" value="" data-required="true" id="user_profiles-company_website_url" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
I have this common method to validate all my forms based on the data- attribute passed to the fields.
JAVASCRIPT
var form = $(".validateForm");
form.each(function(){
var validationRules = {};
var field = '';
$(this).find(':input').each(function(){
field = $(this).attr('id');
if(typeof field !== 'undefined')
validationRules[field]= $(this).data();
});
var error = $('.alert-error', $(this));
var success = $('.alert-success', $(this));
console.log(validationRules);
$(this).validate({
rules: validationRules,
errorClass : 'help-inline error-msg',
errorElement: 'span',
errorPlacement: function (error, element) { // render error placement for each input type
var type = $(element).prop('type');
if(type == 'checkbox' || type == 'radio'){
error.insertAfter(element.closest('.'+type));
error.css('float','none');
} else {
error.insertAfter(element); // for other inputs, just perform default behavoir
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
success.hide();
error.show();
},
highlight: function (element) { // hightlight error inputs
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element) { // revert the change dony by hightlight
$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set error class to the control group
},
});
});
however the Validation does not work and the form gets submitted on blank fields even though all fields are mandatory.
I am new in angularjs, i want to have a filed form from database when the user want to update his profile. I have a webservice that can give all information for the logged user then another webservice to get the information that i need with the id of the user.This is my controller:
controller('myTalentisCtrl', function ($scope,$http) {
this.User_Talent={};
this.T_User={} ;
$http.get("/LoggedUser").success(function(data) {
alert(data);
this.T_User.lnId = data.lnId;
alert(this.T_User.lnId);
});
$http.get("/usertalent",this.T_User.lnId).success(function(data) {
alert(data);
this.User_Talent.user = data.user;
this.User_Talent.talent = data.talent;
});
$scope.modif=function(){
$http.put('updating/' + this.T_User.lnId, $scope.User_Talent).success(function(data) {
$scope.User_Talent = data;
});
};
this is a part of my form:
<div ng-controller="myTalentisCtrl" class="tab-content no-margin">
<!-- Tabs Content -->
<div class="tab-pane with-bg active" id="fwv-1">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="full_name">First Name</label>
<input type="text" ng-model="User_Talent.talent.strFirstName" class="form-control" name="first_name" id="first_name" data-validate="required" placeholder="Your first name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label class="control-label" for="address_line_2">Address</label>
<input ng-model="User_Talent.talent.strAdress" class="form-control" name="address_line_2" id="address_line_2" placeholder="(Optional) your Address" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="full_name">Last Name</label>
<input type="text" ng-model="User_Talent.talent.strLastName" class="form-control" name="last_name" id="last_name" data-validate="required" placeholder="Your last name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="city">City</label>
<input ng-model="User_Talent.talent.strCity" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="door_no">Phone Number</label>
<input ng-model="User_Talent.talent.lnPhone" class="form-control" name="phone_no" id="phone_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="zip">Zip</label>
<input ng-model="User_Talent.talent.lnZipCode" class="form-control" name="zip_no" id="zip_no" data-validate="number" placeholder="Numbers only" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email Adress</label>
<div class="input-group">
<span class="input-group-addon">
<i class="linecons-mail"></i>
</span>
<input ng-model="User_Talent.talent.strEmail" type="email" class="form-control" placeholder="Enter your email">
</div>
<!-- <label class="control-label" for="city">Email Adress</label>
<input ng-model="User_Talent.talent.strEmail" class="form-control" name="city" id="city" data-validate="required" placeholder="Current city" /> -->
</div>
</div>
Is there a way to initialize my ng-model with the existing values ?
you should perform a digest cycle to reflect the changes in the DOM.
Look into digest
https://docs.angularjs.org/api/ng/type/$rootScope.Scope
First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>
Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL
A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});
Admins of a site can create new academic publications (e.g.: published paper (pp) or book chapter (bc)). The type of the publication is determined by radio buttons. There are four different types.
Problem: Admins might also edit an already existing entry in a later stage. To make this possible, I need to retrieve the value of type and pass it over to the template.html to make the correct radio button preselected.
How is this possible? Any help appreciated.
This is the JSON with a type field from the collection Publications:
{
"_id" : "t4Zc23YSB9fJc8rW4",
"authors" : [
{
"lastName" : "Whittington",
"firstName" : "Richard"
},
{
"lastName" : "Cailluet",
"firstName" : "Ludovic "
},
{
"lastName" : "Douglas",
"firstName" : "Basak Yakis "
}
],
"title" : "Opening strategy: Evolution of a precarious profession",
"outlet" : "British Journal of Management, 22 (3)",
"year" : "2011",
"abstract" : "No Abstract ...",
"type" : "pp"
}
The helper.js:
Template.adminPublicationsEdit.helpers({
pubEntry: function () {
return Publications.findOne({_id: this._id});
}
});
And template.html:
<template name="adminPublicationsEdit">
<div class="container extra-spacing-bottom">
<div class="putdown extra-spacing-bottom">
<h1 class="extra-spacing-bottom">EDIT ENTRY</h1>
<hr>
{{#with pubEntry}}
<form class="form-horizontal" id="addPub" role="form">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name="title" value="{{title}}" placeholder="Enter Title">
</div>
</div>
<div class="form-group">
<label for="year" class="col-sm-2 control-label">Year</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="year" name="year" value="{{year}}" placeholder="Enter Year of Publication">
</div>
</div>
<div class="form-group">
<label for="abstract" class="col-sm-2 control-label">Abstract</label>
<div class="col-sm-10">
<div name="abstract" id="abstract">
{{{abstract}}}
</div>
</div>
</div>
<div class="form-group js-radios">
<label for="Outlet" class="col-sm-2 control-label">Outlet</label>
<div class="col-sm-10">
<label class="radio-inline"><input type="radio" name="outlet-type" id="wp" value="wp">Working Paper</label>
<label class="radio-inline"><input type="radio" name="outlet-type" id="pp" value="pp">Published Paper</label>
<label class="radio-inline"><input type="radio" name="outlet-type" id="bk" value="bk">Book</label>
<label class="radio-inline"><input type="radio" name="outlet-type" id="bc" value="bc">Book Chapter</label>
</div>
</div>
{{#if ppSelected}}
<div class="form-group">
<label for="journal" class="col-sm-2 control-label">Journal</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="journal" name="journal" placeholder="Enter Name of Journal">
</div>
</div>
<div class="form-group">
<label for="pages" class="col-sm-2 control-label">Pages</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pages" name="pages" placeholder="Enter Pages">
</div>
</div>
{{/if}}
{{#if bkSelected}}
<div class="form-group">
<label for="publisher" class="col-sm-2 control-label">Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="publisher" name="publisher" placeholder="Enter Publisher">
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-2 control-label">Location of Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" name="location" placeholder="Enter Location of Publisher">
</div>
</div>
{{/if}}
{{#if bcSelected}}
<div class="form-group">
<label for="publisher" class="col-sm-2 control-label">Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="publisher" name="publisher" placeholder="Enter Publisher">
</div>
</div>
<div class="form-group">
<label for="location" class="col-sm-2 control-label">Location of Publisher</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="location" name="location" placeholder="Enter Location of Publisher">
</div>
</div>
<div class="form-group">
<label for="editors" class="col-sm-2 control-label">Editor(s)</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="editors" id="firstEditor" placeholder="Enter Book Editor(s)">
</div>
</div>
<div class="form-group">
<label for="pages" class="col-sm-2 control-label">Pages</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pages" name="pages" value="{{pages}}">
</div>
</div>
{{/if}}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="js-addEntry" class="btn btn-primary admin-button">UPDATE ENTRY</button>
</div>
</div>
</form> <!-- end form -->
{{/with}}
</div> <!-- putdown -->
</div> <!-- container -->
</template>
If I understood your question, you want to select a particular radio button inside your Outlet form-group which corresponds with the type's value of the pubEntry's object. If this is the case, you could implement a Meteor helper and pass the type as a function argument.
For example:
if (Meteor.isClient) {
Template.adminPublicationsEdit.helpers({
// ...
isChecked: function(type) {
return (this.type === type) ? "checked" : "";
}
// ...
});
}
<template name="adminPublicationsEdit">
<!-- ... -->
<div class="form-group js-radios">
<label for="Outlet" class="col-sm-2 control-label">Outlet</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="outlet-type" id="wp" value="wp" {{isChecked 'wp'}}>Working Paper</label>
<label class="radio-inline">
<input type="radio" name="outlet-type" id="pp" value="pp" {{isChecked 'pp'}}>Published Paper</label>
<label class="radio-inline">
<input type="radio" name="outlet-type" id="bk" value="bk" {{isChecked 'bk'}}>Book</label>
<label class="radio-inline">
<input type="radio" name="outlet-type" id="bc" value="bc" {{isChecked 'bc'}}>Book Chapter</label>
</div>
</div>
<!-- ... -->
</template>