Develop Reference

make placeholder text reappear when no text is in the input field

I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}

When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo

The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>

You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/

There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.

You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}

jQuery: trigger click or focus input field

I have a page with multiple divs that all look like the example below.
Each div contains a field, a hidden field and a button.
How can I achieve that by click on the button the (visible) input field gets triggered ?
I need to trigger either a click or focus as both fire the same function.
Each button in question has the class="triggerBtn" and the corresponding input field has the class="inputField".
Example div:
<div>
<input type="text" class="inputField" id="field1" name="field1" />
<input type="hidden" name="field1" />
<button type="button" class="btn btn-primary triggerBtn">Find</button>
</div>

I guess you want:
$(".triggerBtn").click(function () {
$(this).closest('div').find('.inputField').focus();
});

add
Onclick="function()" see here
if you need to trigger it manually using jquery you can to this by
$("#field1").trigger("click");
see also here

$(".triggerBtn").on("click",function(e){
$(this).closest("div").find(".inputField").click();
//or $(this).closest("div").find(".inputField").focus();
});

$(".triggerBtn").parent().children("input[type:text]").first().focus()

Updated Jsfiddle: http://jsfiddle.net/ZmL4y/3/
$(document).on("click",".triggerBtn", function() {
var inputField = $(this).closest('div').find('.inputField');
if($(inputField).is(":visible"))
{
$(inputField ).focus();
}
});

delete dynamically created textbox

I have the following code which I use to add text-boxes dynamically on click of button. It works.
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" onclick="addForm()"/>
The javascript for the above code is:
function addForm() {
$("#forms").append(
"<input type ='text' class='winner' name='winner[]'><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
}
I am using auto complete to get data from database in the text-box
What I want is - suppose if a user clicks on add more winner button but does not want to add any data in the textbox, I should give him a button to delete the extra text-box.
How should the JavaScript be written for this?
Do see my above code

var i=0;
function addForm() {
i++;
$("#forms").append(
"<input type ='text' id='input_'"+i+" class='winner' name='winner[]'><button onclick='delete('"+i+"')' id='button_'"+i+">delete</button><br/>");
$(".winner").autocomplete("autocomplete.php", {
selectFirst: true
});
function delete(i)
{
$("#input_"+i).remove();
$("#button_"+i).remove();
}
simply use a counter to set an ID to inputs and buttons and send that counter to delete function;

Simply use the code below :
$("#forms").append("<p><input type ='text' class='winner' name='winner[]' ><button onclick='$(this).parent().remove()'>delete</button></p>");

Try this function.
function removeElement()
{
if(intTextBox != 0)
{
var contentID = document.getElementById('content');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}

Try adding a remove button while adding a text box dynamically to remove the text box if necessary
Here is the html code
<div id="forms" name="forms">
<input name="winner[]" type="text" id="tag" size="20"/><br/>
</div>
<input type="button" name="addmore" id="addmore" value="Add More Winners" />
Here is the jQuery code
$('#addmore').click(function () {
$('#forms').append('<input type ="text" class="winner" name="winner[]"><input type="button" onclick="$(this).prev().remove();$(this).remove();">');
});
Here is the demo

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially

You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements

try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});

Here's an example using toggle:
http://jsfiddle.net/x5qYz/

<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});

$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});

Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />

Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.

Validate a textbox using JQuery

I have TextBox and a Button
first the button is in disabled position
When the user starts typing the text in textbox
the button should be enabled
How can i achieve this using JQuery or Java Script

Seems like you are a newbie to jQuery. I would say you start with jQuery Tutorials and then move on to jQuery Validate. If you prefer books to start with, you can pick up a copy of jQuery in Action.

you can try with this also
<input type='text' id='textbox'>
<input type="button" class="button-disabled" id="change" disabled="disabled" value="click">
$("#textbox").keyup(checkForm).focus(checkForm);
function checkForm()
{
if($("#textbox").val()=='')
{
$("#change").addClass("button-disabled").removeClass("button");
$("#change").attr("disabled","disabled");
}
else
{
$("#change").removeClass("button-disabled").addClass("button");
$("#change").removeAttr("disabled");
}
}

<input type='text' id='textbox'>
<input type="button" id="button'" value="click me">
$('#button').attr('disabled', 'disabled');
$('#textbox').change(function(){$('#button').removeAttr('disabled')} );

<input type="text" id="myText">
<input type="submit" id="myButton" disabled="disable"/>
jQuery(function(){
jQuery('#myText').bind('keypress',function(e){
if((jQuery(e.target).val()+"").length>0)
{
jQuery('#myButton').removeAttr('disabled');
}
else
{
jQuery('#myButton').attr('disabled','disable');
}
});
});

<input type='text' id='thetext' value=''>
<input type='button' disabled='disabled' id='thebutton' value='the button'>
$(document).ready(function(){
$('#thetext').change(function(){
$('#thebutton').removeAttr('disabled');
});
});
Read up on the jQuery API : http://api.jquery.com/

HTML:
<input type='text' id='textbox'>
<input type="button" id="mybutton" value="click me">
JS:
$(document).load(function() {
$('#mybutton').attr('disabled', 'disabled');
}
$('#textbox').change(function() {
$('#mybutton').removeAttr('disabled');
}
Update: regarding the use of jQuery w/ ASP.NET, keep in mind that ASP.NET outputs standard HTML once the page is rendered, so the above code would work similarly, except you need to figure out the ID's of the textboxes generated by ASP.net. See this link for further explanation on this:
http://www.search-this.com/2009/08/06/using-jquery-with-asp-net-controls/