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'">
Related
As in title, I would like to see what I'm writing by input text.
There is my code:
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
When I'm writing I can see [object HTMLInputElement] inside h2 but if I'm not writing nothing I can't see nothing on it. Any ideas?
You don't have to set the object txtLogo as text, but instead its value.
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
In your case, you are passing an element. But you need to pass the text value of this element. You can solve this problem in two ways.
Add the value parameter to txtLogo. It should be like this:
myLogo.text(txtLogo.value);
Or you can write the same parameter for this, in event onkeyup, inside the <input> tag. Like this:
onkeyup="setLogo(this.value)"
How do I change the input box so it makes a new line after a certain length and also so that it adjusts its size too in react js
<form>
<input
className="form message"
onBlur={handleBlur}
placeholder="MESSAGE"
onChange={handleChange}
name="message"
value={values.message}
/>
</form>
For multiline inputs, you should use texteareas. If you want to dynamically change its height, maybe you could just increment the rows attribute depending on your content length.
You should be using a <textarea>. In practice, <input> fields should only be one line.
You do not need React to modify the height of a textarea. You can do it pretty easily below:
function updateHeight(element) {
element.style.height = "1px";
element.style.height = (element.scrollHeight)+"px";
}
textarea{
width:90%;
margin:auto;
}
<textarea oninput="updateHeight(this)" style="overflow:hidden; height:19px"></textarea>
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!
So i am making a php login page. I have the login application finished but all i need are a list of classes that will style my login form the way i want it.
Picture of the login form now - http://i.imgur.com/mrfvXXq.png
I need to style it so it is centered on the screen and will also not take the whole width.
I want it to look like this - http://i.imgur.com/C6G0FGK.png
Now i need it centered on the screen. Note im not adding in the Email input and text box. Only my Username and Password input. All i need is styles.
For a live version please visit gippixservers.com/zAdmin/admindashboard
Code -
">
<div class = "form-group">
<label for="txtUsername" class = "col-lg-2 control-label">Username:</label>
<div class = "col-lg-10">
<input class = "form-control input-block-level" type="text" title="Enter your Username" name="txtUsername" placeholder = "Username" />
</div>
</div>
<div class = "form-group">
<label for="txtPassword" class = "col-lg-2 control-label">Password:</label>
<div class = "col-lg-10">
<input class = "form-control input-block-level" type="password" title="Enter your password" name="txtPassword" placeholder = "Password" />
</div>
</div>
<div class = "form-control">
<input class = "btn btn-primary" type="submit" name="Submit" value = "Login"></input>
</div>
</form>
Bootstrap uses a grid system to place elements:
There are 12 grids you can have on one row. I have used col-*-offset in the code, this will leave space in the beginning. So what I'm basically doing is:
form class="form-horizontal col-md-offset-4 col-md-4" name="form"
method="post" action="/zAdmin/admindashboard.php"
This means, leave grid of 4 length before the form, and set the form to be of grid 4 length thus your form gets centered. [the leftover space on right is 4, all together in total making it 12]
Few changes made near your login button too. Use the class pull-right to position elements to the right side.
Also, remove this:
#gippix-adminControl {
width: 50%;
margin: 0 auto;
}
This is already done with the classes I mentioned above.
Fiddle Demo
I think your asking to make the live version smaller and centered ?
You need to add the following to your form tag. OR wrap your form in a div.
width: 50%; /* or whatever width you see fit */
margin: 0 auto;
Alternatively, You can view all bootstraps predefined form display options - getbootstrap.com/css/#forms
Or on your div <div id="gippix-adminControl" ... inputs... </div>
Just adjust your css to
#gippix-adminControl input{
width: blah;
max-width: blah;
min-width: blah;
}
To move your login button to the right simply set your
<input class="btn btn-primary" type="submit" name="Submit" value="Login">
to float: right; either in your css sheet or inline.
You can put a max-width to your .gippix-adminControl css class and go from there.
.container{max-width: 500px;}
You can also remove the div around your button , that will get rid of the unintended border. Then put a float: right on the button and you'll have yourself a good looking login form !
you can also make a .loginbutton-right css class like this :
.loginbutton-right{float: right;}
and add that class to your button !
It results in this :
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>