I have many difficulties in doing this kind of formatting in the field. I have a form field:
<div class="form-group col-md-12 col-sm-12 col-xs-12">
<div class="col-md-2 col-sm-2 col-xs-2 form-label">
{{Form::label('data', 'Data')}}
</div>
<div class="col-md-10 col-sm-10 col-xs-10">
{{Form::date('data', null, ['class' => 'form-control'])}}
</div>
</div>
The intention is to make this field be in the following format,
when a person enters 2 numbers the field automatically places a " / " forming the following type " 2 / 2 / 4 " insofar as the person is typing. However there is a detail, field allows the use of the backspace key but this will not compromise the automatic use of " / ".
I tried to do as the other topics but did not have success...
You can use regex to this work. Check text format using match().
var lastValue = $("input").val();
$("input").on("keydown keyup change", function(){
var value = $(this).val();
if (value.match(/^[0-9]*[\/]?[0-9]*[\/]?[0-9]*$/g))
lastValue = value;
else
$(this).val(lastValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
Related
In the form I am making, there is a section that requires users to enter the amount of people in their family. After they provide it, the form generates enough input fields so that the user can enter information for each family member.
What I am having trouble with is none of the attributes that I am trying to apply to the input element actually work.
function addHouseMembers(that){
var family = document.getElementById("family-input-container");
while(family.hasChildNodes()){
family.removeChild(family.lastChild);
}
for(var i = 1; i < that.value; i++){
family.appendChild(document.createTextNode("Family Member " + (i+1)));
family.appendChild(document.createElement("br"));
//name
family.appendChild(document.createTextNode("Name: " ));
var input = document.createElement("input");
input.type = "text";
input.name = "member" + i + "_name";
input.pattern = "/^[a-zA-Z ]*$/";
input.required = true;
family.appendChild(input);
family.appendChild(document.createElement("br"));
}
}
The parameter that refers to the input where the user would put in the number of people in their family.
And here is the relevant HTML:
<form>
<div class="form-group">
<label class="col-lg-3 control-label">What is the total amount of people living in your household?</label>
<div class="col-lg-3 inputGroupContainer">
<div class = "input-group">
<input type="text" class="form-control" name="household-size" required onchange="addHouseMembers(this);"/>
</div>
</div>
</div>
<div class="form-group", id="family-info">
<label class="col-lg-12">Information for other Family Members</label>
<div class="col-lg-3 inputGroupContainer">
<div class = "input-group" id = "family-input-container" required>
</div>
</div>
</div>
</form>
The element shows up as it should, and is submitted with the form when the user hits the submit button, but the regex pattern and required attributes are not enforced.
in addHouseMembers(that) the value of that is a string, not a number, and you have to check if is value can be 'translated' in an integer value.
use the "onchange" event on the input field household-size is not a good idea because this event is triggered each time a digit of the number entered, which has the effect of erasing and completely rewrite the family-input-container part
I Imagine you are looking for something like that ?
const myForm = document.getElementById('my-form')
, familyElm = document.getElementById('family-input-container')
, parserDOM = new DOMParser()
;
function newHouseMember(ref)
{
let div=
` <div>
Family Member ${ref}<br>Name: <br>
<input type="text" name="member${ref}_name" pattern="/^[a-zA-Z ]*$/" required >
</div>`
return parserDOM.parseFromString( div, 'text/html').body.firstChild
}
myForm.btPeoples.onclick=_=>
{
let nbPeoples = parseInt(myForm['household-size'].value)
if (!isNaN(nbPeoples) && nbPeoples > 0 )
{
familyElm.innerHTML = ''
for (let i=1; i<=nbPeoples; i++)
{
familyElm.appendChild( newHouseMember(i) )
}
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<form id="my-form">
<div class="form-group">
<label class="col-lg-3 control-label">What is the total amount of people living in your household?</label>
<div class="col-lg-3 inputGroupContainer">
<div class = "input-group">
<input class="form-control" name="household-size" required value="" placeholder="number of peoples" pattern="\d*" />
<button name="btPeoples" class="btn btn-info" type="button" >check it!</button>
</div>
</div>
</div>
<div class="form-group", id="family-info">
<label class="col-lg-12">Information for other Family Members</label>
<div class="col-lg-3 inputGroupContainer">
<div class="input-group" id="family-input-container">
</div>
</div>
</div>
</form>
In consultation mode I cannot return the dto values in the ng-model:
HTML code:
<div class="form-group">
<label class="col-md-5 control-label"> Localité </label>
<div class="col-md-7">
<autocomplete ng-disabled="mode == 'read'"
input-class="form control" options="referentielAdresses"
display-property="localite" on-type="autoCompleteLocalite"
on-select="get-localite" clear-input="false"
ng-model="dto.localite"></autocomplete>
</div>
</div>
https://imgur.com/iQMOvxk
JS code:
// autoCompleteLocalite
$scope.autoCompleteLocalite = function(typed){
if(typed!=""){
$scope.dto.localiteRnvp = typed;
}
};
$scope.getLocalite = function(selected){
$scope.dto.localiteRnvp = selected.localite;
}
How can I include ng-model midst autocomplete?
Em... in $scope.getLocalite search for relative rows and show them into new block. On click on row update localiteRnvp value.
In my Javascript I'm trying to validate the user's input.
Is there a way i can show ( define the text via .html() ) the (upper) closest element with classname "xy"
my HTML-File looks like this:
<div class=" row validate" style="display:none;">
<div class="col-lg-1"></div>
<div class="col-lg-7"><p class="validation_text"></p></div>
</div>
<div class="row">
<div class="col-lg-1 col-sm-0 col-xs-12"></div>
<div class="col-lg-3 col-sm-3 col-xs-12"><a href="#" data-
toggle="tooltip" data-placement=" auto top" title="Text">Information</a></div>
<div class="col-lg-2 col-sm-2 col-xs-12"><input id="xy" name="xy"
type="search" class="form-control" maxlength="2" onChange="validate(this);">
</div>
</div>
and in My JS-File:
function validate(){
var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
var box = ['xy','xyyy];
var element;
element = document.getElementById(box[i]);
for (i=0; i < box.length; i++){
if(regex.test(element.value)){
$(element).parent().parent().prev().show();
element.style.border = '2px solid red';
$(".validation_text").eq([i]).html("your input contains regex");
}
}
}
everything works fine, the only problem i've got is the last part. the validation_text is not showing. Does anybody know why?
eq() expects an integer and you are giving it an array
$(".validation_text").eq([i])
should be
$(".validation_text").eq(i)
On change of year value I want to change options of Make drop down, but not getting how to update options of other control.
Below is my plunker with form.
https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview
api.php is server response these options should display in Make drop down on change of year.
autoQuoteCtrl.js
$scope.updateMakeList = function(){
}
index.html
<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>
<span class="form-error" ng-show="submitted && DTOstep1.VehicleYear.$error.required">This field is required.</span>
</div>
You need to put this function in your controller -
$scope.updateMakeList = function(name)
{
// Your logic to change value in Make dropdown
$scope.questions[name].VehicleMake.QuestionData._answerOptions = [{'_value':"test",'_promptText':"Test"}];
}
And update your HTML (year select box)-
<div class="form-group">
<label class="col-sm-5 control-label" for="PC">{{questions[$state.current.name].VehicleYear.QuestionData._text}}</label>
<div class="col-sm-6">
<select ng-change="updateMakeList($state.current.name)" custom-required="true" ng-options="ans._value as ans._promptText for ans in questions[$state.current.name].VehicleYear.QuestionData._answerOptions" ng-model="answers.VehicleYear" ng-required="queObj._required" class="form-control {{queObj._pageAttributes.cssclass}}" name="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" id="{{questions[$state.current.name].VehicleYear.QuestionData._attributeName}}" data-que-obj="questions[$state.current.name].VehicleYear.QuestionData" select-control-dir setMake custom-required></select>
</div>
</div>
I have the following code (the html-attributes are for bootstrap-slider):
<!-- Text input-->
<div class="form-group" id = "time">
<label class="col-md-4 control-label" for="notification_time">How many minutes before an event?</label>
<div class="col-md-6">
<input id="notification_time" name="notification_time" type="text" value="{{current_user.notifications_min}}" data-slider-min="5" data-slider-max="120" data-slider-step="5" data-slider-value="{{current_user.notifications_min}}" data-slider-selection="after">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="notifications">E-mail notification</label>
<div class="col-md-4">
<input name="notifications" id="emailnotification" value="emailnotification" type="checkbox" data-on="success" data-off="danger" data-on-label="Yes" data-off-label="No" {% if current_user.daily_mail %} checked {% endif%}>
<span class="help-block">You'll get an email **X** minutes before each event</span>
</div>
</div>
I want X in the above example to automatically change based on the input in notification_time. How do I do this?
Try this:
$('#notification_time').on('change', function () {
var time = $(this).val();
$('.help-block').text('You\'ll get an email ' + time + ' minutes before each event');
});
Edit: note that the change event will only fire when you change and leave the focus of the input. Modern browsers support an input event or you can try using keyup if you wish.
Edit 2: after reading the docs on the slider for bootstrap, try this:
$('#notification_time').slider().on('slideStop', function () {
var time = $('#notification_time').val();
$('.help-block').text('You\'ll get an email ' + time + ' minutes before each event');
});