jquery check 2 radio buttons

I have two forms that produces reqults via jquery. I have a continue button at the bottom of the page. I want to enable the continue button only when somebody selects one of the radio's from the left side of the results and a radio button from the right side of the results.

here is an example of the radio buttons generated:
Note: I am using PHP so escape characters are inserted...

Right side of a table...
<input type=\"radio\" name=\"primary_contact\" id=\"primary_contact\" value=\"$row[contactID]\">

Open in new window


Note: Each section can have multiple radio buttons. The value is changed to the value in the database.

Left side of a table...
<input type=\"radio\" name=\"secondary_contact\" id=\"secondary_contact\" value=\"$row[contactID]\">

Open in new window


Then at the bottom of the screen I have a continue button. I know how to enable/disable a button but for this test all I want to see is an alert so I know the code works.

This is what I tried using to monitor if one of the "primary_contact" radio buttons is selected and one of the "secondary_contact" radio buttons.

         if ($(".primary_contact").is(':checked') && $(".secondary_contact").is(':checked')) {
            alert('ok');
         }

Open in new window


I don't get any alerts not js errors in firebug.
LVL 7
Robert SaylorSenior DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
How is this being fired?
         if ($(".primary_contact").is(':checked') && $(".secondary_contact").is(':checked')) {
            alert('ok');
         }

Open in new window

To capture a click - since once a radio button has been selected you cannot unselect it this should work fine.
$("[name=primary_contact]").click(function(){
  alert($(this).val())
})

Open in new window

0
Robert SaylorSenior DeveloperAuthor Commented:
It's just in <script> ... </script>. I tried your example but didn't get any alerts.

here is more of my code:

starting page:
         print "<h2>Merge Contacts</h2>";
         print "<form name=\"myform\">";
         print "<table border=0 width=100%>
         <tr>
            <td width=50% valign=top>
               <b>Primary Contact:</b>
               <br>The primary contact will become the active contact for the guest.<br>

            </td>
            <td width=50% valign=top>
                  <b>Secondary Contact:</b>
                  <br>The secondary contact will be merged into the primary contact including past and future reservations and waivers. When the secondary contact is merged into the primary the secondary contact will be deleted when complete.<br>


            </td>
         </tr>
         <tr>
            <td valign=top>
               <input type=\"text\" name=\"first1\" placeholder=\"First Name\" size=20> <input type=\"text\" name=\"last1\" size=20 placeholder=\"Last Name\"><br>
               <input type=\"text\" name=\"contact1\" placeholder=\"Or contact ID\">
               <input type=\"button\" value=\"Search\" onclick=\"lookup_contact1(this.form)\">

               <br><br>
               <div id=\"primary\"></div>

            </td>
            <td valign=top>
               <input type=\"text\" name=\"first2\" placeholder=\"First Name\" size=20> <input type=\"text\" name=\"last2\" size=20 placeholder=\"Last Name\"><br>
               <input type=\"text\" name=\"contact2\" placeholder=\"Or contact ID\">
               <input type=\"button\" value=\"Search\" onclick=\"lookup_contact2(this.form)\">

               <br><br>
               <div id=\"secondary\"></div>

            </td>
         </tr>

         <tr><td colspan=2 align=center><input type=\"submit\" id=\"continue\" name=\"continue\" value=\"Continue\" disabled style=\"background-color:grey;\"></td></tr>

         </table>";

         print "</form>";
         ?>
         <script>
         function lookup_contact1(myform) {
            $.get('lookup.php?type=1',
            $(myform).serialize(),
            function(php_msg) {
              $("#primary").html(php_msg);
            });
         }
         function lookup_contact2(myform) {
            $.get('lookup.php?type=2',
            $(myform).serialize(),
            function(php_msg) {
              $("#secondary").html(php_msg);
            });
         }

            $("[name=primary_contact]").click(function(){
              alert($(this).val())
            });

         </script>

Open in new window


