Page submits after JS error alert 2

[developer155]

Hi,
I have a asp button on the page(submit button) and I added onclick cleint side even to it. The onclick event calls Validate() function that validates user input before form can be submitted. Everything is fine expect when if user leaves a field out and JS brings up messgae box to alert the user to enter the value, when user click OK in the message box the form submits! It should not obviously
Here is my code and thanks for any help!!!

Button:
<input type="button" id="listBtn" name="listBtn" value="Submit" class="btn" runat="server" onclick="validateList();" />



function validateList() {
var errorMsg = "";
var name = get('listName');
//var table = get('chooseTableInput');
var table = get('chooseTableList2');

if (name.value == ''){
name.className = 'err';
errorMsg += " - enter a name\n";
}

if (table.value == ''){
table.className = 'err';
errorMsg += " - choose a table\n";
}

// display errMsg or submit the form
if (errorMsg != "") {
alert('Please correct the following:\n\n' + errorMsg);
return false;
}
else {
return true;
}

}

 

[kaht]

Try moving this:

<input type="button" id="listBtn" name="listBtn" value="Submit" class="btn" runat="server"  [!]onclick="validateList();" [/!] />

into this:

<form id="whatever" method="post" action="whatever.aspx" [!]onsubmit="return validateList()"[/!]>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

http://www.silkypups.com

 

[developer155]

that worked, thanks much, kaht!

 

[kaht]

not a problem

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

http://www.silkypups.com

 

[developer155]

kaht, actually there is a problem with this:
I have another button on form called delete that deletes a row. That button submits the page as well. Since it submits the page Validate function is executed and obviousl it returns validation error when I try to delete

So I guess I need to put Validate only to the button and not the form(unless there is a better way)
Here is the new delete button:
<asp:ImageButton runat="server" id ="Delete" ImageUrl="media/i_edit.gif" OnClick="Delete_Click" ></asp:ImageButton>

 

[cLFlaVA]

one way would be to put an onclick event on both your submit and delete functions. the onclick event would set a javascript variable or a hidden field value.

then, in your validation function, you can check the value of the javascript value (or hidden field value). if the submit button was clicked, continue, otherwise, automatically return true.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[developer155]

I will try that, but I am just wondering why this does not work:
<input type="button" id="listBtn" name="listBtn" value="Submit" class="btn" runat="server" onclick="return validateList();" />

 

[cLFlaVA]

if you want to use a regular "button" type input (rather than a "submit" type), you will need to trigger the form submission from within your javascript function. something like this, perhaps:

function validateList() {
var errorMsg = "";
     var name  = get('listName');
     //var table = get('chooseTableInput');
     var table = get('chooseTableList2');

     if (name.value == ''){
       name.className = 'err';
       errorMsg += " - enter a name\n";
     }

     if (table.value == ''){
       table.className = 'err';
       errorMsg += " - choose a table\n";
     }

     // display errMsg or submit the form
     if (errorMsg != "") {
       alert('Please correct the following:\n\n' + errorMsg);
       return false;
     }
     else {
[red]        document.forms['YourFormName'].submit();[/red]
     }

   }

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[developer155]

whats the difference between submit and button types? I can use submit type probably

 

[cLFlaVA]

!?

submits SUBMIT the form when clicked, by default.
buttons do nothing when clicked, by default.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[developer155]

wow, its been a while since I worked with html controls, I guess i got used to server controls from .net. Thanks!

Anyway, one more question:
is there way to make input type="image" a Submit button so after it is clicked and JS returns true, it submits? Or that has to be handled in JS?

 

[cLFlaVA]

an image input type, by default, submits a form. you don't need to do anything.



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[developer155]

cLFLaVA, thanks for your advice and patience
I finally got everything to work thanks to you and Kaht

thanks much guys!