[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 762
  • Last Modified:

Javascript confirmation if specific radio button set on submit

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
birwin
Asked:
birwin
1 Solution
 
rstjeanCommented:
<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
 
DesignbyonyxCommented:
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
 
birwinAuthor Commented:
I love it. No additional markup required and it works perfectly. Thank you.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now