Display the User selected text in Text in Text area - javascript

<script type="text/javascript">
/* run on document load **/
function disp() {
//var text = document.getElementById('TextArea1').value;
var text = document.getElementById('MainContent_TextArea1').value;
//alert('a')
if (text == null)
{
return false;
}
else
{
var t = text;
var t = text.substr(text.selectionStart, text.selectionEnd -text.selectionStart);
document.getElementById('displayval').value = t;
alert(t)
}
}
</script>
<div>
<input id="TextArea1" runat="server" type="text"/>
<INPUT type="button" onclick= "disp()" visible="true" value="Show"/>
<INPUT type="text" id ="displayval" visible="true" />
</div>
Here I am trying to display the User selected text through alert. But I want to display this data in Textarea2 through C#. How can I call this function there in C#. Any help please.

Try:
$('#text-area2-id').val(t);
This will show it in text area 2 instead of an alert.
How can I call this function there in C#. ?
You can not. Javascript runs on client side, after server sends everything to the client.

You can call javascript function code behind using
Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);

Related

Update one textbox using javascript function when another changes

I have a javascript function that counts characters in 2 different textboxes and puts the value in a third textbox.
This is the function is as follows:
function CountChars() {
var subjectLength = document.getElementById("txtBoxSubject").value.length;
var msgLength = document.getElementById("txtBoxMsg").value.length;
document.getElementById("txtBoxCnt").value = subjectLength + msgLength;
}
I call it from the Message text box using 'onkeyup' and it works fine.
<asp:TextBox ID="txtBoxMsg" runat="server" ClientIDMode="Static"
TextMode="MultiLine" onkeyup="CountChars()"></asp:TextBox>
The Subject textbox can be changed using a dropdown list or a user adding text to it. So using 'onkeyup' will not work for the Subject textbox. I tried using 'onchange' and nothing is entered in the Count text box.
This is the Subject html:
<asp:TextBox ID="txtBoxSubject" runat="server" ClientIDMode="Static" onchange="CountChars()"></asp:TextBox>
What am I doing wrong?
How can I call the javascript function whenver the text changes in the Subject textbox?
Thanks.
UPDATE
This is the Subject dropdown and the function that is called when it changes.
<asp:DropDownList ID="ddListSubject" runat="server" ClientIDMode="Static" AutoPostBack="true" onchange="SubjectChanged();">
</asp:DropDownList>
function SubjectChanged() {
var strSubject = document.getElementById("ddListSubject").value;
if (strSubject == "Custom") {
document.getElementById("txtBoxSubject").value = "";
document.getElementById("txtBoxSubject").focus();
}
else {
document.getElementById("txtBoxSubject").value = strSubject;
}
CountChars(); //number appears for a second then disappears
}
it seems like you not terminating the function with semi column. use something like onkeyup="CountChars();"
Your .aspx are using MasterPage? The names of Asp.Net objects changing in the rendered page. Try using <% =% Objeto.ClientID>.
function CountChars() {
var subjectLength = document.getElementById("<%=txtBoxSubject.ClientID %>").value.length;
var msgLength = document.getElementById("<%= txtBoxMsg.ClientID %>").value.length;
document.getElementById("<%= txtBoxCnt.ClientID %>").value = subjectLength + msgLength;
}
Or maybe use JQuery. Look at the code below, works as you described.
Subject:
<input id="text1" type="text" />
<br />
Msg
<input id="text2" type="text" multiple style="height: 100px" />
<br />
Total: <span id="total">0</span>
<script type="text/javascript">
$(document).ready(function () {
$("input[type=text]").keyup(function () {
var total = 0;
$("input[type=text]").each(function () {
total += $(this).val().length;
});
$("#total").html(total);
});
});
</script>
Hope this helps you
Dummy me...I removed the AutoPostBack="true" from the Dropdown!
Thanks for all of your help!!

get last word typed in Javascript

