Develop Reference

Javascript Confirm not Stopping request from post back if pressed cancel?

I am using Javascript function with confirm() message box and also having RequiredFieldValidator if I press cancel on my confirm message box but ValidatorGroup is true then it not stopping a request from getting post back.
I want to implement in such a way that If validatorGroup is treu but function return false then request should not get post back
Here is my Code:-
<asp:Button ID="btnStaffSendRequest" runat="server" Text="Send" OnClientClick="UploadRefrrel()"
UseSubmitBehavior="false" ValidationGroup="SaveRequestGroup" OnClick="btnStaffSendRequest_OnClick"
TabIndex="1000" />
Here is my Javascript Function:-
<script language="javascript" type="text/javascript">
function UploadRefrrel() {
var hiddenFile = this.document.getElementById("<%= hfInputForm.ClientID %>");
var upload = $find("<%= radUploadFiles.ClientID %>");
var inputs = upload.getUploadedFiles();
var retVal;
if (hiddenFile != null && hiddenFile.value != "" && inputs.length == 0) {
retVal = confirm("FYI - Only 'Referral Form' is attached. Do you want to proceed without any other attachment?");
}
return retVal;
}
</script>

<asp:CustomValidator ID="validatePostBack" runat="server" Display="None" ClientValidationFunction="Validate_PostBack"
ValidationGroup="SaveRequestGroup" ErrorMessage="<br /> Please add other attachment."></asp:CustomValidator>
<telerik:RadScriptBlock ID="uploadReferel" runat="server">
<script language="javascript" type="text/javascript">
function Validate_PostBack(sender, e) {
var hiddenFile = this.document.getElementById("<%= hfInputForm.ClientID %>");
var upload = $find("<%= radUploadFiles.ClientID %>");
var inputs = upload.getUploadedFiles();
if (hiddenFile != null && hiddenFile.value != "" && inputs.length == 0) {
var retVal = confirm("FYI - Only 'Referral Form' is attached. Do you want to proceed without any other attachment?");
if (retVal == true) {
e.IsValid = true;
}
else {
e.IsValid = false;
}
}
}
</script>
</telerik:RadScriptBlock>
Found my solution and working fine

Passing textBox to java script function

My question might be little old but I tried all the possibilities and could not find any solution.
I want to do one function for verification the input field:
This function works fine:
function myFunction()
{
var x;
x = document.getElementById('<%=textBoxCustomerCode.ClientID%>').value;
if(isNaN(x) || x == "")
{
alert('Problem input');
return false;
}
else
{
return true;
}
}
and here is the code:
<asp:ImageButton ID="imageButtonView" runat="server" Height="60px" ToolTip="بحث" Width="60px" BorderStyle="Solid" ImageUrl="~/Images/searchButton.jpg" OnClick="imageButtonView_Click" OnClientClick="return myFunction();"/>
This function works fine but once I need to make the function works with any input field. I want way to pass any field to the function so it will verify it. Any idea to do so.

Something like this could work (making the function work for any textbox):
function myFunction(textboxid)
{
var x;
x = document.getElementById(textboxid).value;
if(isNaN(x) || x == "")
{
alert('Problem input');
return false;
}
else
{
return true;
}
}
Here you give the function the id of the textbox you want to check. We do not check if a textbox with the given id exists though.

Change x = document.getElementById('<%=textBoxCustomerCode.ClientID%>').value; to x = document.getElementById('imageButtonView').value;

Try ..........this
function myFunction(id)
{
var x;
x = document.getElementById(id).value;
if(isNaN(x) || x == "")
{
alert('Problem input');
return false;
}
else
{
return true;
}
}
and pass that id through onclientclick event. i.e.
<asp:ImageButton ID="imageButtonView" runat="server" Height="60px" ToolTip="بحث" Width="60px" BorderStyle="Solid" ImageUrl="~/Images/searchButton.jpg" OnClick="imageButtonView_Click" OnClientClick="return myFunction(here is that id to pass);"/>

You can simply use class for finding the element. Or you can pass id to the function in OnClientClick()..
function myFunction(element)
{
var x;
x = document.getElementById('element').value;
if(isNaN(x) || x == "")
{
alert('Problem input');
return false;
}
else
{
return true;
}
}
and you can call this function by OnClientClick="return myFunction(this);"

0x800a138f - JavaScript runtime error: Unable to get property 'value' of undefined or null reference

