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>
Related
<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);
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!!
I've a dropdown list which contains a set of names.. When select one name, a set of data will be generated from database..
And those data will bind into Radiobutton list control which in placed under the control..
I've a text control with predefined text as "hello"..
Now, that "hello" has to changed with the text I'm selecting in Radiobutton list..
For example, I've "Apple, Orange, Grape" in radio button list.. When I select Apple first time, "Hello" changed to "Apple".. I done this.. But when I select "Orange", "Assple" is not changing.. How to do that..?
function SelectChanged(Radiolst)
{
var mailBdy = document.getElementById("<%=txtEditor.ClientID %>");
var toMember = document.getElementById(Radiolst);
var selectedTxt=$(toMember).find(":checked").next().html();
var newBod = $(mailBdy).val();
newBod=newBod.replace('Hello',selectedTxt);
mailBdy.value = newBod;
alert(mailBdy.value);
}
The function SelectChanged is Client function of Radiobutton list.. First time alert shows "Apple" , but next time its not changes..
Here is the txtEditor and Radiobutton list control ASP.NET coding..
<asp:RadioButtonList ID="lstTo" runat="server" ></asp:RadioButtonList>
<textarea id="txtEditor" name="txtEditor" style="width: 100% ; height :300px " runat="server" enableviewstate ="true" > </textarea>
Since the markup hasn't been provided I'm taking a guess here:
For HTML like:
<select>
<option value="orange">
<option value="apple">
</select>
<input type="radio" id="Radiolst" value="Hello" name="some">
jQuery should be like:
$(document).ready(function () {
$('select').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$("#Radiolst").val(valueSelected);
$("#txtEditor").text(valueSelected);
});
});
Do remember to put this in the <head> tag of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
DEMO FIDDLE
Try this:
var globalVar = 'hello';
function SelectChanged(Radiolst)
{
var mailBdy = document.getElementById("<%=txtEditor.ClientID %>");
var toMember = document.getElementById(Radiolst);
var selectedTxt=$(toMember).find(":checked").next().html();
var newBod = $(mailBdy).val();
newBod=newBod.replace(globalVar,selectedTxt);
globalVar = selectedTxt;
mailBdy.value = newBod;
alert(mailBdy.value);
}
am using Ajax AutoCompleteExtender in asp textbox as below.
it's working fine but,
Problem: when user type text which is invalid or not match from the database value, it should show a message to user like "keyword not matched..."
Code
<asp:HiddenField id ="hdnFieldValue" runat="server"/>
<asp:TextBox ID="txtContactsSearch" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers"
MinimumPrefixLength="2"
CompletionInterval="100" OnClientItemSelected="ClientItemSelected" UseContextKey="true" EnableCaching="false" CompletionSetCount="10"
TargetControlID="txtContactsSearch"
ID="AutoCompleteExtender1" runat="server" FirstRowSelected = "false">
</cc1:AutoCompleteExtender>
Java Script Code
<script type="text/javascript">
function ClientItemSelected(sender, e) {
$get(e.get_value());
$get("<%=hdnFieldValue.ClientID %>").value = e.get_value();
}
</script>
I am get value using above javascript method into asp hidden field. But I want to set Empty into hidden field when user type invalid text
Please give me suggestions.
Thanks.
ADD IN YOUR AUTOEXTENDER :
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" OnClientPopulated="ClientPopulated"
</cc1:AutoCompleteExtender>
JS : From below you can highlight your Text with result,same way you can check for text
<script type="text/javascript">
function ClientPopulated(source, args) {
if (source._currentPrefix != null) {
var list = source.get_completionList();
var search = source._currentPrefix.toLowerCase();
for (var i = 0; i < list.childNodes.length; i++) {
var text = list.childNodes[i].innerHTML;
var index = text.toLowerCase().indexOf(search);
if (index != -1) {
var value = text.substring(0, index);
</script>
I want to get the value that I entered in the prompt, and save it in a variable to use it to update a DB later .. I try this but is does not work !!
#{
var fileName = "";
var db = Database.Open( "GP" );
var sqlupdate = "Update rc_Files set fileName=#0 Where fileID= 5";
db.Execute(sqlupdate, fileName);
}
<html lang="en">
<body>
<script>
function myFunction() {
newName = prompt("Please enter new file name :");
if (newName != null)
{
#fileName = newName;
}
}
</script>
</body>
</html>
JavaScript is client side language. You can't updated db with it. You can send request to your server side script, which will update something in datatable.
You can find example of doing this here or just use google.
Try this code:
$(document).ready(function() {
var fileName = '';
var newName = prompt('Please enter a new file name');
if(newName != null) {
fileName = newName;
console.log(fileName);
}
});
Its getting the value you entered through javascript.
Demo here
From your question is not clear what is your goal.
If you want to store a value in your page waiting to use it when the page is posted, you could use a hidden input field.
In my example the value inputed when the page is loaded is stored until the user clicks the submit button:
#{
if(IsPost){
var fileName = Request["fileName"];
var db = Database.Open("GP");
var sqlupdate = "Update rc_Files set fileName=#0 Where fileID= 5";
db.Execute(sqlupdate, fileName);
}
}
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form method="post">
<input type="hidden" name="fileName" id="fileName" value="" />
<input type="submit" />
</form>
<script>
$(document).ready(function () {
var newName = prompt('Please enter a new file name');
$('#fileName').val(newName);
});
</script>
</body>
</html>
Else, if you want to update your database without submitting your page, you should use Ajax. This article could help you: Posting Data With jQuery AJAX In ASP.NET Razor Web Pages.