We Keep Coding

Moving text in .Net without refreshing page

I am still new to the coding field and am having a bit of trouble with a part, hoping someone can help me. I am working on a MVC page where i am trying to move text, the user inputs, around the page to a few pre-set spots and without having to refresh the page. Do i need a type of script for this? And if i do what would be best? Thanks for the help.

You can do it this way.
Enter Text here... <input id="testText" type="text" onKeyUp="javascript:showText($(this), event);"/>
<br/>
<br/>
<br/>
See it here... <span id="testTextSpan"></span>
Then, add this script...
<script type="text/javascript">
var showText = function (el, e) {
$('#testTextSpan').html(el.val());
};
<script>
See it here in this JSFiddle...
http://jsfiddle.net/ZEcNp/
Be sure to include JQuery libraries in your project, or reference the CDN.
If you'd like me to include an example with raw javascript, with no JQuery, I can also provide that for you.

I would recommend jQuery to do all that client-side.
You would just need an ID for each element you would use as the predefined spots, using either .appendTo, .insertAfter, .html, or something else depending on your exact needs.

Textbox Onclick = clear value , on exit from textbox set the default value?

I have this in the
<asp:TextBox ID="svv" OnClick="this.value=''" runat="server">Hello...</asp:TextBox>
OnClick="this.value=''" // On mouse click in textbox it will deleted the text.
How can I set something like
Unclick"this.defautlvalue"; // something like this.
So, when I click the control it will clear the value, if I exit from the control (for example, clicking another textbox) it will return the default value of the textbox.
Thanks

Specifically with C# .NET WebForms you have a few options.
You can go completely front-end with jquery by doing something like this:
$('selector').blur(function() {
// Make sure you do some validation so it doesn't clear everytime
$('selector').val('My Default Text');
});
Or, if you are using the AJAX Control Toolkit, you can simply use The textbox Watermark Control, which will do exactly what you are talking about just by setting a few properties.
You can also go straight javascript like #m.edmondson explain in his answer.

I think you're looking for onBlur:
<input type="text" id="fname" onblur="upperCase()">
This will call upperCase() when the user leaves the box.

You can attach to the client-side onblur event which is called when the focus of your control changes.

Also worth storing the default value in an attribute on the input so you can refer to it in blur event. Believe in ASP.NET web forms you've got to add that attribute in the code-behind though.

Removing default text from text box

I got this Text box with default value as "First Name" ..Now when I click inside this text box to enter name , this value "First Name" keeps on displaying. What I want is to the text box to clear as soon as I click inside it. What property do I need to set in mt textbox tag ?
[Edit]
ok anything from Telerik that I can use to do that ?

There is not out of the box functionality in TextBox that will accomplish this, but the ASP.Net Ajax Toolkit has a Watermark Extender that will do everything you want.
I have used both, but now personally use a jQuery Watermark Plugin
Either will work just fine, choose based on your needs.
According to the Telerik docs you just have to set the EmptyMessage property on their TextBox control. Demo Page Here

In the code behind, on Page Load you can add the following code to achieve this
TextBox1.Attributes.Add("onClick", "javascript:if(this.value=='First Name'){this.value='';}");

You can use the method suggested by #Josh. If you do not want to use Ajax Toolkit controls or JQuery you could write it on your own using Javascript. Write a function which gets called when the foucs is received by the textbox control. I thik the function is called onfocus or just focus in Javascript.

Hi I just wrote this small function which will achieve your desired result
function clearInputBox(x,prefil){
if(x.value == prefil){
x.value = '';
}
}
Your input box looks like this
<input type='text' value='First Name' onfocus="clearInputBox(this,'First Name')" />

May be this will help you

Taking Shobans advice one step farther, you could add something like this to your Page subclass
protected override void OnInitComplete(EventArgs e)
{
string jsString = "javascript:if(this.value=='" + TextBox1.Text + "'){this.value='';}";
TextBox1.Attributes.Add("onFocus", jsString);
base.OnInitComplete(e);
}
What this will do is, it will always consider that default string is the one this controll contains at esign time (the initial one in your .aspx file), so you wont have to manually change it in codebehind every time you change your .aspx. Remember, that OnIinitComplete fires before any viewstate or postback data has been applied, but after the controlls on your page have been set to their default values.
P.S. As anishMarokey pointed, use onFocus vs onClick, since fields can gain focus without clicks via Tab key.

Background text in textbox

I want to display a background text in the textbox.
ex: The Title textbox in the stackoverflow Ask question page.
Needs: If i enter some text inside the textbox it should disappear.
Geetha.

A good link is http://attardi.org/labels as referenced here https://stackoverflow.com/questions/781473/how-to-create-a-label-inside-an-input-element

You need to use javascript for the same.
Use following two functions in javascript and it is done.
function clearDefault(obj,val)
{
objInput=document.getElementById(obj);
if(objInput.value==val)
{
objInput.value="";
}
}
function setDefault(obj,val)
{
objInput=document.getElementById(obj);
if(objInput.value=="")
{
objInput.value=val;
}
}
You need to apply it on your code by using two javascript events as follow.
<input name="email" type="text" class="textbox" id="email"
value="Email" size="12" onfocus="clearDefault('email','Email');"
onblur="setDefault('email','Email');"/>
So when you control get focus it the default text will be cleared.
Ant That's it.
Hope this will help!

Well, since you put jquery as a tag for the question, I assume you're already using jquery for your project. In that case, here's a neat plugin that does the trick: Labelify.
Good luck!

JQuery Facebox Plugin : Get it inside the form tag

I am wanting to use the Facebox plugin for JQuery but am having a few issues getting it running how I want. The div that houses the facebox content is created outside of the tag so even though I am loading up some web controls none of them are firing back to the server.
Has anyone dealt with this that can give me some pointers?

poking around the facebox.js I came across this line in the function init(settings)...
$('body').append($.facebox.settings.faceboxHtml)
I changed that to ...
$('#aspnetForm').append($.facebox.settings.faceboxHtml)
and it loads up in the form tag, not sure yet if there are any side effects

You can use this code to register the PostBack event:
btn.OnClientClick = string.Format("{0}; $.facebox.close();",ClientScript.GetPostBackEventReference(btn, null));
this will let the button fires a PostBack.

Even after the :
$('#aspnetForm').append($.facebox.settings.faceboxHtml)
change I found it problematic. When you look at the page source using firebug you see that all the html in the div assigned to be the facebox div is doubled up (repeated).
So all of those controls with supposed unique id's are doubled up on the page, that can't be good on the postback, i've decided putting asp.net web controls in a facebox is not a good idea.

I modified facbox.js to do this. Maybe there is a better solution but this works like a charm
Here what i did:
add two lines on top of facbox.js before '(function($)'
var willremove = '';
var willremovehtml = '';
find "reveal: function(data, klass) {" and add this lines before the first line of function.
willremove = data.attr('id')
willremovehtml = $('#'+willremove).html()
$('#'+willremove).html('')
find "close: function() {" and make it look like below.
close: function() {
$(document).trigger('close.facebox')
$('#'+willremove).html(willremovehtml)
willremovehtml = ''
willremove = ''
return false
}