i have written a javascript code to compare 2dates from 2 textboxes
function CompareDates() {
var fdate = document.getElementById('txtFromDate');
var edate = document.getElementById('txtToDate');
var FromDate = fdate.value.split('/');
var EndDate = edate.value.split('/');
var val = 'false';
if (parseInt(FromDate[2]) < parseInt(EndDate[2])) {
val = 'true';
return true;
}
else if (parseInt(FromDate[2]) == parseInt(EndDate[2])) {
if (parseInt(FromDate[0]) < parseInt(EndDate[0])) {
val = 'true';
return true;
}
else if (parseInt(FromDate[0]) == parseInt(EndDate[0])) {
if (parseInt(FromDate[1]) <= parseInt(EndDate[1])) {
val = 'true';
return true;
}
}
}
if (val == "false") {
alert("FromDate Always Less Than ToDate");
return false;
}
}
and html code is
<asp:TextBox ID="txtFromDate" runat="server" Width="150px" />
<ajaxToolkit:CalendarExtender CssClass="MyCalendar" runat="server"
ID="ceFromDate"
TargetControlID="txtFromDate"
Format="dd/MM/yyyy" />
<asp:TextBox ID="txtToDate" runat="server" Width="150px" />
<ajaxToolkit:CalendarExtender CssClass="MyCalendar" runat="server"
ID="ceToDAte"
TargetControlID="txtToDate"
Format="dd/MM/yyyy" />
<asp:Button ID="btnGenerate" runat="server" CssClass="button"
Text="Generate" OnClientClick="if(!CompareDates()) return false;"
OnClick="btnGenerate_Click" />
the problem is that the page is running well in chrome but when i run my application in IE it throw an error
0x800a138f - JavaScript runtime error: Unable to get property 'value'
of undefined or null reference
please help me to overcome from this problem.

The error is here:
var fdate = document.getElementById('txtFromDate');
var edate = document.getElementById('txtToDate');
The problem is that txtFromDate and txtToDate are the server name of controls, not the client name (look the source of page from the browser).
Try this:
var fdate = document.getElementById('<%=txtFromDate.ClientID%>');
var edate = document.getElementById('<%=txtToDate.ClientID%>');

If your javascript is located in an external JS file (which it should), the posted solutions will not work. But you could give the text fields a unique class name and modify your code as such:
<asp:TextBox ID="txtFromDate" runat="server" Width="150px" CssClass="txtFromDate" />
<asp:TextBox ID="txtToDate" runat="server" Width="150px" CssClass="txtToDate" />
and your javascript:
var fdate = document.getElementsByClassName('txtFromDate')[0];
var edate = document.getElementsByClassName('txtToDate')[0];

Please try this
document.getElementById('<%=txtFromDate.ClientID %>')
Change your code like following:
function CompareDates() {
var fdate = document.getElementById('<%=txtFromDate.ClientID %>');
var edate = document.getElementById('<%=txtFromDate.ClientID %>');
var FromDate = fdate.value.split('/');
var EndDate = edate.value.split('/');
var val = 'false';
if (parseInt(FromDate[2]) < parseInt(EndDate[2])) {
val = 'true';
return true;
}
else if (parseInt(FromDate[2]) == parseInt(EndDate[2])) {
if (parseInt(FromDate[0]) < parseInt(EndDate[0])) {
val = 'true';
return true;
}
else if (parseInt(FromDate[0]) == parseInt(EndDate[0])) {
if (parseInt(FromDate[1]) <= parseInt(EndDate[1])) {
val = 'true';
return true;
}
}
}
if (val == "false") {
alert("FromDate Always Less Than ToDate");
return false;
}
}

You are missing the # for your id reference.
Change from:
var fdate = document.getElementById('txtFromDate');
to:
var fdate = document.getElementById('#txtFromDate');
I was wrong about the above statements.
I was able to fix the same error in my jquery code where I was missing the #. getElementById does not need this special character.

Checking if radiobuttonlist has been selected

I'm using this code to check if a radiobuttonlist has been selected, however it doesn't return false if nothing has been checked, and continues through to the function in the class behind. The radiobutton list is generated from databinding in codebehind.
<asp:LinkButton class="btn" id="linkDelete" runat="server" onclick="link_Delete" OnClientClick="checkform()">Delete Template</asp:LinkButton>
<asp:radiobuttonlist id="optMessageType" runat="server" onselectedindexchanged="optMessageType_SelectedIndexChanged" RepeatDirection="Vertical" CssClass="none-table">
</asp:radiobuttonlist>
function checkform() {
var radiolist = document.getElementById('<%= optMessageType.ClientID %>');
var radio = radiolist.getElementsByTagName("input");
if (radio.length > 0) {
for (var x = 0; x < radio.length; x++) {
if (radio[x].type === "radio" && radio[x].checked) {
//alert("Checking...");
// alert("Selected item Value " + radio[x].value);
var r = confirm("Are you sure you want to delete this template?")
if (r == true) {
//alert("You pressed OK!")
return true;
}
else {
//alert("You pressed Cancel!");
return;
}
}
else {
alert("Select a template to delete");
return;
}
}
}
else {
alert("nope");
return;
}
}
Code Behind:
protected void link_Delete(object sender, System.EventArgs e)
{
Label3.Text = "Deleted!"; //For Testing
}

You should write
<asp:LinkButton class="btn" id="linkDelete" runat="server" onclick="link_Delete" OnClientClick="return checkform();">Delete Template</asp:LinkButton>
i have added return in OnClientClick atribute funcion call
hope this may solve our problem.

User Control with Client + Server Side CustomValidation; Wrong Client side validator is picked

