Solved

Javascript confirmation if specific radio button set on submit

Posted on 2010-09-21
3
755 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

831 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