lookup.php

      if ($_GET['type'] == "1") {
         if ($_GET['contact1'] != "") {
            $sql = "
            SELECT 
               `contacts`.*,
               `countries`.`country`

            FROM 
               `contacts`,`countries`

            WHERE 
               `contactID` = '$_GET[contact1]'
               AND `contacts`.`countryID` = `countries`.`countryID`
            ";
         } else {
            $sql = "
            SELECT
               `contacts`.*,
               `countries`.`country`

            FROM
               `contacts`,`countries`

            WHERE
               `contacts`.`first` LIKE '%$_GET[first1]%'
               AND `contacts`.`last` LIKE '%$_GET[last1]%'
               AND `contacts`.`countryID` = `countries`.`countryID`
            ";
         }

         $result = mysql_query($sql);
         for ($x=0; $x < mysql_num_rows($result); $x++) {
            $row = mysql_fetch_assoc($result);
            print "<table border=0 width=100%>
            <tr><td valign=top><input type=\"radio\" name=\"primary_contact\" id=\"primary_contact\" value=\"$row[contactID]\"></td>
            <td>$row[first] $row[middle] $row[last]<br>
            $row[city], $row[state]$row[province], $row[country]<br>
            $row[email]</td></tr>
            </table>";
            $found1 = "1";
         }

         if ($found1 != "1") {
            print "<br><font color=blue>No results please try again.</font><br>";
         }
      }

      if ($_GET['type'] == "2") {
         if ($_GET['contact2'] != "") {
            $sql = "
            SELECT 
               `contacts`.*,
               `countries`.`country`

            FROM 
               `contacts`,`countries`

            WHERE 
               `contactID` = '$_GET[contact2]'
               AND `contacts`.`countryID` = `countries`.`countryID`
            ";
         } else {
            $sql = "
            SELECT
               `contacts`.*,
               `countries`.`country`

            FROM
               `contacts`,`countries`

            WHERE
               `contacts`.`first` LIKE '%$_GET[first2]%'
               AND `contacts`.`last` LIKE '%$_GET[last2]%'
               AND `contacts`.`countryID` = `countries`.`countryID`
            ";
         }

         $result = mysql_query($sql);
         for ($x=0; $x < mysql_num_rows($result); $x++) {
            $row = mysql_fetch_assoc($result);
            print "<table border=0 width=100%>
            <tr><td valign=top><input type=\"radio\" name=\"secondary_contact\" id=\"secondary_contact\" value=\"$row[contactID]\"></td>
            <td>$row[first] $row[middle] $row[last]<br>
            $row[city], $row[state]$row[province], $row[country]<br>
            $row[email]</td></tr>
            </table>";
            $found2 = "1";
         }

         if ($found2 != "1") {
            print "<br><font color=blue>No results please try again.</font><br>";
         }

Open in new window

0
GaryCommented:
Can you post the rendered HTML - hard to decipher server side code when you don't know what is supposed to be where.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Robert SaylorSenior DeveloperAuthor Commented:
it has sensitive data...

For the most part the start page has 2 forms controlled by jquery. There are two div tags that gets the results from the two search forms. The div is where the radio's are produced.
0
GaryCommented:
Ahhh it's ajax

$(document).on("click","[name=primary_contact]",function(){
  alert($(this).val())
})

Open in new window

0
Robert SaylorSenior DeveloperAuthor Commented:
getting closer. I had to put the script in lookup.php then started getting alerts.

      <script>
        $('.primary_contact').click(function(){
          if ($(this).is(':checked'))
          {    
            var p1 = 1;
            alert($(this).val());
          }    
        });       

        $('.secondary_contact').click(function(){
          if ($(this).is(':checked'))
          {    
            var p2 = 1;
            alert($(this).val());
          }    
        });       

      if ((p1 == 1) && (p2 == 2)) {
         alert('Yes');
      }

      </script>

Open in new window


I need help with if p1 == 1 .. p2 == 2. That part is not working. The individual alerts are but I need a condition of both.
0
Robert SaylorSenior DeveloperAuthor Commented:
I get a reference error on my comparison...

ReferenceError: p1 is not defined
      

if ((p1 == 1) && (p2 == 1)) {

Note: I corrected this part.

     if ((p1 == 1) && (p2 == 2)) {
         alert('Yes');
      }
0
GaryCommented:
Remove your code above
Use this in your main page

$(function() {
$(document).on("click",".primary_contact,.secondary_contact",function(){
    if ($(".primary_contact").is(':checked') && $(".secondary_contact").is(':checked')) {
        alert("both checked")
    }
})
})

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robert SaylorSenior DeveloperAuthor Commented:
That looks good I will try it monday morning.
0
Robert SaylorSenior DeveloperAuthor Commented:
Works great thanks! I was able to program my continue button to be disabled and grey until they selected two radio buttons. I was also able to program the button to go back to disabled/grey if they re-searched on of the radio searches. Working great!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.