I'm wondering how to get the last word typed in Javascript. I have a text area my_text and when the user hits the spacebar it will get the last word that the user typed. This is what I'm trying so far
function getLastWord() {
var input = document.getElementById(my_text.value);
//var lineIn = document.getElementById(my_text).innerHTML;
var lastWordTyped
var changeColorOfWord;
if (input == null) {
input == " ";
}
lastWordTyped = input.substr(input.trim().lastIndexOf(" ") + 1);
When the function gets called on a spacebar hit, it says that input is null so when it gets the lastWordTyped var, it shows up null and errors out, does anybody know why this may be happening?
Preferably no JQuery
Here's some of the HTML to go with it.
<body>
<br />
<!-- Text area -->
<textarea class="text_edit" id="my_text" onkeypress="return myKeyPress(event)" onkeydown="return onKeyDown(event)"></textarea>
<br />
<!-- Submit button -->
<input type="button" value="Run Code" onclick="view_text()" />
<!-- Empty div to put the text in -->
<div id="view_text">
</div>
Ok, so I got the error to go away now i just need it to change the font color of the word typed lol..
Did you mean
var input = document.getElementById("my_text").value;
Try this:
<textarea id="MyText" rows="10" cols="50" onkeyup="getLastWord(event);"></textarea>
var Old = "";
var New = "";
function getLastWord(e)
{
New = document.getElementById("MyText").value;
if(e.keyCode == 32)
{
Old = New.replace(Old, "");
alert(Old);
Old = New;
}
}
DEMO

Update bg colour of text input in html form via javascript

I have a form that I want to validate before the user is able to submit it. To do this I have written a basic js file that checks a value is not left blank. In the event that this is the case I want the background colour of the text field to update to be red. I have looked around online and am struggling to get this working. Here is what I have so far:
HTML Form:
<script language="javascript" src="validateForm.js"></script>
<form name="contact form">
<input type="text" name="name"></td>
<input type="button" value="Send" onsubmit="return validateForm()" method="post">
</form>
Javascript:
function validateForm()
{
var result = true;
var form = document.forms["contact form"];
// Name
var name = form["name"].value;
if ( name == null || name == "" )
{
form["name"].style.backgroundColor = red;
result = false;
}
return result;
}
Please could someone help me get this working?
Use red as string ( you missed the quote) jsfiddle
form["name"].style.backgroundColor = "red"; // not red

Populate Drop down from Text box in Javascript

I have an asp.net drop down list box and I want to populate it based on the value of the text box via javascript. The value is passed to the stored procedure which I created and the results will be populated in the drop down.
I did my research but I can't seem to find the right solution to this.
Need help please.
[UPDATE]
Here's the source code which I initially did:
HTML:
<asp:DropDownList runat="server" id="cboPriceID" AutoPostBack="true" onblur="LoadPrice()"/>
And I have a dataTable which is retrieved from the stored procedure. What I currently have is a javascript code which populates the textbox.
function LoadPart_CallBack(response) {
//if the server-side code threw an exception
debugger;
if (response.error != null) {
//we should probably do better than this
alert(response.error);
return;
}
var ResponseValue = response.value;
var al = ResponseValue.split(":");
var errormsg = al[0];
var partname = al[1];
if (errormsg == "") {
document.getElementById("<%=txtPartName.ClientID%>").value = partname;
}
}
Need help on how to populate it.
<html>
<body>
<input type="text" id="data" name="data"/>
<input type="button" value="Add" onclick="addData()"><br/>
<select id="choice">
</select>
<script type="text/javascript">
function addData()
{
var txt=document.getElementById("data").value;
if(txt!="")
{
var newcontent = document.createElement('option');
newcontent.innerHTML = txt;
document.getElementById("choice").appendChild(newcontent);
document.getElementById("data").value="";
}
}
</script>
</body>
</html>

Fill data in input boxes automatically

I have four input boxes. If the user fills the first box and clicks a button then it should autofill the remaining input boxes with the value user input in the first box. Can it be done using javascript? Or I should say prefill the textboxes with the last data entered by the user?
On button click, call this function
function fillValuesInTextBoxes()
{
var text = document.getElementById("firsttextbox").value;
document.getElementById("secondtextbox").value = text;
document.getElementById("thirdtextbox").value = text;
document.getElementById("fourthtextbox").value = text;
}
Yes, it's possible. For example:
<form id="sampleForm">
<input type="text" id="fromInput" />
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="button"value="Fill" id="filler" >
<input type="button"value="Fill without jQuery" id="filler2" onClick="fillValuesNoJQuery()">
</form>
with the javascript
function fillValues() {
var value = $("#fromInput").val();
var fields= $(".autofiller");
fields.each(function (i) {
$(this).val(value);
});
}
$("#filler").click(fillValues);
assuming you have jQuery aviable.
You can see it working here: http://jsfiddle.net/ramsesoriginal/yYRkM/
Although I would like to note that you shouldn't include jQuery just for this functionality... if you already have it, it's great, but else just go with a:
fillValuesNoJQuery = function () {
var value = document.getElementById("fromInput").value;
var oForm = document.getElementById("sampleForm");
var i = 0;
while (el = oForm.elements[i++]) if (el.className == 'autofiller') el.value= value ;
}
You can see that in action too: http://jsfiddle.net/ramsesoriginal/yYRkM/
or if input:checkbox
document.getElementById("checkbox-identifier").checked=true; //or ="checked"

Categories

Resources