• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

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.
0
Robert Saylor
Asked:
Robert Saylor
  • 6
  • 4
1 Solution
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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