Want to change image src of ImageButton using javascript on client click - javascript

I tried this first which is not working:
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';"/>
Another method:
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick=" return changeImg(this)"/>
function changeImg(cnt)
{
if(cnt.src='minus.gif')
{
cnt.src='plus.gif';
}
else
{
if(cnt.src='plus.gif')
{
cnt.src='minus.gif';
}
}
return false;
}
</script>

The issue here is that you do not return false, on client click and you trigger the onlick on code behind. Just return false; to avoid the post back and you get what you try.
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" OnClientClick="this.src='plus.gif';return false;"/>
update
On your code you type if(cnt.src='plus.gif'), but you must type == , not =
To avoid this type of error is better to place first the const, eg type
if('plus.gif' == cnt.src)
and the final code
function changeImg(cnt)
{
if(endsWith(cnt.src, 'minus.gif'))
{
cnt.src='plus.gif';
}
else if(endsWith(cnt.src, 'plus.gif'))
{
cnt.src='minus.gif';
}
// to avoid post back return false
return false;
}
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
relative : endsWith in JavaScript

The following should work
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="minus.gif" onClick="function(){this.setAttribute("src", 'plus.gif');}"/>

Related

ASP Web Forms fire code behind event on condition

I have ASP.NET WEB FORMS apps
<asp:Button ID="DeleteDealsButton" runat="server" Text="Delete" />
function btnDeleteClick() {
var result = confirm("Want to delete all Deals?");
if (result) {
return true;
} else {
return false;
}
}
$("#MainContent_DeleteDealsButton").on("click", function() {
if (btnDeleteClick()) {})
On this button I have sample javascript alert to ask OK or Cancel.I want if choise OK to fire CODE BEHIND method call DeleteDealsButton_Click, if it Cancel to do nothing.
Just change button defination to,
<asp:Button ID="DeleteDealsButton" runat="server" Text="Delete" OnClientClick="return confirm('Want to delete all Deals?')" />
No need for any javascript function.
try like this:
function btnDeleteClick() {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
confirm_value.value = "No";
var result = confirm("Want to delete all Deals?");
if (result) {
confirm_value.value = "Yes";
__doPostBack('DeleteDealsButton', '')
return true;
} else {
confirm_value.value = "No";
return false;
}
}
In your .Aspx file Change your button code to like this:
<asp:Button ID="DeleteDealsButton" OnClientClick=" return btnDeleteClick()" runat="server" Text="Delete" OnClick="DeleteDealsButton_Click" />
In your .Aspx.cs file
protected void DeleteDealsButton_Click(object sender, EventArgs e)
{
string confirmValue = Request.Form["confirm_value"];
if (!String.IsNullOrWhiteSpace(confirmValue) && confirmValue.Equals("Yes"))
{
}
}

Validation not working when adding query string

My validations are not working when redirecting from one page to another on passing query string as a parameter with response.redirect or with windows.location.href.
When I am redirecting from one page to another page with this:
<asp:Button ID="New" runat="server" Text="New" OnClientClick="Transfer()" />
function Transfer() {
window.location.href = "Abc.aspx?flag=yes"; //when adding query string my validation doesnt work
//window.location.href = "Abc.aspx";// When removing query string my validation successfully works
}
Then I have tried from server side like this:
<asp:Button ID="New" runat="server" Text="New" OnClick="New_Click" />
protected void btnNewApplicant_Click(object sender, EventArgs e)
{
Response.Redirect("Abc.aspx?flag=yes", false); //again not working with this.
}
When I click on this New button i am getting error in console:
Is this error has to do anything with this option: EnableEventValidation="false" as you can see in my code?
Note: I need to pass parameter as query string for some reason.
Abc.aspx:
<%# Page Title="" Theme="---" Language="C#" MasterPageFile="---" AutoEventWireup="true" CodeBehind="---" EnableEventValidation="false" Inherits="---" %>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rf1" runat="server" ErrorMessage="require" ForeColor="Red" ControlToValidate="txt1" Display="None" ValidationGroup="validate"></asp:RequiredFieldValidator>
<asp:TextBox ID="txt2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rf2" runat="server" ErrorMessage="require" ForeColor="Red" ControlToValidate="txt2" Display="None" ValidationGroup="validate"></asp:RequiredFieldValidator>
<asp:Button ID="btnSubmit" runat="server" Text="Save" ValidationGroup="validate" OnClick="btnSubmit_Click" UseSubmitBehavior="true" OnClientClick="checkvalidation()"/> //on click of this i want to perform validation but it is not working.
<telerik:RadCodeBlock ID="radcodeblock1" runat="server" EnableViewState="true">
<script type="text/javascript">
function checkvalidation() {
window.Page_ClientValidate('validate');
var counter= 0;
var val= '';
for (var i = 0; i < window.Page_Validators.length; i++) {
if (!window.Page_Validators[i].isvalid && typeof (window.Page_Validators[i].errormessage) == "string") {
counter= 1;
val+= '- ' + window.Page_Validators[i].errormessage + '<br>';
}
}
if (counter== 1) {
//My validation pop up to display validations alert because this counter value remains 0 so this part is not executed.
}
}
</script>
</telerik:RadCodeBlock>
Now when I click on submit button then my server side code event is fired but my validation pop up doesn't appear.
I have even put this line in web.config:
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"></add>
But this is still not working as removing query string from response.redirect or from windows.location.href then my validation pop up successfully appears and it is working fine.
If, as you say, window.Page_Validators[i].isvalid is false and typeof (window.Page_Validators[i].errormessage) is true, then we must go into the 'if' condition. The counter must be set to 1, and then must go into the 'if' later on.
I've changed the checks a little bit and have added the console logging to help you. In case anyone doesn't know, you can view these messages by hitting F12 in the browser and clicking "Console".
function checkvalidation() {
window.Page_ClientValidate('validate');
var counter= 0;
var val= '';
for (var i = 0; i < window.Page_Validators.length; i++) {
if ( (window.Page_Validators[i].isvalid === false) && typeof (window.Page_Validators[i].errormessage) == "string") {
console.log("Inside the if condition");
console.log(window.Page_Validators[i]);
counter = 1;
val+= '- ' + window.Page_Validators[i].errormessage + '<br>';
}
}
if (counter === 1) {
//My validation pop up to display validations alert because this counter value remains 0 so this part is not executed.
}
}

Required Field Validation in javascript

I tried this code for validating empty field,But it doesn't works properly when call javascript it does not focus on Textbox,and code will execute continues.
Html Code:
<asp:TextBox ID="txtholdername" runat="server" Width="60%"></asp:TextBox>
<asp:TextBox ID="txtusername" runat="server" Width="60%"></asp:TextBox>
<asp:ImageButton ID="btnsave" runat="server" OnClientClick="javascript:return validateRegistrationMaster();" ImageUrl="~/Images/save.png" />
Script
function IsBlank(obj) {
if (obj) {
if (!String.prototype.trim) { String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }; }
if ((obj.value.trim().length == 0) || (obj.value == null)) {
obj.focus();
return false;
}
return true;
}
}
function validateRegistrationMaster() {
var Holder_Name = document.getElementById('<%= txtholdername.ClientID %>');
var username = document.getElementById('<%= txtusername.ClientID %>');
if ((!IsBlank(Holder_Name))) {
Holder_Name.focus();
return false;
}
if ((!IsBlank(username))) {
username.focus();
return false;
} return true;
}
Use Required Field Validator instead of custom Javascript, while using Asp.Net Controls.
Example : Click Here W3 Schools Link
Code:
<asp:RequiredFieldValidator ControlToValidate="txtholdername" Text="The holder name field is required!"
runat="server" />
<asp:RequiredFieldValidator ControlToValidate="txtusername" Text="The user namefield is required!"
runat="server" />

