Twitter bootstrap modal and date element - javascript

I have registration form with date element of HTML 5 (use for user b-date).
Yes, it works find but, I see some problem.
If I choose month (e.g I choose month APRIL) the modal will close and the date element left.
Thank you so much.
I have this form:
<form role="form" action="" method="post">
<input type="hidden" name="class" value="client" />
<input type="hidden" name="func" value="add" />
<div class="form-group">
<label for="recordnumber">Record Number</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="record_number" name="record_number" placeholder="Enter Record Number" required>
</div>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="fname" placeholder="Enter First Name" name="fname" required>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="lname" placeholder="Enter Last Name" name="lname" required>
</div>
<div class="form-group">
<label for="birthdate">Birth Date</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="date_birth" name="date_birth" placeholder="Enter Birth Date" required>
</div>
<div class="form-group">
<label for="deathdate">Date of Death</label>
<input type="text" autocapitalize="off" autocorrect="off" style="z-index: 10520" class="form-control" id="date_death" name="date_death" placeholder="Enter Date of Death" required>
</div>
<div class="form-group">
<label for="clinictype">Client Type</label>
<select class="form-control" name="client_type" id="client_type" required>
<option value="">Select Client Type</option>
<?php
$_data = $type->get_all('client');
if($_data!=false): foreach($_data['value'] as $data ): ?>
<option value="<?php echo $data ?>"><?php echo $data ?></option>
<?php endforeach; endif; ?>
</select>
</div>
<input style="margin-top: 20px;" type="submit" class="btn btn-success btn-default">
</form>

Related

Use separate divs for each set of inputs and labels and place id in hidden input

I have been told i need to do as the title says and use separate divs for each set of inputs and labels and place ID in a hidden input. could any one give me advice on how to do this please as i am just learning at the moment, my code for my labels and inputs are below:::
```
<label for="editEmployeeFirstNameInput" class="form-label">First Name</label>
<input type="text" class="form-control" id="editEmployeeFirstNameInput" required>
<label for="editEmployeeLastNameInput" class="form-label">Last Name</label>
<input type="text" class="form-control" id="editEmployeeLastNameInput" required>
<label for="editEmployeePositionInput" class="form-label">Position</label>
<input type="text" class="form-control" id="editEmployeePositionInput">
<label for="editEmployeeEmailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="editEmployeeEmailInput" required>
<label for="editEmployeeDepartmentSelect" class="form-label">Department</label>
<select id="editEmployeeDepartmentSelect" class="form-select" aria-label="Default select example">
```
<div>
<label for="editEmployeeFirstNameInput" class="form-label">First Name</label>
<input type="text" class="form-control" id="editEmployeeFirstNameInput" required>
</div>
<div>
<label for="editEmployeeLastNameInput" class="form-label">Last Name</label>
<input type="text" class="form-control" id="editEmployeeLastNameInput" required>
</div>
<div>
<label for="editEmployeePositionInput" class="form-label">Position</label>
<input type="text" class="form-control" id="editEmployeePositionInput">
</div>
<div>
<label for="editEmployeeEmailInput" class="form-label">Email</label>
<input type="email" class="form-control" id="editEmployeeEmailInput" required>
</div>
<div>
<label for="editEmployeeDepartmentSelect" class="form-label">Department</label>
<select id="editEmployeeDepartmentSelect" class="form-select" aria-label="Default select example">
</div>
<input type="hidden" id="id" name="id" />

AngularJS form validation issues

I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.
HTML
<form role="form" class="ng-pristine ng-valid" name="registerForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" type="text"
autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
<div ng-show="registerForm.email.$dirty">Email Invalid</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
</fieldset>
</form>
Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.
Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"
Any guess what am I missing. Any module that i need to include ?
Here is Plunker
First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.
Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.
One more thing, add 'novalidate' to the form element.
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
<div ng-show="registerForm.email.$error.email">Email Invalid</div>
</div>
You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.
Here is a working plunkr for what you are trying to do.
This is the relevant code:
<body ng-controller="MainCtrl">
<form role="form" name="registerForm" novalidate>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+#\S+\.\S+$/i" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />
</fieldset>
</form>
<div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
<div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>
</body>
Well, I am not sure but I think you also have to use $error with $dirty like this:
<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>
Also, add novalidate to disable default browser validation like this:
<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>

Attempting to get popup to appear after register in a form with a getElementId not working

