I have the code:
<input required="required" type="text" class="inp" name="nume" size="30" style="text-align: center" placeholder="Introdu aici numele tău">
The user will introduce his name on a tablet and I want the name and surname introduced in the field to be with first letters Uppercase. Is that possible? I searched but nothing solid so far.
Cheers and thank you!
I am not sure to have understood your question, do you want to force user to introduce names with the first capital uppercase?
const convertName = function (name) {
return name
.split(' ')
.map(
word =>
word.substr(0, 1).toUpperCase() +
word.substr(1, word.length).toLowerCase()
)
.join(' ');
};
Related
I have an HTML5 date input element like this:
<input type="date" />
if you choose a date in this input a string will be the value, for example:
"2018-12-31"
In my model I want the date to be presented as the following string:
"2018-12-31T00:00:00.000Z" and not the simplified string.
How do I make sure that the date in my model keeps the correct format? I tried using a computed but since I am in a loop this time I cannot use them.
{{eventDate.date}}
<b-form-input
v-bind:value="eventDate.date"
v-on:input="eventDate.date = $event.target.value"
v-bind:id="'event-day-date-' + index"
size="sm"
type="date"
placeholder="2018-12-31"
>
</b-form-input>
As you can see here the eventDate.date is a long string but the input needs the format YYYY-MM-DD. I need to convert it to and from this format some way.
You could use a filter:
filter: {
dateToString(date) {
return date.toString().substr(0,10)
}
}
and then update your template
:value="eventDate.date | dateToString"
This is what I ended up using:
<input
v-validate="'required'"
v-bind:name="'eventdate-' + index"
v-bind:value="eventDate.date | dateToString"
v-on:input="eventDate.date = $event.target.value + 'T00:00:00.000Z'"
v-bind:id="'event-day-date-' + index"
class="form-control form-control-sm"
type="date"
placeholder="2018-12-31"
/>
I appreciate if anyone can help me.
I have a form which separated by
*Mailing Address*
*Physical Address*
One has ID and one doesn't have. Example: Street
When I use only Mailing address street field and run script - it also insert on the Physical address street field.
I do not know how to get to the Parent DIV to separate Mailing and Physical address Street field. So it can input only in one street address
Any help appreciate.
$("input", id: "Street").value("780 woodland ave")
Mailing Address:
></fieldset><fieldset id="fieldset-mailing-list"><legend>Mailing List <a id="mailing-list" name="mailing-list"/></legend><div class="row-fluid"><div class="span12"><div class="control-group"><label for="mailName" class="control-label">In Care of Name</label><div class="controls"><input placeholder="" class="mailName span12" ng-model="Application.contactInformation.mailingAddress" id="mailName" type="text"/></div></div></div ></div><div class="row-fluid"><div class="span6"><div class="control-group"><label for="street" class="control-label">Street</label><div class="controls"><input ng-required="isRequired()" placeholder="Street Number and Name" class="required" ng-model="Application.contactInformation.mailingAddress.street" name="street" id="street" type="text"/><br/><span ng-show="application.street.$error.required" style="color:red">***a required field***<br/></span></div></div></div>
Physical Address:
></fieldset><fieldset id="fieldset-physical-mailing-list"><legend>Physical Address <a id="physical-mailing-list" name="physical-mailing-list"/></legend><div class="row-fluid"><div class="span12"><label class="checkbox"><input name="sameAddress" id="sameAddress" type="checkbox"/>
Physical Address same as mailing address.
</label></div></div><div class="row-fluid"><div class="span6"><div class="control-group"><label for="street" class="control-label">Street</label><div class="controls"><input placeholder="Street Number and Name" class="" ng-model="Application.contactInformation.physicalAddress.street" id="street" type="text"/></div></div></div>
To select the street input you can do:
$('input', name: 'street')
To select the error message you can say:
$('input', name: 'street').closest('div').find('span')
or:
$('input', name: 'street').parent().find('span')
or:
$('input', name: 'street').nextAll('span')
i enter dojo.query('input') i get the following :-
<input id="paragraphtwo" data-dojo-type="dijit/form/SimpleTextarea" rows="4" cols="50" style="width:auto">
now WHEN i write
text= dojo.query('input')
[<input id="paragraphtwo" data-dojo-type="dijit/form/SimpleTextarea" rows="4" cols="50" style="width:auto">]
gets storeed in text.
now when i write text[0].id i get "paragraphtwo". how can i access the type of input i.e hwo can i get "dijit/form/SimpleTextarea" just like i got the id
One way to this is as follows:
var input = dojo.byId("paragraphtwo");
var dojoType = dojo.attr(input, "data-dojo-type"));
console.log(dojoType); // Outputs: dijit/form/SimpleTextarea
Using the declaredClass property:
console.log(dijit.byId("paragraphtwo").declaredClass);
I'm creating a form elements template file in PHPTAL. I would like to be able to OPTIONALLY pass in an id attribute for a field...
So far the code looks like this:
<xml>
<tal:block metal:define-macro="text">
<label tal:condition="php: !isset(hideLabel) || isset(hideLabel) && !hideLabel">${field/label}</label>
<input name="${name}" type="text" value="${field/value}" />
<p tal:condition="exists:field/error">${field/error}</p>
</tal:block>
</xml>
This works as advertised. What I'd like to add is something, like
<input name="${name}" tal:attributes="id exists: id $id | $name" value="${field/value}" />
to allow me to optionally pass in an id from the METAL call...
Should I be doing it differently? I've tried using PHP: isset(id) ? $id : NULL and variations thereof, but just end up with an id="0" in the resultant HTML.
Any ideas?
In case anyone else needs it, one working answer is:
<xml>
<tal:block metal:define-macro="text">
<label tal:condition="not: exists:hideLabel">${field/label}</label>
<input name="${name}" tal:attributes="id id | nothing" type="text" value="${field/value}" />
<p tal:condition="exists:field/error">${field/error}</p>
</tal:block>
</xml>
Where passed in variables are id, name, an array named field, and hideLabel .
Note, that I've also managed to simplify the label test to something which I believe is more idiomatically TAL.
Set VAR at a DIV containing the soon to be used element:
div class="" tal:define="VAR context.property"
div class="" tal:attributes="class python:'grid_8 omega' if VAR else 'grid_8 alpha'"
in PHP:
<div id="contentCenter" tal:attributes="id
php:isset(variable)&&isset(variable.property)?'IDVALUE':NULL">
I want to select the record from the list box using text. how can i use the filter function to select the particular record. I will be having many options but i want to select the value which i want by checking the text (e.g Spanish). I dont want to select value by index becoz if i do that i wont be able to verify test, moreover list gets updated. kindly help. below r my html code.
<ul class="addList">
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Mandarin</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">English</li>
<li ng-repeat="skill in availableSkills" ng-click="addSkillFunc(skill, $index)" class="ng-binding ng-scope">Spanish</li>
</ul>
Yea i can select the record by index. but i want something like selectbyvisibleText which is available in Selenium.
Finally got the solution. created a function SelectRowByCellValue and used to call it where ever i want by
SelectRowByCellValue(AGP.SkillList, Data.SkillSelect);
SkillList = element.all(by.css('Ul.addList li'));
SkillSelect = Value that u want to select. (Spanish)
this.SelectRowByCellValue = function (Elem, Texts) {
Elem.filter(function (element) {
return element.getText().then(function (text) {
if (text == Texts) {
element.click();
return false;
}
});
}).then(function (filteredElements) {
});
};