Solved

Javascript confirmation if specific radio button set on submit

Posted on 2010-09-21
3
758 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

707 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