I am doing some website where I have a login form. I know people can save their usernames and passwords on these in their web browsers.
I need to show / hide a label (<label></label>). if the field is empty then the label has to appear, if there is any value in the field then the label has to hide,
but this doesn't work with the browser autocomplete, is there anyway I can track this?
I tried with:
jQuery.change();
but that doesn't work.
Is there anything I can do about this rather than turning autocomplete off?
The norm here is to use the placeholder attribute on the relevant input element:
<input type="text" placeholder="username">
username will be displayed within the input when there's no text, and hidden otherwise. If you're using this, then you should probably also use something like Modernizr to detect support and create a normal text label otherwise.
You have to manually trigger the change event:
$("#username")
.change(function () {
// do stuff on change (check for default)
})
.trigger("change");
or use some watermark library if you only want to toggle default text (or the placeholder attribute with Modernizr as aviraldg recommends).
This is very simple.
I use this for my site's text fields.
This coding is in Javascript text.
create a <form> with name and id = "comform" (you can change this later; just for reference).
create an <input type = "text" with name and id = "Message" (you can change this later; just for reference).
create a <div> with id = "ifsend" (you can change this later; just for reference).
Also create a variable to store the length in. var numbering (you can change this later; just for reference).
function counter() {
var numbering;
numbering = document.forms["comform"]["Message"].value.length;
if (numbering == 0) {
label();
}
if (numbering != 0) {
document.getElementById('ifsend').innerHTML="";
}
}
function label() {
document.getElementById('ifsend').innerHTML="Your form value is empty";
}
Related
I want to validate the p,li,div element texts. examples, I have an p tag with the class name "date". then the user can insert only a date.if they inserting text I want to display alert to the user in CKEDITOR.
Is it possible to in ckeditor without using any input fields<p class="date"></p>
<p class="date">31/07/2018</p>
<p class="date">a</p> I need to display error or alert.
how can i do without onchange events. is there have any default funtionality
You can get elements by class in jQuery. Then the validation process is straightforward
function isDate(value) {
var dateReg = /^\d{2}([./-])\d{2}\1\d{4}$/
return value.match(dateReg)
}
$("p.date").map(function() {
if(!isDate(this.innerHTML)) {
//alert("...");
}
});
As for the part - when to run these validation checks, you can call them on DOM updates like, insertion, deletion etc in the application layer.
HTML5 comes with a lot of new types for
<input />
How can I detect if an input field is "a text field" (date, time, email, text, everything)
I do not want to write input[type='text'],input[type='xxx'] ...
You can use getAttribute to get whatever attribute you want (this includes type)
var input = document.getElementById('myinput');
var inputTYpe = input.getAttribute('type');
var isText = inputTYpe === 'text' || inputTYpe === '';
console.log('type is ', input.getAttribute('type'), ' is text = ', isText)
<input type="hey" id="myinput" />
CSS3 comes with a lot of new types for <input />
HTML5, not CSS3.
I do not want to write input[type='text'],input[type='xxx']
Unfortunately, I don't think you get a choice. But since the vast majority of them are text-like, you probably want to just call out the ones that aren't (like range, checkbox, radio, file, submit, image, reset, button — only one of which is new with HTML5).
Where possible, you'll want to isolate that to a single spot. You've mentioned CSS, which may make it difficult, but for instance if you were doing this in JavaScript, you'd want a single reusable function so you could update it as necessary.
function unameit(el) {
var words=['button','checkbox','hidden','image','radio','range','reset','submit'],tp=el.type.toLowerCase();
return words.indexOf(tp)<0;
}
If you want to differenciate between tags, you can check the tag by using
elementTag.tagName
For example, if you have a Input, you will get the text "INPUT"
And if you want to know what kind of imput is being used, you can check by looking at the attribute
elementTag.type
I'm trying to take a field value (that's a two option check box) and if it is checked then set the visibility on a section to be true, and if it's not checked then to set the visibility to false. I have it set on the field to call the function on an on change event.
When I go into the form and either check the box or uncheck the box it gives me a script error.
This is the function I'm using:
function SetProductVisible(){
if (Xrm.Page.getAttribute("ee_productspecific").getValue()){
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(true);
}
else{
Xrm.Page.ui.tabs.get(“SubGrids”).sections.get(“Products”).setVisible(false);
}
};
Thank you for your help.
The fields default value is also set to "No"
Ensure that you are using the right quotation marks by replacing “ and ” with ".
As mentioned in the comments, also ensure that you are using the right name for your tab and section, and check the developer console for more information about the error.
here is your solution...
I created a new field on the CRM form called "log_showhide" which is a two option field. You need to edit the code below to match your Section name and field name with the correct values...
Furthermore, I would set the code to run on load of the form as well as on change of your field.
This method is applicable to Microsoft Dynamics 365 v9.x
function hideOrShow(executionContext){
var a = executionContext.getFormContext().getAttribute("log_showhide").getValue();
if (a == 0) {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(true);
} else {
Xrm.Page.ui.tabs.get("SUMMARY_TAB").sections.get("sampleSection").setVisible(false);
}
}
Rather than doing a custom web resource to show/hide a field or section, I would recommend you go with a Business Rule. With a Business Rule you can set up a simple check of the value of one field and hide other fields based on that.
Another way to hide a section by field's parent. Just refer a field on that section:
function SetProductVisible()
{
var some_section = Xrm.Page.getControl("new_field_on_that_section_name").getParent();
some_section.setVisible(Xrm.Page.getAttribute("ee_productspecific").getValue());
};
I'd like to have a field that doesn't show at first, but if the user decided to input to it, then it will appear in the form.
I can use Jquery and do something like
$('input[example]')
.bind('click', function() {
$('#clickfield')
.append('<input id="new_field" name="MODEL[new_field]" size="30" type="text">');
However, I'd like to add this field in several different forms for different models.
Since the model name is in the field, how would I write the Jquery script to be modular so I can use the same script for all my forms?
One solution is to make a function with the names you want as input parameters:
addInput(form, id, modelName) {
$(form).append(
'<input id="'+id+'" name="'+modelName+'['+id+']" size="30" type="text">'
);
}
Where form would be the selector of the field ('#clickfield' in the example case), id would be the id of the new input field, and modelName would be the name of the model you mentioned.
Other solution, assuming 'input[example]' selects some button or clickable area that triggers the event of showing the field; and '#clickfield' is some div or span or some area where you will show your field, is to load these hidden fields from the server, styled as display:none, with a mnemonic class, so you could do something like define a function:
showField(clickable, class) {
$(clickable).click(
function(){
$(class).show();
}
);
}
and then:
$(document).ready(
showField('input[example1]', '.class1');
showField('input[example2]', '.class2');
showField('input[example3]', '.class3');
// .
// .
// .
// One line for every clickable area that triggers
// the event of showing a field, and the class of the
// field to show
);
this way you could add some user friendly features like fading the field in with the fadeIn() Jquery function (instead of show()), or any other animation on appearing.
Hope you could use it! good luck!
i have an annoying issue with watermarked text for a textbox.
what i want is if user click away of the textbox and there is no text in the textbox than the default text should appear (e.g. Search...)
i have this function to check it:
document.getElementById("searchtextbox").onblur = function() {
if (document.getElementById("searchtextbox").value == "") {
document.getElementById("searchtextbox").setAttribute("value", "Search...");
}
it works great if i just click inside and click out. the problem comes when i click inside, enter text and delete it and then click outside.
i tried doing it with Length == 0, value == null, value.trim() == "", !value.match(/.+/) and none of them return true for this case.
Please consider using the HTML5 placeholder attribute.
<input type="text" id="searchtextbox" placeholder="Search..." value="" />
As a lot of people under my answer pointed out, Internet Explorer won't be really keen on displaying your placeholder text (what a surprise). Still, it is way more semantic to use placeholder, and do a feature detection whether the browser supports it or not.
You can do feature detection like this (from diveintohtml5.ep.io):
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
If this is false, you can use your Javascript placeholder hack.
UPDATE: If you need help how to implement in a nice way, please refer to Html placeholder text in a textarea form.
I also took a look at your code and fixed it:
jsFiddle Demo
document.getElementById("searchtextbox").onblur = function() {
if (this.value == "") {
this.value="Search...";
}
}
Using setAttribute is not the right way here, you do not want to set the attribute, but the live property (.value). Your if condition actually worked, but the change was not reflected.
As bazmegakapa suggested, consider the placeholder attribute.
To answer your question, your code isn't working because you're using setAttribute, while the user just modified the property value. Instead of using setAttribute, try using .value = 'Search...'