I have a user control which contains a CustomValidator which is used according to whether a RadioButton is checked or not (there are several RadioButtons, I'm only showing the relevant one)
<asp:RadioButton runat="Server" ID="RadioBetween" GroupName="DateGroup" CssClass="date_group_options_control_radio" />
<asp:TextBox ID="FromDate" runat="server" Columns="8"></asp:TextBox>
<asp:TextBox ID="ToDate" runat="server" Columns="8"></asp:TextBox>
<asp:CustomValidator ID="DateValidator" runat="server" Display="Dynamic" ClientValidationFunction="ValidateDateFields_Client" OnServerValidate="ValidateDateFields"></asp:CustomValidator>
There is some client + server side validation code (the server side code does exactly the same thing and is skipped for brevity)
<script type="text/javascript">
function ValidateDateFields_Client(source, args)
{
if ("<%=EnableValidation%>" == "True")
{
var bRadioBetweenSelected = false;
var oRadio = document.getElementById('<%=RadioBetween.ClientID%>');
if (oRadio != null && (oRadio.checked == true || oRadio["checked"] == true))
{
bRadioBetweenSelected = true;
}
if (bRadioBetweenSelected)
{
var oFromDate = document.getElementById('<%=FromDate.ClientID%>');
var oToDate = document.getElementById('<%=ToDate.ClientID%>');
if (oFromDate != null && oToDate != null)
{
var sFromDate = oFromDate.value;
var sToDate = oToDate.value;
source.innerHTML = ValidateFromToDate(sFromDate, sToDate, args);
if (!args.IsValid)
{
return;
}
}
else
{
args.IsValid = true;
}
}
else
{
args.IsValid = true;
}
}
}
</script>
There are two instances of this control in the page. When running the client side version it hits the wrong one (the version of the control which is disabled). You can see from the generated HTML both are correctly specified. I'm not sure how .NET works out which clientside function to call given they both have the same name.
<script type="text/javascript">
//<![CDATA[
var ctl00_MCPH1_QueryTextValidator = document.all ? document.all["ctl00_MCPH1_QueryTextValidator"] : document.getElementById("ctl00_MCPH1_QueryTextValidator");
ctl00_MCPH1_QueryTextValidator.controltovalidate = "ctl00_MCPH1_SearchTextBox";
ctl00_MCPH1_QueryTextValidator.focusOnError = "t";
ctl00_MCPH1_QueryTextValidator.display = "Dynamic";
ctl00_MCPH1_QueryTextValidator.evaluationfunction = "CustomValidatorEvaluateIsValid";
ctl00_MCPH1_QueryTextValidator.clientvalidationfunction = "ValidateQueryText_Client";
ctl00_MCPH1_QueryTextValidator.validateemptytext = "true";
var ctl00_MCPH1_DisplayOptionsControl1_DateValidator = document.all ? document.all["ctl00_MCPH1_DisplayOptionsControl1_DateValidator"] : document.getElementById("ctl00_MCPH1_DisplayOptionsControl1_DateValidator");
ctl00_MCPH1_DisplayOptionsControl1_DateValidator.display = "Dynamic";
ctl00_MCPH1_DisplayOptionsControl1_DateValidator.evaluationfunction = "CustomValidatorEvaluateIsValid";
ctl00_MCPH1_DisplayOptionsControl1_DateValidator.clientvalidationfunction = "ValidateDateFields_Client";
var ctl00_MCPH1_PreferencesControl1_PreferencesTabContainer_DisplayOptionsTab_DisplayOptionsControl_DateValidator = document.all ? document.all["ctl00_MCPH1_PreferencesControl1_PreferencesTabContainer_DisplayOptionsTab_DisplayOptionsControl_DateValidator"] : document.getElementById("ctl00_MCPH1_PreferencesControl1_PreferencesTabContainer_DisplayOptionsTab_DisplayOptionsControl_DateValidator");
ctl00_MCPH1_PreferencesControl1_PreferencesTabContainer_DisplayOptionsTab_DisplayOptionsControl_DateValidator.display = "Dynamic";
ctl00_MCPH1_PreferencesControl1_PreferencesTabContainer_DisplayOptionsTab_DisplayOptionsControl_DateValidator.evaluationfunction = "CustomValidatorEvaluateIsValid";
ctl00_MCPH1_PreferencesControl1_PreferencesTabContainer_DisplayOptionsTab_DisplayOptionsControl_DateValidator.clientvalidationfunction = "ValidateDateFields_Client";
//]]>
</script>
Do i need to add something in to scope it? What's the best way to achieve this? If I disable the loading of the second control everything works fine.

Your client validation function is generated with the same name for both your user controls. There will be two ValidateDateFields_Client() functions in your page, and of course the interpreter will only call one of them.
One way to work around that problem would be to generate unique function names:
<script type="text/javascript">
function ValidateDateFields_Client_<%=RadioBetween.ClientID%>(source, args)
{
// ...
}
</script>
<asp:CustomValidator ID="DateValidator" runat="server" Display="Dynamic"
ClientValidationFunction="ValidateDateFields_Client_"
OnServerValidate="ValidateDateFields"></asp:CustomValidator>
protected void Page_PreRender(object sender, EventArgs e)
{
DateValidator.ClientValidationFunction += RadioBetween.ClientID;
}