Web Analytics Made Easy -
StatCounter Confirm onclick for a link and disabling submit buttons - CodingForum

Announcement

Collapse
No announcement yet.

Confirm onclick for a link and disabling submit buttons

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Confirm onclick for a link and disabling submit buttons

    Hey, I have a link that deletes a row from my database. I want to have the Javascript alert that says "Are you sure you want to delete this?" I was trying confirm() but if i hit cancel it still went through. How do I make it so if they hit cancel it wont go through?

    Also I have forms that I tried form1.submit.disabled=true and when I clicked all it did was disable the submit button but not submit the form...
    -bubbles

  • #2
    return true || false;

    There are many ways to do this. My favorite way is to use a javascript url.
    Code:
    <html>
    	<head>
    		<title>Confirmation of Linkage</title>
    		<script type="text/javascript">
    		function sureLink(href,msg){
    			if(typeof(msg)=="undefined")msg="Are you sure you want to do that?";
    			if(confirm(msg))location=href;
    		}
    		</script>
    	</head>
    	<body>
    		<a href="javascript:sureLink('http://www.vortexcortex.com/')">Visit vortexcortex.com.</a><br>
    		<a href="javascript:sureLink('?db=myDataBase&amp;row=1','Are you sure you want to delete this row?')">Delete Row</a><br>
    		<button onclick="sureLink('http://www.microsoft.com','Go to microsoft.com?!?!?');">Don't Click Me!</button>
    	</body>
    </html>
    If you prefer to use the onclick attribute you could do something like this.
    Code:
    <html>
    	<head>
    		<title>Confirmation of Linkage (option 2)</title>
    		<script type="text/javascript">
    		function makeSure(el,msg){
    			if (typeof(msg)=="undefined")msg="Are you sure you want to do this?";
    			return confirm(msg);
    		}
    		</script>
    	</head>
    	<body>
    		<a href="http://www.vortexcortex.com" onclick="return makeSure(this);">Visit VortexCortex.com.</a><br>
    		<a href="?DB=myDataBase&amp;ROW=1&amp;ACT=delete" onclick="return makeSure(this, 'Delete this entire row?')">Delete this row.</a>
    	</body>
    </html>
    Last edited by VortexCortex; Oct 5, 2006, 02:12 AM. Reason: Added option #2 (onclick attribute)

    Comment


    • #3
      Canceling Form Submission

      Canceling a form submission is similar to canceling a link action.

      You simply return the false value in the onclick. This cancels the default operation of the click event. This works for other types of events too....

      Here's a form that validates a user name and only submits the form if the name's length is greater than three characters long.

      Code:
      <html>
      	<head>
      		<title>Canceling Form Submission</title>
      		<script type="text/javascript">
      		function validate(){
      			var ok = true;
      			if(myForm.user.value.length < 3){
      				alert("Your name must be at least 3 charactors long.");
      				ok = false;
      			}
      			return ok;  // This is where we return the true or false.
      		}
      		</script>
      	</head>
      	<body>
      		<form id="myForm" action="http://www.vortexcortex.com/">
      			Enter your name: <input id="user" name="user" type="text" size="10"><br>
      			<input type="submit" value="Validate & Submit" onclick="return validate()">
      		</form>
      	</body>
      </html>
      Note the "return" part of the onclick attribute...

      The contents of event attributes are evaluated by the browser (similar to "eval" command) when that event occurs.

      The return value of the eval determines if the default operation for that event is performed after the eval is processed.

      The default operation of the "click" event for the form's submit button is to submit the form.

      When the contents of the "onclick" attribute are evaluated (processed) by the browser my sample script returns a true or false value.
      A "true" value tells the browser to continue processing the click event, and submit the form. A "false" value tells the browser to stop processing the click event which prevents the form from being submitted.
      Last edited by VortexCortex; Oct 5, 2006, 02:38 AM. Reason: Added further explanation.

      Comment


      • #4
        I dont want to cancel the form submission, I just want to disable the submit button onclick() so that they cant keep hitting it if the page is running slow and create duplicate entries in my db.
        -bubbles

        Comment

        Working...
        X