I have a inputbox. What I want to make it when I click in the inputbox a text to appear NEAR the inputbox, if I click OUT inputbox, the text disappears...
I've tried this, and it works but not completely:
<style type="text/css">
.hidden {display:none}
</style>
then
<input name="title" type="text" id="title" onclick="document.getElementById ('TEXT_CLASS').className = document.getElementById ('TEXT_CLASS').className == 'hidden' ? '' : 'hidden'" />
then
<span id="TEXT_CLASS" class="hidden">the text that I want to appear on click</span>
so this all does works, BUT, the text does not disappear when I click out, the text just toggles..
Can somebody please help me in making the text appear ONLY when "onclick", and disappear ONLY when "click out"?
Thank you
When you say click out, I think you mean blur.. meaning the textbox losing focus.. Then you need to implement the onblur event.
You should implement onfocus and onblur like below.
<input name="title" type="text" id="title"
onfocus="document.getElementById('TEXT_CLASS').className = ''";
onblur=" document.getElementById('TEXT_CLASS').className = 'hidden';"
/>
Probably you should consider doing this like below,
<input name="title" type="text" id="title" />
<span id="TEXT_CLASS" class="hidden">Test Class</span>
<script>
var titleEl = document.getElementById('title');
var textSpanEl = document.getElementById('TEXT_CLASS');
titleEl.onfocus = function () {
textSpanEl .className = '';
}
titleEl.onblur = function () {
textSpanEl .className = 'hidden';
}
</script>
DEMO: http://jsfiddle.net/LyKze/
If you're using jQuery, you can do something like
$('#title').click(function(){
$('#TEXT_CLASS').css('display', $('#TEXT_CLASS').is(':visible') ? 'none' : 'block');
})
I suggest you create a javascript function which will toggle the visibility of the span.
function setVisilibity(span, visible)
{
span.style.display = visible ? "block" : "none";
}
Set TEXT_CLASS to hidden by default and then do the following
$("#title").focus(functiion(){
$("#TEXT_CLASS").show();
});
Related
How do I add a string in the beginning of this textbox and have it as read only and then allow users to enter text ahead of it?
Here is my code:
<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40"></textarea>
Currently it's a plain textbox you can type anything inside. What I want is like this: I WILL: demo text
so I Will: Will be read only and greyed and user input text will be in front of it.
This is pretty easy to do with a little bit of JavaScript.
Add an id, such asid="myTextArea", to the HTML for your textarea like this:
<textarea style="width: 387px; height: 17px;" rows="3" class="do_input" name="job_title" cols="40" id="myTextArea"></textarea>
Then, add the following JavaScript somewhere in your page or in the head section:
readOnlyString = "I WILL: "
myTextArea = document.getElementById("myTextArea");
myTextArea.value = readOnlyString;
preservedText = readOnlyString;
// Check the value only when the textarea is focused and after the user presses a key
myTextArea.onfocus = function () {
document.onkeyup = function (e) {
updatedText = myTextArea.value;
if (updatedText.indexOf(readOnlyString) == -1)
{
myTextArea.value = preservedText;
}
preservedText = myTextArea.value;
};
};
You can check out the JSFiddle here if you want to play around with it.
I think what you're looking for is the placeholder attribute
http://www.w3schools.com/tags/att_input_placeholder.asp
and I think you're also looking for the readonly attribute
http://www.w3schools.com/tags/att_input_readonly.asp
Script
<script type="text/javascript">
function KeyHandler() {
var result = document.getElementById('result');
result.innerHTML=document.getElementById('txtInput').value;
}
</script>
HTML
<input type="text" id="inputField" />
<div id="screen"></div>
This code work good in html but i want
<a href="#?call=limit.lim&height=400&width=400&id={$ID}&team=
{$Name}&val={'**********'}&name={$Name2}&catname={$Cat}"
class="inlinePopup" title="{'Namer'}">{$Single}</a>
val={'****'} What ever i type in the text box that's i want here in the star position how
val={'<div id="screen"></div>'} this not work
Example : type a value 123 in the text box means that's instant like
val = 123
You could change the href attribute of the link in your KeyHandler function.
For example:
function keyHandler(){
var inputText = document.getElementById('inputField').value;
document.getElementById('myLink').href = '#?yourParam=something&val='+encodeURIComponent(inputText);
}
Would work with the HTML:
<input type="text" id="inputField" onkeydown="keyHandler()" />
Link Text
Could you adapt this technique to suit your needs? Alternatively, could you provide more details about your problem? Example code, motivation, context etc?
Is it possible to have a text input field which displays somewhere else (e.g. in a div) what its content is on change?
Example: I type 1, so 1 is outputted somewhere on my screen immediatly, then I type 2 and the previous value is now updated to 12.
html
<input type="text" id="inputField" />
<div id="screen"></div>
script
document.getElementById('inputField').onkeyup = function(){
document.getElementById('screen').innerHTML = this.value;
};
The code is good but I want the screen's inner html value to be format in php. Example: the screen value is stored into $screen and then I'd echo the output where i want into the screen
[I want (echo "$screen";) like in php I will type the number in text box means it echo the value immediately used with php format]
how to store a screen value into variable $screen
You can do this by little javascript code, (assuming that you need to display text entered in a input field on a html div),
So try this in html,
<input type="text" id="inputField" />
<div id="screen"></div>
and bind a onkeyup event to the input field by which you can get the text when someone enters into it. So your javascript will be,
document.getElementById('inputField').onkeyup = function(){
document.getElementById('screen').innerHTML = this.value;
};
Working demo here and you can post the input field value to any php script by including a form element in your html code.
Try this,
HTML
<input type="text" id="addInput" />
<div id="showdata"></div>
SCRIPT
$('input#addInput').on('keyup',function(){
$('div#showdata').html($(this).val());
});
<html >
<head>
<script type="text/javascript">
function KeyHandler() {
var result = document.getElementById('result');
result.innerHTML=document.getElementById('txtInput').value;
}
</script>
</head>
<body >
<div>Type something.........</div><br />
<input type='text' id='txtInput'onkeyup="KeyHandler()" />
<br/>
Result:
<div id="result"></div>
</body>
</html>
I have generated multiple text boxes using PHP with name="student[<?php echo $StudentID ; ?>]".
Now on a button click i want to change the value of all these text boxes using jquery.
How do i do this ? Please help.
You can use the Attribute Starts With selector, to look for student[ at the beginning of the name attribute:
$('input[name^="student["]').val('the new value');
It's probably unnecessary to include the [ at the end, and name^="student" will be sufficient, assuming you don't have other inputs with names like student_name or the like.
// If no conflicting named inputs, use
$('input[name^="student"]').val('the new value');
HTML
<input type="text" name="student[]"></input>
<input type="text" name="student[]"></input>
<input type="text" name="student[]"></input>
<button id="button">Change</button>
JavaScript
$('#button').click(function() {
$('input[name^="student"]').val('some value ');
});
JSFiddle
You can also simply add a class that is unique to all of those text boxes (i.e. changableTextBox) and then select it with that and change them all at once. It's also helpful for the future if you need to adjust some styling on all of them at once. Just declare that class in CSS and you're styling.
<input type="text" class="changeableStudentTextBox" id="student[11]" />
<input type="text" class="changeableStudentTextBox" id="student[23]" />
<input type="text" class="changeableStudentTextBox" id="student[45]" />
<input type="text" class="changeableStudentTextBox" id="student[66]" />
<script type="text/javascript">
$('#button').click( function() { $('.changeableStudentTextBox').val('hi!'); });
</script>
Is it possible?
I want a user to post an array full of 1-5 pieces of data.
At first there would be only one text field on show, but on clicking a 'plus' icon next to it, it would create another text field below it for more user input.
I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.
My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.
<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">
jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)
<ul>
<li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
$('#addTextbox').click(function(){
var li = $('ul li:first').clone().appendTo($('ul'));
// empty the value if something is already filled in the cloned copy
li.children('input').val('');
li.append($('<button />').click(function(){
li.remove();
// don't need to check how many there are, since it will be less than 5.
$('#addTextbox').attr('disabled',false);
}).text('Remove'));
// disable button if its the 5th that was added
if ($('ul').children().length==5){
$(this).attr('disabled',true);
}
});
});
</script>
For the server-side part, you could then do a foreach() loop through the $_POST['textbox']
As long as you give each text box a name like "my_input[]", then when the form is submitted, PHP can get the answer(s) as an array.
$_REQUEST['my_input']; would be an array of the values stored in each text box.
Source: Add and Remove items with jQuery
Add
Remove
<p><input type="text" value="1" /></p>
<script type="text/javascript">
$(function() { // when document has loaded
var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work
$('a#add').click(function() { // when you click the add link
$('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
i++; //after the click i will be i = 3 if you click again i will be i = 4
});
$('a#remove').click(function() { // similar to the previous, when you click remove link
if(i > 1) { // if you have at least 1 input on the form
$('input:last').remove(); //remove the last input
i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
}
});
$('a.reset').click(function() {
while(i > 2) { // while you have more than 1 input on the page
$('input:last').remove(); // remove inputs
i--;
}
});
});
</script>
You will need to create DOM elements dynamically. See how it is done for example in this question. Notice that
document.createElement
is faster then using jquery's syntax like
$('<div></div>')
Using that technick, you could create inputs like
<input name="id1"/>
<input name="id2"/>
<input name="id3"/>
<input name="id4"/>
<input name="id5"/>
On submitting your form you'll get all them in your query string like
...id1=someval1&id2=someval2&...
Having that, you could process this query as you want on server side.
<form method="POST" id="myform">
<input />
Add textbox
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#add_textbox').click(function(){
var form=$(this).closest('form');
var count=form.find('input').length();
form.append('<div class="removable_textbox"><input />delete</div>');
$('.delete_input').click(function(){
$(this).find('.removable_textbox').remove();
return false;
});
return false;
});
$('#myform').submit(function(){
var i=1;
$(this).find('input').each(function(){
$(this).attr('name','input-'+i);
i++;
})
});
});
</script>
<?php
if(isset($_POST['input-1'])){
$input_array=$_POST;
}
?>
something like this?
I wrote a litte jQuery plugin called textbox. You can find it here: http://jsfiddle.net/mkuklis/pQyYy/2/
You can initialize it on the form element like this:
$('#form').textbox({
maxNum: 5,
values: ["test1"],
name: "textbox",
onSubmit: function(data) {
// do something with form data
}
});
the settings are optional and they indicate:
maxNum - the max number of elements rendered on the screen
values - an array of initial values (you can use this to pass initial values which for example could come from server)
name - the name of the input text field
onSubmit - onSubmit callback executed when save button is clicked. The passed data parameter holds serialized form data.
The plugin is not perfect but it could be a good start.