If there are 2 user controls on a page and both of them have checbox controls. Checking/Unchecking a checkbox in one user control should check/uncheck the one in the other user control.
I see there is a need for user control communication.
Any way I can do this on the client side? (I don't want to use server side code)
Thanks
yes, the easiest way to do this is using jquery css selectors and manipulating the checkbox values. here is a simple code snippet to do that :
$("#checkbox1").attr("checked", $("#checkbox2").attr("checked"))
the value of checkbox1 is set depending upon the "checked" value of checkbox2
Off course, it goes without saying, there are easier ways of doing this with jQuery, but here's an example of how to do it without it.
<asp:CheckBox runat="server" ID="CheckBox1" onclick="checkBoxChanged1(this)" />
<asp:CheckBox runat="server" ID="CheckBox2" onclick="checkBoxChanged2(this)"/>
<script type="text/javascript">
var checkBox1 = document.getElementById("<%=CheckBox1.ClientID %>");
var checkBox2 = document.getElementById("<%=CheckBox2.ClientID %>");
function checkBoxChanged1(e)
{
checkBox2.checked = e.checked;
}
function checkBoxChanged2(e)
{
checkBox1.checked = e.checked;
}
</script>
Here's the same example using jQuery:
<script type="text/javascript">
$(function(){
$("#<%=CheckBox1.ClientID %>").click(function(){
$("#<%=CheckBox2.ClientID %>").checked = this.checked;
});
$("#<%=CheckBox2.ClientID %>").click(function(){
$("#<%=CheckBox1.ClientID %>").checked = this.checked;
});
});
</script>
Related
I have ASP:Panel which is visible false initially , and have another radio button list having value yes or no
on click of yes my panel gets visible true ,
now my problem is when i click yes my panel is visible ,but in jquery i am not able to find conrol which is placed inside panel
Jquery
jQuery("[id$='p_lt_ctl01_ContentPageplaceholder_p_lt_ctl13_editabletext1_ucEditableText_widget1_ctl00_chkVndr']").change(function () {
debugger;
var chkval = jQuery('input[id*=chkVndr]:checked').val();
if (chkval == "Yes") {
alert(12346);
document.getElementById('<%= txtDtOfServ.ClientID %>').keypress(function (event) {
// jQuery("#p_lt_ctl01_ContentPageplaceholder_p_lt_ctl13_editabletext1_ucEditableText_widget1_ctl00_txtDtOfServ_dtPicker_txtDateTime").keypress(function (event) {
event.preventDefault();
});
}
else {
jQuery("#p_lt_ctl01_ContentPageplaceholder_p_lt_ctl13_editabletext1_ucEditableText_widget1_ctl00_txtDtOfServ_dtPicker_txtDateTime").keypress(function (event) {
event.preventDefault();
});
}
});
Control structure
<asp:Panel ID="Vendordtl" runat="server" Visible="false">
<my:myDateTimeControl ID="txtDtOfServ" runat="server" IsRequired="true" NeedsValidation="true" EditTime="false" DisplayNow="false" />
<asp:Pane/>
Because the DateTimeControl is a child of the panel you have to go through the panel first.
Try something like:
document.getElementById('<%= Vendordtl.FindControl("txtDtOfServ").ClientID %>')
I got the process of getting the value of input field in c# in here:
Get value from input html in codebehind c#
I have a hidden input field in my aspx page like this:
<input type="hidden" id="lblCountry_val" runat="server" />
Where the value of the hidden field is put through jquery:
<script type="text/javascript">
$(function () {
BindUserInfo();
})
function BindUserInfo()
{
document.getElementById('lblCountry_val').value = window.strcountry;
}
</script>
<script type="text/javascript" src="http://smart-ip.net/geoip-json?callback=GetUserInfo"></script>
But When I am trying to get the value in Page_Load event in code behind with this:
Response.Write(lblCountry_val.Value);
Nothing is being printed. How come?
EDIT
I have done this by changing the hidden input field to an invisible textbox and then putting "name" attribute in the tag.
<input type="text" id="lblCountry_val" name="lblCountry_val" runat="server" style="display:none" />
And in the code behind:
var txt=Request.Form["lblCountry_val"];
Though I have not a clear idea how it was done.
First Method -
In aspx, When you set a value to html field using Java script, Field's value doesn't appear in code behind file(aspx.cs). So you have to do additional page post back for set a value to hidden field and then you can able to catch the value in code behind file.
Second Method -
Using tag, submit hidden field data to relevant aspx page.Then you can catch the value using Request.Form["lblCountry_val"] array.
You should write
document.getElementById('<%=lblCountry_val.ClientID%>')
This happens because in the most cases the serve side Id of a control is different from its clientId. The way to take it is the above.
Try this...
JavaScript
<script>
$(document).ready(function () {
var test = "1";
$("<%=hdn_audio_length.ClientID%>").val(test);
});
</script>
Html
<asp:HiddenField runat="server" ID="hdn_audio_length" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="button1" runat="server" Text="Click" OnClick="button1_Click" />
C#
protected void button1_Click(object sender, EventArgs e)
{
TextBox1.Text = hdn_audio_length.Value;
}
Here's an example setting hidden fields on submit click.
`<script>
$(document).ready(function () {
$("#submit").click(function () {
$("#<%= ccnum.ClientID%>").val($("#cc-num").val());
$("#<%= expdate.ClientID%>").val($("#cc-exp").val());
$("#<%= cvc.ClientID%>").val($("#cc-cvc").val());
});
});
</script>`
I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..
If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})
I have a form with 5 text boxes and a button, and when the button is clicked it send the data to a SQL database. I would like the button to be disabled if any of the text boxes are null, how do I do this in C#? (I am in Visual Studio 2010 ASP.NET web app)
You need to write JavaScript/jQuery code.
Yes, What Sam said is right!!
you need to check first whether all your text boxes are empty or not.
that will be done by
If(txtbox1.text == "" || txtbox2.text == "" || txtbox3.text == "" || txtbox4.text == "" || txtbox5.text == "")
If any of the text box is empty then make the button disabled.
button1.enable = false;
If all are filled then make it as enabled.
button1.enable = true;
If you do not want to use Client side scripts, you can use validations for your controls
<asp:TextBox id="TextBox1" runat="server" />
<asp:RequiredFieldValidator id="RequiredFieldValidator1"
runat="server" ErrorMessage="Required!" ControlToValidate="TextBox1" >
</asp:RequiredFieldValidator>
Validation will trigger on postbacks.
If you have multiple controls, but you do not want to validate them all, you can use Validation Group. Check this link for using Validation Groups
use javascript setInterval on Page load if if you are using this single form on the page and check each textbox value length .. if anyone is null then disable submit button..
use jquery to disable and enable them.. check following code snippet that i have created for sample..
use this to access server control id if you are using these controls inside some container control eg. panel, contentplaceholder etc : $("#<%=button1.ClientID>%>")
$("#text1").val().length will check then length of text in textbox.. and then use jquery to enable and disable them..
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<%-- <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js" type="text/javascript"></script>--%>
<%--<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js" type="text/javascript"></script>--%>
<script type="text/javascript">
$(document).ready(function () {
$("#submit").attr('disabled', 'disabled');
$("#text1").keypress(function () {
check();
});
var intv = self.setInterval("check()", 1000);
});
function check() {
if ($("#text1").val().length > 0) {
$("#submit").removeAttr('disabled');
}
else {
$("#submit").attr('disabled', 'disabled');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="text1" runat="server"></asp:TextBox>
<asp:Button ID="submit" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
I have two text boxes I need a functionality like If I am typing in 1st text box The text should be getting displayed in 2nd text Box with some other font. This is a web Application. And so Text Box doesn't have OnKeyDown event? Do you suggest any way to implement this?
Note: I don't want to implement this with Javascript.
Solution using an asp:UpdatePanel
With this approach, you don't need to write a single line of JavaScript by yourself; everything is handled by the control.
Page.aspx:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="text1" OnTextChanged="text1_TextChanged"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Event handler for the TextChanged event, Page.aspx.cs:
protected void text1_TextChanged(object sender, EventArgs e) {
text2.Text = text1.Text;
}
Solution using ASP.NET and jQuery
Page.aspx:
<script type="text/javascript">
//As soon as the DOM is ready, execute the anonymous function
$(function () {
var textBox1 = $("#<%= text1.ClientID %>");
var textBox2 = $("#<%= text2.ClientID %>");
textBox1.keyup(function () {
textBox2.val(textBox1.val());
});
});
</script>
<asp:TextBox runat="server" ID="text1"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
CSS for both approaches:
.special { font-family: YourFontFamilyOfChoice; }
Test Results
I've tested both solutions locally with Firefox 3.6, Opera 10.6, and Internet Explorer 8; both work like a charm.
Use jQuery (JavaScript) combined with CSS. This solution will not trigger a post-back: Your users will see stuff happen as they type.
CSS:
.normalFont { font-family: Arial; }
.alternateFont { font-family: Verdana; }
HTML:
<input ... class="normalFont" />
<input ... class="alternateFont" />
JavaScript (jQuery):
// When the DOM is ready, execute anonymous function
$(function ()
{
// store a reference for the input with the "alternateFont" class
var alternateFontInput = $("input.alternateFont")[0];
// execute anonymous function on key-up event on the input with
// the "normalFont" class
$("input.normalFont").keyup(function ()
{
// set the value of the input with the "alternateFont" class to
// the value of the input with the "normalFont" class (this)
alternateFontInput.value = this.value;
});
});