Solved

Javascript confirmation if specific radio button set on submit

Posted on 2010-09-21
3
753 Views
Last Modified: 2012-06-27
I have a form. It has 4 rows and uses a single form statement. All of the radio buttons have the same name, dothis. The values are new1, edit1, delete1 for the first row AND new2, edit2 , delete2 for the second row and so on.

I would like an alert button to pop up, asking them to confirm their choice, only if they have clicked on one of the delete variables (delete1, delete2, etc) I DON'T want it to pop up if they set one of the non-delete radio buttons

If they confirm, I'd like to continue with the POST. It needs to actually POST becuase there are both the active and some hidden variables that are subsequently verified as being $_POST[] variables.

Is there a javaScript or JQuery way to do this? The main page is in PHP.  
javascript-alert.jpg
0
Comment
Question by:birwin
3 Comments
 
LVL 4

Expert Comment

by:rstjean
ID: 33731172
<script>
function valButton(obj) {
    var cnt = -1;
    //find which box is selected
    for (var i=0;obj.dothis.length-1; i++) {
      if (obj.dothis[i].checked) {
          cnt = i;
          break;
      }
    }
    //if selected
    if (cnt > -1) {
      var regexval = new RegExp('delete.*');
      var fieldval = obj.dothis[cnt].value;
      var tmp = re.exec(fieldval);
      if(tmp == null) {
      return true;
      }
      else{
           if(confirm('Are you sure you want to delete?')){
           return false;
           }
           else{
           return true;
           };
      }
    }
    // if not selected
    else
    {
    alert('Choose a value');
    return false;
    }
}
</script>
in your <form action="" onsubmit="valButton(this)">
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 33731265
jQuery version:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">

	$(function() {

		$('#myform').click(function(e) {

			if(e.target.nodeName.toLowerCase() === 'input' && e.target.type === 'submit') {

				var $selectedRadio = $(e.target).parent().find('input[type=radio]:checked');

				if($selectedRadio.val().match(/delete/gi)) {

					return confirm("Are you sure you want to delete this?");

				}

			}

		});

	});

	</script>

Open in new window

0
 
LVL 6

Author Closing Comment

by:birwin
ID: 33731533
I love it. No additional markup required and it works perfectly. Thank you.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now