<asp:CheckBox ID="htmlChkNotify" runat="server" OnCheckedChanged="ToggleTextBox(this,'htmlTxtNotifyemailaddress')" />
<asp:TextBox ID="htmlTxtNotifyemailaddress" runat="server" Enabled="false"></asp:TextBox>
function ToggleTextBox(CheckBox, TextBoxID) {
var TextBox = document.getElementById(TextBoxID);
if (CheckBox.checked) {
TextBox.disabled = false;
TextBox.value = "";
}
else {
TextBox.disabled = true;
TextBox.value = "";
}
}
I have write like but when I run the code then error message comeing " can't be pass this literal" something like that, so how can I do it?
Actually u can also see demo in stackoverflow "Notify daily of any new answers" I want to fire event like.
Thank you
OnCheckChanged is expecting an ASP.Net event handler, it's not for JavaScript, for that attach your event handler like this:
htmlChkNotify.Attributes.Add("onclick",
"ToggleTextBox(this,'" + htmlTxtNotifyemailaddress.ClientID + "');");
I broke it down to 2 lines for readability here only, but the idea is to generate an onclick inline handler, rather than the server-side event handler it's currently trying to bind, in a place it can't pass this (which is why the parser fails).
Related
I have an asp.net checkbox, which looks like this:
<asp:CheckBox ID="chkDoSomething" runat="server" AutoPostBack="true" OnCheckedChanged="DoSomething" />
As expected when I check the checkbox; the DoSomething method is called on the server side. After the user has checked the checkbox; I want to disable it (so they cannot click it multiple times).
If I was using a button, then I could use OnClick and OnClientClick. How can I do this with a Checkbox?
I have spent one hour Googling this and have looked here for example: Enabling/disabling asp.net checkboxes through javascript
I cannot find an answer to my question. Most questions I have read assume that you want to execute Javascript only and not both Javascript and server side code.
Update 1
Here is the onchange method:
function Disable
Checkbox()
{
document.getElementById("chkDoSomething").disabled = true;
}
Update 2
I have tried this:
var chkDoSomething = document.getElementById("chkDoSomething");
if (chkDoSomething != null) {
chkDoSomething.addEventListener('change', function () {
chkDoSomething.disabled = true;
});
}
Still the Javascript blocks the post back. As soon as I remove the Javascript, then the postback works.
You can also disable the CheckBox in the CheckedChanged event.
protected void chkDoSomething_CheckedChanged(object sender, EventArgs e)
{
CheckBox cb = sender as CheckBox;
cb.Enabled = false;
}
Update
A client side solution would be to wrap the CheckBox in a div and add pointer-events:none to it.
<div>
<asp:CheckBox ID="chkDoSomething" runat="server"/>
</div>
<script>
$('input[type="checkbox"]').change(function () {
$(this).closest('div').css('pointer-events', 'none');
});
</script>
This is the same client-side solution as VDWWD's answer but written using native JS instead of jQuery, as you requested:
<script>
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener("change", function() {
let div = this.closest("div");
div.style.pointerEvents = "none";
});
}
</script>
As noted, this requires each affected checkbox to be wrapped inside a <div>.
I want to use form serialization but exclude a button and a label from the serialization.
This is a version of the javascript I have:
var saveBtn = document.getElementById("btnSaveButton");
var saveLbl = document.getElementById("lblSaveLabel");
var originalFormData = $("#MasterForm").not(saveBtn, saveLbl).serialize();
$("form :input").on('change keyup paste mouseup', function () {
var newFormData = $("#MasterForm").serialize();
if (originalFormData != newFormData) {
//some code
} else {
//some other code
}
});
See: .not(saveBtn, saveLbl)
That is not excluding the button or the label.
Can someone please help me and let me know how I can exclude the button and the label from the serialization?
What essentially happens is I switch the display from the button to the label and back depending on whether the user has made any change to the form.
UPDATE UPDATE
Thank you for the responses ... appears something is amiss ...
There might be too much html to post here ...
Using vb.net. I have a master page, within it is a page called Admin.aspx, and within that is a usercontrol called Bundles.ascx.
In the code of Bundles.ascx I have this javascript:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(prmRequest);
prm.add_endRequest(prmRequest);
function prmRequest(sender, args) {
setupFormChangeCheck("btnSaveBundle", langId);
}
In a master javascript file I have the function setupFormChangeCheck, which looks like this:
function setupFormChangeCheck(txtName, langId) {
try {
savebtnFnctn('dis', txtName, langId)
var originalFormData = $("#MasterForm").serialize();
$("form :input").on('change keyup paste mouseup', function () {
var newFormData = $("#MasterForm").serialize();
if (originalFormData != newFormData) {
savebtnFnctn('en', txtName, langId)
} else {
savebtnFnctn('dis', txtName, langId)
}
});
} catch (err) { }
}
On the same master javascript file I have the function savebtnFunction, which looks like this:
function savebtnFnctn(event, txtName, langId) {
var saveBtn = document.getElementById(txtName);
var saveLbl = document.getElementById(txtName.replace("btn", "lbl"));
if (event == 'en') {
saveBtn.style.display = "inline";
saveLbl.style.display = "none";
} else if (event == 'dis') {
saveBtn.style.display = "none";
saveLbl.style.display = "inline";
}
}
The user control is loaded dynamically, because the same page has multiple use controls and unless I load the one control dynamically, all load ... slows things down incredibly.
Loading a user control dynamically leads to serious postback challenges. So, the vast majority of the user control interactions are handled client side with jquery. For Bundle.ascx this is done in Bundle.js
SOOOOO ....
When the user control is loaded, setupFormChangeCheck fires, which runs the 'dis' (disable) event in function savebtnFnctn.
Here is the problem I noticed today as I tried the code from suggestions above.
When I interact in the Bundle uc, setupFormChangeCheck does not fire from the beginning. What first fires is this line $("form :input").on('change keyup paste mouseup', function ()
And no matter what I do, click in a textbox even without changing anything, leads this: originalFormData != newFormData to be true and the Save button remains enabled ...
I should add that all the controls in the Bundle user control are inside an updatepanel:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
Long explanation I know, sorry ... if anyone has any idea to solve this, I would be eternally grateful.
Thank you. Erik
The jQuery's .not() method takes selector, not elements.
Also, you are matching the form itself, not the inputs of it.
Since you do know the IDs of the elements to exclude, use this instead:
var data = $("#MasterForm").find("input, textarea, select").not("#btnSaveButton, #lblSaveLabel").serialize();
You select the form.
Then you select the form elements underneath.
Then you exclude the concrete elements from the collection.
Lastly you serialize the results.
NOTE: You should use strict comparison !== instead of !=.
I'm having some weird issues with the disabled attribute of an asp button and JavaScript, probably due to my lack of experience, but anyway...
As I understand from this question/answer, setting the disabled attribute makes the element disabled. Unless you set it like so; element.disabled = false;
So, that's what I do in my code;
<script type="text/javascript">
function CheckOne(inChkBox) {
... irrelevant code goes here ...
var rejectButton = document.getElementById('btnReject');
if (inChkBox.checked) {
rejectButton.disabled = false;
rejectButton.className = 'Enabled';
} else {
rejectButton.disabled = true;
rejectButton.className = 'Disabled';
}
}
</script>
<input type='checkbox' name='chkRejectLineItem' onchange='CheckOne(this);' runat="server"/>
This seems to trigger and work fine (the cssclass changes at the very least...) apart from the fact that my button is still disabled;
<asp:Button ID="btnProjectTimeReject" runat="server" Text="Reject Selected" OnClientClick="LineItemRejectReason();" OnClick="btnProjectTimeReject_Click" Enabled="False" CssClass="Disabled"/>
I know this, because the OnClientClick never gets called (for some reason, the server side code still gets called??). If I set the button to Enabled="True" then everything works as expected.
Is it because I'm using Enabled="True" initially and I should instead use rejectButton.removeAttribute('disabled') in the enable/disable JavaScript?
After a lot of console debugging and googling the same thing different ways, I found the following solution/answer.
var rejectButton = document.getElementById('btnPLReject');
if (inChkBox.checked) {
rejectButton.disabled = false;
rejectButton.className = 'Enabled';
$('#btnPLReject').bind("click", function() { LeaveRejectReason(); });
} else {
rejectButton.disabled = true;
rejectButton.className = 'Disabled';
}
This causes the button to trigger the JavaScript/Client side code AND then the Server side code...where as it was only doing the Server side code before...
I need some panadol now.
I have a asp.net input box:
<asp:TextBox ID="InCL" runat="server" Text=""></asp:TextBox>
As soon as a number is entered I would like to send that value to a javascript function that updates a google gauge.
For example, user inputs 77, the google gauge immediately dynamically moves to that position.
Any help is appreciated.
Thank You.
EDIT
I'm looking at the onkeyup DOM event, is this a good way to go?
I think I'm just talking to myself on here.....
Here is a script in jQuery I used to do something very similar. It does indeed use onkeyup to set the value; it also uses onkeydown to prevent non-numeric values; and forces a default value of 0 if the user tries to leave the textbox with no value:
var updateUI = function(value) {
//set gauge
};
var textbox = $('#id_of_textbox)'
textbox.keydown(function(e) {
return validNumberKeys.indexOf(e.which) > -1;
}).keyup(function(e) {
var input = $(e.target);
if(input.val() !== '') {
updateUI(input.val());
}
}).blur(function(e) {
var input = $(e.target);
if(input.val()==='') { input.val('0'); }
updateUI(input.val());
});
var validNumberKeys = [8,9,13,16,17,18,35,36,37,38,39,40,45,46,48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105];
You can do this:
<asp:TextBox ID="InCL" runat="server" onchange="YourJavaScriptFunction()" Text=""></asp:TextBox>
YourJavaScriptFunction() would then read the value out of InCL and do whatever you need to do with it.
You could also pass the value to your JavaScript like this: onchange="YourJavaScriptFunction(this.value)"
The same syntax will work with onkeyup: onkeyup="YourJavaScriptFunction()"
I am using asp:button to create a keyboard with A-Z and 0-9 for touch screen using Java script. This keyboard is linked with one textbox. If we click one button corresponding text will be displayed on the textbox. Its working fine. I have included the autocomplete feature to this textbox using jquery JQuery Autocomplete.
Problem:
The autocomplete is not working if i my user define keyboard. How to modify my key buttons as keyboard keys[Set event keycode]? Is it possible? Is there any other way to achieve this?
Code:
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:Button ID="zero" runat="server" Text="0" CssClass="myclass" OnClientClick="return typeLetter(this);" TabIndex="20"/>
function typeLetter(currentbutton) {
if (previousActiveElement != null) {
if (previousActiveElement == 'antSearchText'){
var position = document.getElementById('position').value;
if (position == '') {
alert('chk position');
} else {
var existingString = document.getElementById(previousActiveElement).value;
var beforeString = existingString.substring(0, position);
var afterString = existingString.substring(position, existingString.length);
document.getElementById(previousActiveElement).value = beforeString + currentbutton.value + afterString;
setCaretPosition(document.getElementById(previousActiveElement), parseInt(position) + 1);
setCaretPosition(document.getElementById(previousActiveElement), parseInt(position) + 1);
}
}
}
return false;
}
Edit:
In autocomplete plugin the following is getting the key event, How to pass same key event by using my keys?
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
}
Try triggering the jQuery keydown/keyup event manually. I cannot recall for the life of me which one autocomplete triggers on, but here's the gist:
// your documment.getElementById(...)
jQuery('#'+previousActiveElement).keyup();
// your setCaretPosition
Try the different key events and one should cause the autocomplete to kick in.
Hope that helps!
Thanks,
Joe
Problem get solved by using the following code.
Code:
var q = document.getElementById('txtbox');
var evObj = document.createEventObject();
evObj.keyCode = 84; // [T] key
q.fireEvent('onkeydown', evObj);
Geetha.