Greetings,
I'm trying to select item from asp.net list box then assign it to a text box so when a click on an item from the list box should appear in the text box.
I tried the code listed down but it did not work.
please advice how to do this!!
............................
updated code
..........................
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="IMAM_APPLICATION.WebForm3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
</script>
<asp:ListBox ID="ListBox" runat="server">
<asp:ListItem Value="one">1</asp:ListItem>
<asp:ListItem Value="two">2</asp:ListItem>
</asp:ListBox>
<asp:TextBox ID="text" runat="server"
style = "position:absolute; top: 267px; left: 45px;"></asp:TextBox>
</div>
</form>
</body>
</html>
You can do it like this:
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
Replace your $(document).ready(function() { }) with the above code, and when you change the dropdown, the value will go in the text input, e.g. one, or two.
Related
This is webform1 code.I want to change the class of button after button click
i call the javascript function on button click...
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="valid_try2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="JavaScript1.js"></script>
<link rel="stylesheet" href="StyleSheet1.css"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn" onclick="abc()">Button</button>
</div>
</form>
</body>
</html>
This is stylesheet file where i create class
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
This is javascript file
function abc() {
$("#btn").removeClass("xx");
$("#btn").addClass("yy");
}
Your button will trigger a form post (PostBack), so all the things you do with abc() will be lost.
But since your tag is asp.net you can do this:
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="xx" OnClick="Button1_Click" />
And then in code behind:
protected void Button1_Click(object sender, EventArgs e)
{
//change the class and do other stuff after the button click
Button1.CssClass = "yy";
}
If you mislabeled your question and you want a pure javascipt/css solution, add type="button" to the button and no form post will be performed.
Please Try below code snipped hope it will help.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").toggleClass('classB');
});
});
</script>
<style>
.classA{color:red;}
.classB{color:yellow;}
</style>
</head>
<body>
<h2 class="">Click the button to change the class</h2>
<p id="p1" class="classA">I will be changed when you pressed click me</p>
<button>Click me </button>
</body>
</html>
Everything looks OK. Just add JQuery reference to aspx file.
Before add the following line.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
I think you need something like this
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="../js/jquery.js" type="text/javascript"></script>
<title></title>
<style>
.xx {
border: 5px solid green;
}
.yy {
border: 5px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btn" class="xx" name="btn">Button</button>
</div>
</form>
<script>
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var a = $(this).attr('class');
console.log(a);
if (a === 'xx') {
$(this).removeAttr('class');
$(this).addClass("yy");
} else {
$(this).removeAttr('class');
$(this).addClass("xx");
}
});
})
</script>
</body>
</html>
I have this markup:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TestCSSTemplates.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
ul { list-style: none }
span { display:inline-block; text-align: right; width: 100px; }
.DespliegaEnLinea { display: inline-block; }
</style>
</head>
<body>
<form id="form1" runat="server">
<ul >
<li>
<span >Are you sure?: </span>
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="DespliegaEnLinea">
<asp:ListItem>yes</asp:ListItem>
<asp:ListItem>no</asp:ListItem>
</asp:RadioButtonList>
</li>
</ul>
</form>
</body>
</html>
When the page is displayed in Chrome or Internet Explorer (9 or less with comptaibility mode activated), the page renders as I intended: all the content inside the li tag is in just one line.
However when the above page is displayed in Internet Explorer 11 (or 9, 8 without compatibility mode activated), it's rendered with a line break between the span tag and the radiobuttonlist control.
How can i make this page always render the content of the li tag in one line, regardless of the browers it's being used to see it?
I have a problem creating a Shield UI ASP.NET Chart on my web page. What I need is to have the control with not data, but yet visible on the page.
I have the reference to the control at the beginning:
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
And here is the complete code actually:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="chart" style="width: 390px; height: 290px; left: 5px; top:5px; margin: auto; position:inherit;">
<shield:ShieldChart ID="ShieldChart1" runat="server" Width="320px" Height="330px"
OnTakeDataSource="ShieldChart1_TakeDataSource">
<DataSeries>
</DataSeries>
</shield:ShieldChart>
</div>
</form>
</body>
Dragging and dropping the control in the VS doesn’t do all the work needed to show the control when page is launched. What you need is to add some more lines of code, and namely:
<link rel="stylesheet" type="text/css" href="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/css/shield-chart.min.css" />
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/jquery-1.9.1.min.js" type="text/javascript"> //</script>
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/shield-chart.all.min.js" type="text/javascript"> //</script>
These are the actual references to the runtime components you need to use the control in your web application.
I tried with the following but it doesn't work
var txtlat=document.getElementById('TextBox1').value=GMap1.getCenter().lat();
var txtlong=document.getElementById('TextBox2').value=GMap1.getCenter().lng();
It gives a JavaScript error as "Object doesn't support this property or method".
How can i do this????
I really need help...
Thank you!
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication5._Default" %>
<%# Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:GMap ID="GMap1" runat="server"
Key="ABQIAAAAs98ZVKM_IHFkRP_EavW_DhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQGoS16N7wYnBPhgtjTxMaUVN58kA" />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<script type="text/javascript">
var txtlat=document.getElementById('TextBox1').value=GMap1.getCenter().lat();
var txtlong=document.getElementById('TextBox2').value=GMap1.getCenter().lng();
</script>
</form>
</body>
</html>
2nd UPDATE: Further to the updated question, you also have another problem with the server-side textbox controls. They cannot be referenced from JavaScript using document.getElementById() as you are doing.
You may either use normal HTML controls: <input type="text" id="textbox1" /> or else you would have to use something like document.getElementById('<%= TextBox1.ClientID %>') to reference the textbox from JavaScript.
1st UPDATE: Further to the comments, the examples below have been updated to return the lat/lng of where the mouse is clicked.
You may want to check out the following examples, which have been tested to work correctly:
Using the v3 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps getCenter()</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(35.55, -25.75),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function(event) {
if (event.latLng) {
document.getElementById('textbox1').value = event.latLng.lat();
document.getElementById('textbox2').value = event.latLng.lng();
}
});
</script>
</body>
</html>
Using the v2 API:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps getCenter()</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 500px; height: 400px;"></div>
<input type="text" id="textbox1" />
<input type="text" id="textbox2" />
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
var centerPoint = new GLatLng(35.55, -25.75);
map.setCenter(centerPoint, 2);
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
document.getElementById('textbox1').value = latlng.lat();
document.getElementById('textbox2').value = latlng.lng();
}
});
</script>
</body>
</html>
Screenshot from the above examples:
Did you confirm the value returned from getCenter is not null? It should be a LatLng object, but maybe it's returning null... are you sure the center has been set yet? Also, what object type is GMap1? How do you create that object?
I found the answer forgot to mention here so the answer was very simple
Msg1 and Msg2 are DIV tags
protected string Gmap1_Click(object s, Subgurim.Controles.GAjaxServerEventArgs e)
{
return "document.getElementById('Msg1').innerHTML="
+ e.point.lat.ToString() + ";" + "document.getElementById('Msg2').innerHTML="
+ e.point.lng.ToString();
}
In a webform iam have placed one textbox, i want to choose a background image for that particular textbox during runtime. need coding in C#, ASP .NET
You could use css to set the background image and javascript to change it. Here's an example:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ToDDDD._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<style type="text/css">
input
{
background-image: url(/initialImage.png)
}
</style>
<script type="text/javascript">
function changeImage() {
document.getElementById('txt').style.backgroundImage = 'url(/newImage.png)';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server" />
Change background image
</div>
</form>
</body>
</html>
If you have a limited number of images that you want to use for the background then it would probably be cleanest to define each of them as a separate class in you css and then programatically either with javascript or C# change the class on the input.
<style>
.image1 { background-image: url(/image1.png);}
.image2 { background-image: url(/image2.png);}
.image3 { background-image: url(/image3.png);}
</style>
In you Page_Load of you page you can then write this:
txtBox1.CssClass = "image1";
Or using javascript:
document.getElementById('<%=txtBox1.ClientID%>').setAttribute("class", "image2");