I want to put a text next to an input box, after an successful if clause.
Just need to know how to show up such text.
Thanks
<input type="text" class="form-control" id="username" placeholder="Username" name="username" required autofocus/>
And my code snippet:
$("#username").append("<p>This username is not available</p>");
If your using jQuery, you can simply use:
$("#your-element-id").append("<strong>whatever text you need to add</strong>");
You will need to make sure that #your-element-id contains the input box. You may need to add the relavant CSS as well.
Related
i want to remove enter image description here
this OTP Box Automatically using Java script How can I do This ...
or how can i remove
<div class="col-32">
<input name="reotp" id="reotp" size="50" maxlength="6" type="password">
</div>
this automatically.
Not sure if you mean to hide it. If it so then this snippet will work
document.getElementById('reotp').style.display = "none"
If you want to remove the DOM then removeChild can be used
I want a textbox functionality like a gmail login page textbox. Right now I have code like this:
<script>
function inputFocus(i){
if(i.value===i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value===""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<body>
<input type="text" name="firstname" title="First Name" style="color:#888;"
value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />
...
</body>
The problem with this code is when I select the tetbox, type "First Name" and if I reselect the textbox the text is clearing. And also gmail login page textbox functionality looks great, until I type a letter it shows the transperent text. But I don't know how to implement it.
For the "transparent text" you need to use the placeholder attribute:
<input type="text" name="firstname" ... placeholder="Email">
are you looking for a placeholder ??
If so... you can do like this..
<input type="text" name="somename" id="someid" value="" placeholder="Email">
Placeholder is used to display the text in the text box and will disappear as soon as you start typing..
If you want to delete the "transparent text" once start typing, you can use placeholder attribute of input element
This attribute is introduced in HTML5 to handle this scenario without writing any peice of javascript code
Your html code should look like this
<input type="text" name="firstname" placeholder="First Name"/>
This will also work as desired when you delete your text, as it will reset the transparent text back again.
Also, here is a working example on jsfiddle
I also, encourage you to review new elements and attributes introduced in HTML5, it will save a your time writing a lot of javascript to handle already built in functionalities
I have a webpage with an email text field, that is not inside a <form> tag, like so:
<input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value="">
I'm using the latest Chrome (v35) and I've previously entered an email that is "example#domain.com" (for the sake of the explanation).
The problem is this:
When I reload my webpage, click on the email text field and start typing "exa", an auto-complete box pops-up with "example#domain.com".
If I move the mouse cursor over the suggestion, without clicking it, the text field shows the "example#domain.com" inside it. When I move the cursor away from the suggestion box, the text field still shows the full email address.
Why is that a problem? Because when I try to read the value of the text field using jQuery or vanilla javascript, I get "exa", instead of "example#domain.com".
$("#email").val(); // returns "exa"
If I envelope the input text field inside a <form> tag, the problem described above, doesn't occur - the auto-completed text disappears from the input field when the mouse cursor moves away from it, so the text field and the value reading is in sync.
<form><input id="email" label="False" name="email" placeholder="Email" required="required" type="email" value=""></form>
I've created a JSFiddle with a demo.
According to this, a an input field can work perfectly outside a <form> tag.
I've tested it on Firefox, and everything works well.
So why is that?
why don't you use autocomplete="off" attribute in input field. This one works fine for me on chrome
<input id="email" label="False" name="email" placeholder="Email" autocomplete="off" required="required" type="email" value="">
Updated Fiddle
I have an HTML form with many fields, including a text field, that is,
<input name="my_field" type="text"></input>
Now, this text field is being changed by tons of JavaScript, jQuery and CSS code. The result of all this interaction is that when the form is submitted, this particular text field simply gets ignored (it is like that field was not there). I am not saying it get submitted with empy text, it simply doesn't appear in the list of fields submitted...
Because there are tons of code affecting this particular text field, I don't know what is causing this weird behavior. So I was wondering if someone could tell me what kind of HTML attribute (or JavaScript code, or jQuery code, or ...) could result in a text field being ignored.
At the end of all this interaction, I get the following HTML code (retrieved using the "Inspect Element" from Chrome):
<input id="id_my_field" maxlength="200" name="my_field" type="text" class="tt-query" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;" data-original-title="" title=""></input>
You should add a name attribute to the input:
<input type="text" name="myinput" />
Add the name attribute, like this:
<input name="myField" type="text"></input>
I'm trying to find a script that will fill a textfield of say an optin form with a text like 'fill in your e-mail address' and dissappear when click on. I know they're all over the net but searching for it only returns javascript autofill scripts where suggestions are listed from a dropdown below the textfield.
HTML5 supports placeholder text, which you can use like this
<input name="email" placeholder="Enter your email address" />
This will automatically disappear when you click on the textfield. For older browsers, you can use one of the above suggestions.
This is what I use on my website Expiringlinks.co. Now, if you only want to apply this to one input, change $('input') to $('#yourinputid'). The input field should have a value field that equals your before text.
var tempValue='';
$('input').click(function(){
tempValue = $(this).attr('value');
$(this).attr('value','');
});
$('input').focusout(function(){
if ($(this).attr('value')==''){
$(this).attr('value',tempValue);
}
});
For you input field
<input type="text" value="Whatever you want to show before the click" />
jsFiddle example
Or, a slightly different fiddle that doesn't require an ID on the label, but needs the textbox/label to be wrapped in something, for example a <p> tag.
HTML
<input type="text" name="email_address" id="Email" />
<label for="Email" id="EmailLabel">Please enter your email address</label>
CSS
label
{
display: none;
}
jQuery
$(document).ready(function()
{
$('#Email').focus(function()
{
$('#EmailLabel').show();
}).blur(function()
{
$('#EmailLabel').hide();
});
});