I have successfully created a popup to display after clicking on a link by using a JavaScript onclick event like this:
However, I am now trying to get figure out how to get this to work without a link needing to be present. I want it to work when a php form is submitted. So basically when someone registers I want a popup to appear after the account has been successfully registered.
I am attempting to do this now like this, but it isn't working at all
<form action="" method="POST">
<div class="field">
<label for="fullname">Full Name</label>
<input type="text" class="inputbar" name="fullname" value="<?php echo escape(Input::get('fullname')); ?>" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" class="inputbaremail" name="email" value="<?php echo escape(Input::get('email')); ?>" required>
</div>
<div class="field">
<label for="username">Username</label>
<input type="text" class="inputbar" name="username" value="<?php echo escape(Input::get('username')); ?>" autocomplete="off" required>
</div>
<div class="field">
<label for="password">Choose a password</label>
<input type="password" name="password" class="inputbarp" required>
</div>
<div class="field">
<label for="password_again">Confirm password</label>
<input type="password" name="password_again" class="inputbarp" required>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<label for="signinButton">
<input id="signinButton" type="submit" value="Register">
</label><br>
<onsubmit = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div id="light" class="signInpopup"><a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
<?php $success;?>
</div>
How could I change what I have to get this to work? Also is Ajax a better method for this or should I scrap what I'm trying to do and have it done another way?
Updated Code:
<form action="" method="POST"
onsubmit="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
return false;">
<div class="field">
<label for="fullname">Full Name</label>
<input type="text" class="inputbar" name="fullname" value="<?php echo escape(Input::get('fullname')); ?>" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" class="inputbaremail" name="email" value="<?php echo escape(Input::get('email')); ?>" required>
</div>
<div class="field">
<label for="username">Username</label>
<input type="text" class="inputbar" name="username" value="<?php echo escape(Input::get('username')); ?>" autocomplete="off" required>
</div>
<div class="field">
<label for="password">Choose a password</label>
<input type="password" name="password" class="inputbarp" required>
</div>
<div class="field">
<label for="password_again">Confirm password</label>
<input type="password" name="password_again" class="inputbarp" required>
</div>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<label for="signinButton">
<input id="signinButton" type="submit" value="Register">
</label><br>
<div id="light" class="signInpopup"><a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
<?php $success;?>
</div>
</form>
What's <onsubmit = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">? It is not valid! Use it this way:
<form action="" method="POST"
onsubmit="document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
return false;">
ps: Don't give breaks inside the attribute. This is just for the readability! Use the above code like:
<form action="" method="POST" onsubmit="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; return false;">

Angular Select ng-model doesnt bind to scope

I have the following form:
<form role="form" class="form-validation" ng-submit="profilCtrl.saveProfile()">
<div class="form-group">
<label class="control-label">Fornavn</label>
<input type="text" placeholder="John Hansen" class="form-control" ng-model="profile.firstname" name="name" value="{{profilCtrl.profile.firstname}}" required>
</div>
<div class="form-group">
<label class="control-label">Efternavn</label>
<input type="text" placeholder="John Hansen" class="form-control" ng-model="profile.lastname" name="name" value="{{profilCtrl.profile.lastname}}" required>
</div>
<div class="form-group">
<label class="control-label">Addresse</label>
<input type="text" placeholder="Mosebakken 12 2830 virum" class="form-control" ng-model="profile.address" name="address" value="{{profilCtrl.profile.address}}" required>
</div>
<div class="form-group">
<label class="control-label">Jobprofil</label>
<select class="form-control" ng-model="selectedTitle" ng-options="item as item.name for item in titles"></select>
</div>
<div class="form-group">
<label class="control-label">Telefon Number</label>
<input type="text" placeholder="12345678" class="form-control" name="phone" value="{{profilCtrl.profile.phone}}" required ng-model="profile.phone">
</div>
<div class="form-group">
<label class="control-label">Afdeling</label>
<select class="form-control" ng-model="selectedDivision" ng-options="division as division.name for division in divisions" required>
</select>
</div>
<div class="form-group">
<label class="control-label">Fødselsdag</label>
<input type="text" placeholder="04-04-1989" class="form-control" name="cpr" ng-model="profile.cpr" value="{{profilCtrl.profile.cpr}}" required>
</div>
<div class="form-group">
<label class="control-label">Vigtig information</label>
<textarea class="form-control" rows="3" placeholder="Dette er vigtigt for min leder at vide!" name="info" ng-model="profile.description">{{profile.description}}</textarea>
</div>
<div class="margiv-top-10">
<button type="submit" href="#" class="btn green-haze">
<i class="fa fa-check"></i>
</button>
</div>
</form>
Everything in this form works expect the two selects:
<select class="form-control" ng-model="selectedTitle" ng-options="item as item.name for item in titles"></select>
And:
<select class="form-control" ng-model="selectedDivision" ng-options="division as division.name for division in divisions" required>
Unlike the others are these not linked to the profile object and should instead be saved in $scope.selectedTitle and $scope.selectedDivision
However once i submit the form both of these are undefined.
Can anyone tell me why this might be happening

Multiple required fields in angular JS

I have a new profile form that has multiple required fields, email, password and confirm password. The submit button is set to be disabled if the form is in invalid state. I believe that form should remain in invalid state until user has filled in all the required fields. To my surprise, angular checks my first field only. If it is alone in valid state, submit button gets activated, regardless of states of other fields. I am using angular 1.0.7. What is the reason behind this behavior ?
<form name='newProfileForm' ng-submit="formSubmit(newProfileForm.$valid)" novalidate>
<fieldset>
<legend>Login Information</legend>
</fieldset>
<!-- NAME -->
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.mail" required>
<p ng-show="newProfileForm.email.$invalid && newProfileForm.email.$dirty">Please enter valid email.</p>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="pass" required/>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" class="form-control" required/>
</div>
<fieldset>
<legend>Personal Details</legend>
</fieldset>
<div class="form-group">
<label>Title</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Address</label>
<textarea rows="3"></textarea>
</div>
<div class="form-group">
<label>Country</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>State</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>City</label>
<select class="span3">
</select>
</div>
<div class="form-group">
<label>Pin Code</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<select class="span3">
<option label="Male" value="Male"/>
<option label="Female" value="Female"/>
</select>
</div>
<div class="form-group">
<label>Field of Interest</label>
<input type="text" class="form-control"/>
</div>
<!-- SUBMIT BUTTON -->
<button type="submit" class="btn btn-primary" ng-disabled="newProfileForm.$invalid">Submit</button>
</form>
You forgot to give ng-model to your password and confirm password field. Do it like
<input type="password" class="form-control" name="pass" ng-model="pass" required/>
<input type="password" class="form-control" name="confirmpass" ng-model="confirmpass" required/>

Categories