As part of my websites setup I am using a login form that is generated using a shortcode; because of this I cannot add the placeholder attribute in the HTML of the form so my only option is to add it using JS/jQuery. Unfortunately this is an area of website development that I am unfamiliar with.
I need to add 2 different placeholder texts, one for the 'Email' field and another for the 'Password' field. To make this easier you can view the form here:
https://members.argentumfx.co.uk
The top field is for the 'Email' placeholder and the bottom field is for the 'Password' placeholder.
Here is an example of what I'm looking for:
View Placeholder Mockup
#user_login is the ID of the Email field; #user_pass is the ID of the Password field.
Please can someone provide me with some JS/jQuery to achieve this task?
Without any libraries:
document.getElementById("user_login").setAttribute("placeholder","Email Address");
If you have jQuery, you can use the attr method to set the placeholder attribute on each input.
$(function() {
$('input#user_login').attr('placeholder', 'Email Address');
$('input#user_pass').attr('placeholder', 'Password');
});
Related
I have this working code which I'm using to set placeholder values for username and password fields:
<script>document.getElementById("user_login").setAttribute("placeholder","Please enter your Email Address");</script>
and
<script>document.getElementById("user_pass").setAttribute("placeholder","Please enter your Password");</script>
Now I'm trying to apply this to a 3rd box which has the input ID #memb_password_send-1-email-input but this isn't a straight up element, it's an input field and using this ID (as above) obviously doesn't work.
Here is a picture of console:
What would be the correct way to target this field with placeholder text?
Same method used to provide placeholder for username and password fields would work in this case as well as those are input fields as well. Just make sure that when you are writing this code in in-line script, do this after that input box has rendered i.e. after it's markup so that element is available to get selected.
i have developed for my website a tag system, people can add tags. Someone can add a tag in a form by clicking a button. In that form people will be able to add multiple tags, is there a way to to group the tags like on StackOverflow tags or like the email addresses in gmail, with a X to remove it if needed?
Example in the image:
Thanks
You did not mention using jQuery, nevertheless, I am giving you a quick method that you can use.
Create a textbox, and give it 100% width, and ID it with something like "tag_text". Before the textbox, create a DIV and give it an ID, say "tags_container".
Add an keyup (onkeyup for JS) listener and see if the textbox contains the text that matches with your tag requirements.
If yes, create the tag.
$('#tag_text').on('keyup',{},function(e){
if(e.which==8)
{
//Check if the TAB key was pressed
var tag=$('<div class="tag">').appendTo($("#tags_container"));
var tagText=$('<span class="tagtext">').appendTo(tag).text($('#tag_text').val());
var tagIcon=$('<span class="tagremove"').appendTo(tag).text('X');
$(tagIcon).click({},function(e){
$(this).remove();
//Reset the textbox text:
$('#tag_text').val("");
});
}
}
Give appropriate CSS so that tags have different color.
I have some fields that are shown only depending on some conditions, it work's fine to show and hide field with Jquery
but these fields are validated on submit even if they are hidden, I have required in the model
how I can't validate the hidden fields ?? I found : http://fluentvalidation.codeplex.com/
or I can apply the following MVC hidden field being validated
Thanks
you can change the input name attribute when you are hiding/showing it.
That way the it would be ignored.
When you are doing your validation, add a condition:
if($("#myHiddenElement").css("display")!="none")
I'm very new to developing Safari Extensions and I don't know any java, css or html.
I've been searching round the web for a way to interact with a website using javascript injection. Specifically, I wish to fill out two forms; a username and a password and then press the 'login' button.
I've learned that I need to use something like document.getElementById() and .click and .value, but I really don't know how to connect the dots.
Any help is much appreciated!
Kind regards, Tokke
I will assume that when you say two forms, username and password you mean two text inputs, and then submit the form.
What you should do, is:
Select each text input and change its value attribute.
Submit the form
Could be done with the following code, assuming that your form has an id="my-form", your username input has id="username" and your password input has id="password".
document.getElementById("username").value = "myusername"; // Select and fill username input
document.getElementById("password").value = "mypassword"; // Select and fill password input
document.getElementById("my-form").submit(); // Submit the form
I am having problems with a password field because it doesn't shows properly the emptytext that I pass through the config object, here is my code:
{xtype: 'textfield',
inputType: 'password',
emptyText: '//Password',
width: 200}
the problem is that the EmptyText looks like a password too and users can't read it. Please helpme with this, thanks in advance.
Abel
You cant easily do what you want with the default Ext.form.TextField component.
Normally, Ext will use <input type="text" /> , but when inputType is set to 'password', it uses an <input type="password" /> field instead.
When you supply an emptyText field, all it does is pre-populate the field with the emptyText (ie: value="emptyText") and adds a CSS className to make the text dull.
When the field is blank, or the value in the field is the same as emptyText, the field is considered to be blank.
Anyway, to do what your asking for, you'll have to extend TextField, and to some trickery to mimic the behavior.
Effectively, when the text value is emptyText, hide the password field, and show a normal text field.
Another solution that will work for modern browsers is to use the new HTML5 placeholder attribute on your input field. You'll have to either extend Ext.form.TextField to add this as a config option, or manipulate the DOM after render to add it. (personally, I think adding placeholder as a config option should be added to the Ext JS library)