Cancel Click from onclick Javascript Function

[skillo]

Hey Guys!!

Ok, bare with me, very new to Javascript but a quick learner.

I have a couple of server control buttons on a WebForm. One of them is a basic "Next" button, while the other searches a database for a Quote Number that they provide in a text box.

I have code in the Click Event of the Search button to find matches then display options to the user, but I want to make sure that they have filled in the textbox prior to starting the search. So, I have created a javascript function and have added an "onclick" attribute to run the function, display an alert, & place focus to the textbox (if empty). This seems to work fine, but the Click event (server side) of the button continues on. How do you cancel the click event if the onclick function returns false? Is it possible?

Any thoughts, greatly appreciated!!
Thanks a bunch!!
Stacy

 

[greedyzebra]

If your "search" button is part of a form then you can have this:

<form onsumbit=&quot;return validateFunction()&quot;>

If validateFunction returns true, then the form will be submitted. If validateFunction returns false, it won't be.

The button can, of course, be a normal button with formName.submit() as its action. Or the button could be a type=&quot;submit&quot; (submit button) with the value=&quot;Search.&quot;

Hope that helps.

 

[shadedecho]

<script language=&quot;javascript&quot;>

function checksearchbox(theForm) {
  if (theForm.elements['mytextbox'].value == &quot;&quot;) {
    alert(&quot;Please enter a value to search for!&quot;);
    theForm.elements['mytextbox'].focus();
    return;
  }
  else {
    theForm.submit();
  }
}

</script>

<form name=&quot;myform&quot; action=&quot;...&quot; method=&quot;...&quot;>

<input type=&quot;text&quot; name=&quot;mytextbox&quot;><br>
<input type=&quot;button&quot; value=&quot;Search&quot; onClick=&quot;checksearchbox(this.form);&quot;>

</form>

 

[skillo]

Hey GreedyZebra/ShadeDecho!!

Thanks so much for the info!! This stuff is slowly sinking in.

So, help me out, would this still allow me to hide my database search functions in the 'code-behind' file (related to the Click event of the button), and just validate with the Javascript functions (with the onclick)?

I think I'm getting in over my head trying to combine the two (onclick in Javascript & click in code behind), but I just know that there has to be a way.

Thanks again for the responses, I'm going to play around with them today to see what we can come up with.

 

[shadedecho]

my opinion is that if you can validate the user's input as much as possible on the CLIENT side, using javascript FIRST, you will have less complicated and easier to maintain/update SERVER-side code to process that input later. I am very much a proponent of client side javascript validation, and so to answer your question, YES, you would be using javascript to verify that the user actually types something into the box before even SENDING the data to the SERVER to do your searching.

Just keep in mind that all of script interaction with the user on the client side is EVENT based, meaning the page sits (relatively) idle until events occur which cause something to happen. This means that you have to have functions which respond to these events, like the onClick of your button, and then be smart enough to decide FOR THE USER whether the events are ok and should go on, or if something is wrong and to tell the user how to fix it. Once you are reasonably (and you define that level) sure that the user has done what you need them to (like typing things in, clicking check/radio boxes, etc) THEN you can send that data onto the server and have it process the data, search, etc.

hope this helps!