jquery check 2 radio buttons

Robert Saylor
Robert Saylor used Ask the Experts™
on
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.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Expert of the Year 2014
Top Expert 2014

Commented:
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

Robert SaylorSenior Developer

Author

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

Expert of the Year 2014
Top Expert 2014

Commented:
Can you post the rendered HTML - hard to decipher server side code when you don't know what is supposed to be where.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Robert SaylorSenior Developer

Author

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.
Expert of the Year 2014
Top Expert 2014

Commented:
Ahhh it's ajax

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

Open in new window

Robert SaylorSenior Developer

Author

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.
Robert SaylorSenior Developer

Author

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');
      }
Expert of the Year 2014
Top Expert 2014
Commented:
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

Robert SaylorSenior Developer

Author

Commented:
That looks good I will try it monday morning.
Robert SaylorSenior Developer

Author

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!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial