The contents of <textarea> seems to get cleared once I hide it with display : none and show it back again by removing display. Is there a way to retain the original value when the textarea shows again?
Maybe try using jQuery or some other javascript framework.
In case of jQuery the show and hide function do the magic for you.
<textarea cols="5" rows="5" id="test">Test</textarea>
<input type="button" value="switch on" onclick="$('#test').show();">
<input type="button" value="switch off" onclick="$('#test').hide();">
Well, if you just remove the display, there might be some faults. You have to set it to inline (in case of an inline element) or block (in case of a block element) if you want to make it visible again. The css-Property display can be set to none|inline|block. So if you set the display to none you should set it back to inline instead of removing the property afterwards.
Here is a solution w/o jQuery:
<textarea id="test">TEST</textarea>
<input type="button" value="switch on" onclick="showTest();"/>
<input type="button" value="switch off" onclick="hideTest();"/>
<script type="text/javascript">
function hideTest() {
var field = document.getElementById('test');
field.style.display = 'none';
}
function showTest() {
var field = document.getElementById('test');
field.style.display = 'inline';
}
</script>
Related
I have two html pages page_1.html and page_2.html. In page_1.html, I have a button, which upon being clicked should redirect to page_2.html. But it should redirect only when the button has a charteuse background color.
So, in page_1.html, I have a button:
Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
<button id="button" onmouseover="hovar()" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
My javascript (back_end.js):
function hovar(){
var phone=document.getElementById("ph_number").value;
var btn=document.getElementById("button");
if (phone.length!=10){
btn.style.backgroundColor="lightsalmon"
}
else{
btn.style.backgroundColor="chartreuse"
btn.style.color="black"
}
}
function submit(){
var btn=document.getElementById("button");
if (getComputedStyle(btn).backgroundColor == "charteuse"){
window.location.href="page_2.html";
}
}
But, it doesn't redirect to page_2.html. What am I missing here? I have also tried window.location.replace("page_2.html"), but it's the same.
EDIT: I have changed the code a little, it's from a project I'm doing. I have also tried getComputedStyle(document.getElementById("button")).backgroundColor, but it doesn't work.
Another thing that I've noticed, is that when I use:
if (btn.style.backgroundColor == "charteuse"){
//console.log(true)
location.href="page_2.html";
}
it prints true into the console but still doesn't redirect to page_2.html.
But if I use:
if (getComputedStyle(btn).backgroundColor == "charteuse"){
//console.log(true)
window.location.href="page_2.html";
}
it doesn't print true into the console.
But nevertheless, in both the cases, it doesn't redirect to page_2.html
ElementCSSInlineStyle.style
The style property is used to get as well as set the inline style of
an element. When getting, it returns a CSSStyleDeclaration object that
contains a list of all styles properties for that element with values
assigned for the attributes that are defined in the element's inline
style attribute.
https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style
So your if-conditon document.getElementById("button").style.backgoundColor == "red" does never return true because the color is defined in your css-file and not as an inline argument.
A solution would be using getComputedStyle(element) which returns the actuall style from the css-file.
getComputedStyle(document.getElementById("button")).backgroundColor == "red"
as explained here https://zellwk.com/blog/css-values-in-js/
Also in your css, you can remove the quotationmarks around "red" as mentioned by #George
The styles property doesn't directly reflect your CSS, so running
if(document.getElementById("button").style.backgoundColor=="red"){
never works.
What you can do is change the color to red using javascript:
function changeButtonColor(color) {
document.getElementById("button").style.backgoundColor = color;
}
changeButtonColor('red');
So you do this, wherever you need to change the background color, your if statement will work correctly and you can switch.
so you should compare like this
var btn=document.getElementById("button");
if (getComputedStyle(btn).backgroundColor == "rgb(127, 255, 0)"){
window.location.href="page_2.html";
}
}
I am trying to create an HTML form is separate parts for layout reasons. As far as I understand, you can use a fieldset with a form attribute to associate the fieldset with the form, even if it’s not inside the form (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset).
However, if I have a separate fieldset with a submit button or another input in it, it doesn’t seem to work.
<form id="test">
<input name="inside-stuff" value="Inside">
<button type="submit">Doit Inside</button>
</form>
<fieldset form="test">
<input name="outside-stuff" value="Outside">
<button type="submit">Doit Outside</button>
</fieldset>
In the above snippet I have two submit buttons and two inputs. The one in the actual form works, while the one in the attached fieldset doesn’t. When I use the inside submit button, it only submits what’s in side the main form, not what is in the associated fieldset.
This may not be obvious when running the snippet, but is certainly the case when tried in real life.
What is missing to make this work?
Update 1
The problem appears to be more generic than that. I find that input elements inside an associated fieldset don’t get submitted either.
Update 2
This is not a duplicate of Submit form using a button outside the <form> tag. This question specifically refers to a fieldset element. The other doesn’t even mention it.
I wrote the following javascript
function control() {
function view(i) {
var frm = items[i].getAttribute("form");
var fBase = document.querySelector("form[id=" + frm + "]");
fBase.addEventListener("submit", function(){
var fld = document.querySelector("fieldset[form='" + this.id + "']");
var cln = fld.cloneNode(true);
cln.style.display = "none";
document.getElementById(frm).appendChild(cln);
},true);
}
var items = document.querySelectorAll("FIELDSET[form]");
var getter = function () {
return this.getAttribute("form");
};
for(var i = 0; i < items.length; i++) {
view(i);
Object.defineProperty(items[i], 'form', {
get: getter
});
}
}
window.addEventListener("load",control,true);
It's happening because the Form you have placed inside the fieldset is wrong. The form should be the parent of the fieldset in order to get it to work!
The form tag should always be the parent of the fieldset.
If you place <form> and <fieldset> then it will work. The code below should do.
<form id="test">
<input name="stuff">
<button type="submit">Doit</button>
</form>
<form>
<fieldset>
<input type="text" name="stuff2">
<button type="submit">Doit</button>
</fieldset>
</form>
I hope this will help!
I have a simple input field:
<input id="myInput" class="someClass"></input>
and some JQuery code:
$(e.currentTarget).prop('readonly', true);
where e.currentTargetis that [object HTMLInputElement] as IE11 names it.
I'm only trying to set this input field to be readonly. In chrome that code works but in IE not.
I tried already:
.prop('readonly','readonly');
.prop('readonly', '');
.attr('readonly', true);
but none of them works in IE11 ( in chrome everyone of them works)
Okay, this is bizarre: If you make the field read-only while it has focus, IE11 seems to go a bit bonkers, and one of the ways it goes bonkers is to let you keep modifying the field while the cursor is there — with some keystrokes, but not others. Here's an example: Fiddle
$("#myInput").one("click", function(e) {
$(e.currentTarget).prop('readonly', true);
display("e.currentTarget.readOnly: " + e.currentTarget.readOnly);
});
$("#myInput").on("keydown", function(e) {
display("e.currentTarget.readOnly: " + e.currentTarget.readOnly);
});
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}
Adding this line before setting readOnly fixes it (fiddle):
$(e.currentTarget).blur();
Side note: You don't need jQuery to set the readOnly property, just:
e.currentTarget.readOnly = true; // Note the capital O
'Read-only' input element doesn't work consistently in IE 8,9, 10 or 11.
In this case, we can use onkeydown="javascript: return false;" in the input element.
I have used Focusin() function in jquery side with Id. When I click on textbox then we remove readony attribute as below:
HTML:
<input type="text" id="txtCustomerSearch" readonly class="customer-search"
placeholder="Search customer:" maxlength="100" autocomplete="off">
Jquery:
$("#txtCustomerSearch").focusin(function () {
$(this).removeAttr('readonly');
});
Note: it will working in IE11 and other browser.
I am trying to make a textarea appear when I click on a button because I don't need it to be displayed by itself in my html page.
I'm using something like:
<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical" ></textarea>
But this is not resolving my problem.
Any idea how I can do that?
I actually have two textarea that display the content of existing files, and when I click on a button to show the content in one text area and then click on the second button to show the content of the second textarea, the first textarea becomes empty while I need to keep both contents in both textareas displayed at the same time! How can I do that too?
If you're using jQuery already, you might do something like this:
<textarea cols="50" rows="20" name="text" id="text_id" class="form-control" style="resize:vertical;display:none"></textarea>
<button class="show_button">Show/hide textarea</button>
<script>$(".show_button").click(function(){$("#text_id").toggle()})</script>
This will toggle the textarea for showing
I'm just assuming you're using jQuery, since form-control is used with Bootstrap - That requires jQuery.
You can use simple javascript or even jquery. But for simple javascript u can do it like this:
On script tag inside head section write:
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical' ></textarea>";
}
</script>
On Body section :
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click here</button>
<textarea cols = '50' rows = '20' name='text' id='text_id' class='form-control' style='resize:vertical; visibility:hidden'> </textarea>
<button onClick='document.getElementById("text_id").style.visibility = "visible" '> Click me !</button>
This is the most compact way you can do this I can think of:
We are giving the Textarea a CSS property to stay hidden Display = 'none'.
Once the button is clicked, it changes that css property to Display = 'block' to make it visible.
<textarea cols = "50" rows = "20" name="text" id="text_id" class="form-control" style="resize:vertical; display = 'none'"></textarea>
<button onclick = "document.getElementById('text_id').style.display = 'block'">
This works in Chrome and any other browser that supports placeholder text in HTML5
<input id="name" name="name" type="text" placeholder="Please enter your name..." required /> <br />
But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.
How do I achieve the same thing (preferably in HTML/CSS - if not I am open to suggestions), to support all the older browsers? If not every single browser, at least Firefox and IE.
Safari and Chrome already support it (or the latest versions anyway).
Thanks.
One day I'll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html
In short — position a <label> under a transparent <input> using <div> to provide background colour and borders.
Then use JS to determine if the label should be visible or not based on focusing.
Apply different styles when JS is not available to position the label beside the element instead.
Unlike using the value, this doesn't render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the password type.
I use this one: https://github.com/danbentley/placeholder
Lightweight and simple jQuery plugin.
Here is the simplest solution that I found working everywhere:
<input id="search"
name="search"
onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}"
onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}"
/>
Replace PLACEHOLDER with your own.
At the moment, FF3 does not yet support the "placeholder" attribute of the "input" element. FF4, Opera11 and Chrome8 support it partially, i.e. they render the placeholder text in the field, but do not delete it when the user focuses in the field, which is worse that not supporting it at all.
I use the following snippet that I wrote with jQuery. Just add a class of textbox-auto-clear to any textbox on the page and you should be good to go.
<input type="text" value="Please enter your name" class="textbox-auto-clear" />
$(".textbox-auto-clear").each(function(){
var origValue = $(this).val(); // Store the original value
$(this).focus(function(){
if($(this).val() == origValue) {
$(this).val('');
}
});
$(this).blur(function(){
if($(this).val() == '') {
$(this).val(origValue);
}
});
});
I assume that you want to keep using the placeholder attribute for HTML5 browsers, in which case you'd have to do some browser detection and only apply the jQuery solution to browsers that don't support it.
Better yet, you can us the Modernizer library, as outlined in this answer.
Detecting support for specific HTML 5 features via jQuery
Here is a MooTools Plugin, that brings the placeholder to browsers that don't support it yet:
http://mootools.net/forge/p/form_placeholder
I use this one: https://github.com/Jayphen/placeholder
This lightweight and simple jQuery plugin is a fork of danbentley/placeholder.
Advantage: it adds a class "placeholder" to input fields that are temporarily filled.
Css ".placeholder {color:silver}" make the polyfill text look like a placeholder instead of regular input text.
Disadvantage: It doesn't polyfill the placeholder of a password field.
By the way...if anyone is interested...I found a nice elegant solution that is a jQuery plugin that is SOOO nice.
It literally is one line of jQuery, a minified js plugin, along with a simple class name on the input.
http://labs.thesedays.com/projects/jquery/clearfield/
It's the most beautiful thing I have discovered, next to 'Placeholder' in html.
The trick is to use javascript functions onBlur() and onFocus().
Here is the code that worked for me:
<script language="javascript" type="text/javascript" >
var hint_color = "grey", field_color = null;
var hinted = true;
function hint() { // set the default text
document.getElementById('mce-EMAIL').style.color = hint_color;
document.getElementById('mce-EMAIL').value = "<?php echo SUBSCRIPTION_HINT; ?>";
hinted = true;
}
function hintIfEmpty() { // set the default text, only if the field is empty
if (document.getElementById('mce-EMAIL').value == '') hint();
}
function removeHint() {
if (hinted) {
document.getElementById('mce-EMAIL').style.color = field_color;
document.getElementById('mce-EMAIL').value = "";
hinted = false;
}
}
function send() {
document.getElementById('subscription_form').submit();
hint();
}
</script>
<div style="position:absolute; display: block; top:10; left:10; ">
<form id="subscription_form" action="<?php echo SUBSCRIPTION_LINK; ?>" method="post" target="_blank">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required>
<font style="position: relative; top:-1px;"><b>ok</b></font>
</form>
</div>
<script language="javascript" type="text/javascript" >
field_color = document.getElementById('mce-EMAIL').style.color;
hint();
</script>
SUBSCRIPTION_HINT (i.e.: "your e-mail" ) and SUBSCRIPTION_LINK (i.e.: the value of the 'action' tag in your EN mailchimp embed code...) are PHP constants used for localization.
For "placeholder" work in Firefox just add the attribute
::-moz-placeholder
in CSS tags.
Works for me, change your CSS to
::-webkit-input-placeholder {
color: #999;
}