Checkbox won't change value with javascript

I have 2 check boxes where only one or none may be checked.
Since I can't do a postback I tried this with Javascript.
The Javascript finds the element (tested it with an alert).
But the value won't change.
Any Idea how I can do this with Javascript?
The Javascript:
function mrcAndNbbFilterChanged(mrcOrNbb)
{
alert("er in");
if(mrcOrNbb == 0)
{
document.getElementById("ctl00_contentHolder_cb_mrcFilter").checked=true;
document.getElementById("ctl00_contentHolder_cbNoBackBilling").checked=false;
alert(document.getElementById("ctl00_contentHolder_cbNoBackBilling"));
alert("0");
}
else
{
if(mrcOrNbb == 1)
{
alert("1");
document.getElementById("cb_mrcFilter").checked=false;
document.getElementById("cbNoBackBilling").checked=true;
}
}
}
The ASP code:
<asp:CheckBox ID="cb_mrcFilter" runat="server" Text="Only MRC" OnClick="mrcAndNbbFilterChanged(0)" />
<asp:CheckBox ID="cbNoBackBilling" runat="server" Text="No back billing" OnClick="mrcAndNbbFilterChanged(1)" />
ASP.NET applies that ctl00_-esque string to IDs when using ASP controls to ensure they are unique. You can get the ASP-modified ID value using:
document.getElementById("<%= cb_mrcFilter.ClientID %>").checked=false;
document.getElementById("<%= cbNoBackBilling.ClientID %>").checked=true;
Also, as a side note, you can use else if { ... }, rather than else { if { ... } } when only dealing with one alternative:
if(mrcOrNbb == 0) {
...
}
else if(mrcOrNbb == 1) {
...
}

ValidationGroup in ASP.NET

I have this much
<asp:Button ID="btnSaveContest" runat="server" Text="Save & Publish Contest" OnClientClick="javascript:changeInputTexts(); return disableAfterClick();"
ValidationGroup="ContestAdd" OnClick="btnSaveContest_Click" />
Now I want to call disableAfterClick() after all validations are completed. It should be in Client Side. So that I can ensure that the user can click the button only one time.
function ValidateCreateContest() {
Page_ClientValidate();
if (Page_IsValid) {
$('#<%=btnSaveContest.ClientID%>').attr('disabled', 'disabled');
return true;
}
else {
return false;
}
}`

Categories