无法使用AJAX将Radio Buttons / Checkboxs输入MySQL DB

Question

I have an app and I am trying to get radio buttons and checkboxes to enter information into the DB. At the moment, only the text fields enter information into the database properly, but the checkboxes and radio buttons only enter the first radio button's value into the DB. So, for instance with radio buttons, "Yes" would be entered into the DB even though "No" is selected. I am not sure what I am doing wrong.

Here are the relevant HTML functions:

function saveUserInfo(userName, userEmail, optedIn, currentUser, catDog, otherBrand)
    {
            if(optedIn === "Yes")
            {
                finalAnswers = userName + "yes" + "~" + userEmail + "~" + optedIn + "~" + currentUser + "~" + catDog + "~" + otherBrand + "~";
            }else{
              finalAnswers = userName + "no" + "~" + userEmail + "~" + optedIn + "~" + currentUser + "~" + catDog + "~" + otherBrand + "~";
              //  finalAnswers = userName + "~" + userEmail + "~0" + optedIn + "~1" + currentUser + "~2" + catDog + "~3" + otherBrand + "~4";
            }

      try
        {
          $.ajax({
            url: surveyServer + finalAnswers,
            type: 'post',
            success: function(evt){
              console.log('success saving ' + finalAnswers);
            }
          });
        }
      catch(err)
      {
        alert(err.message);

      }
    }


function saveUser()
{
  $('.wrapper').find("#userEmail").blur();
        if (($('#userName').val().length > 0) && ($('#userEmail').val().length > 0))
        {
            var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i
            var valueToTest = $('#userEmail').val();
            if (testEmail.test(valueToTest))
            {
                //pass
                saveUserInfo($('#userName').val(), $('#userEmail').val(), $('#optedIn').val(), $('#currentUser').val(), $('#catDog').val(), $('#otherBrand').val());
                $('.wrapper').slick('slickNext');
            } else {
                // Do whatever if it fails.
      alert("Please enter a valid email address.");
                $('.wrapper').find("#userEmail").focus();
            }

        }else{
            alert("Please enter your name and email address then click Submit.");
            $('.wrapper').find("#userName").focus();
        }
    }

Here is the surveySurver code:

if (isset($_GET['user']))
    {
            try
            {
                $dbh = new PDO('mysql:host=localhost; dbname=bp1234', 'bp1234','bp1234');


                $userAnswerArray = explode("~", $_GET['user']);

                $stmt = $dbh->prepare("INSERT INTO bpQuiz (userName, userEmail, optedIn, currentUser, catDog, otherBrand) VALUES (:userName, :userEmail, :optedIn, :currentUser, :catDog, :otherBrand)");

                $stmt->bindParam(':userName', $userName);
                $stmt->bindParam(':userEmail', $userEmail);
                $stmt->bindParam(':optedIn', $userOption);
                $stmt->bindParam(':currentUser', $currentUser);
                $stmt->bindParam(':catDog', $catDog);
                $stmt->bindParam(':otherBrand', $otherBrand);

                // insert value
                $userName = $userAnswerArray[0];
                $userEmail = $userAnswerArray[1];
                $userOption = $userAnswerArray[2];
                $currentUser = $userAnswerArray[3];
                $catDog = $userAnswerArray[4];
                $otherBrand = $userAnswerArray[5];
                $stmt->execute();

            }

            catch (PDOException $e)
            {
                    echo 'ERROR: ' . $e->getMessage();
            }

    }
    else
    {
        echo "no querystring...";
    }

For good measure here are the form fields:

      <input type="text" class="contactFormInputBox" name="userName" id="userName"/>
      <input type="text" class="contactFormInputBox" name="userEmail" id="userEmail"/>
      <input type="checkbox" name="optedIn" id="optedIn" value="Yes">
        <input type="radio" name="currentUser" value="1" id="currentUser">Yes
        <input type="radio" name="currentUser" value="0" id="currentUser">No
        <input type="radio" name="catDog" value="cat" id="catDog">Cat
        <input type="radio" name="catDog" value="dog" id="catDog">Dog
        <input type="radio" name="catDog" value="both" id="catDog">Both
      </div>
      <div class="surveyOptions" id="Q2-b">
        <input type="text" class="contactFormInputBox" name="otherBrand" id="otherBrand"/>

Answer 1

I removed the "ID=" as per freedomn-m's suggestion and I also had to change around the following code which pulls the values from the checked radio buttons/checkboxes (ie: $( "input[type=checkbox][name=optedIn]:checked" ).val()) :

function saveUser()
    {
      $('.wrapper').find("#userEmail").blur();
            if (($('#userName').val().length > 0) && ($('#userEmail').val().length > 0))
            {
                var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i
                var valueToTest = $('#userEmail').val();
                if (testEmail.test(valueToTest))
                {
                    //pass
                    saveUserInfo($('#userName').val(), $('#userEmail').val(), $( "input[type=checkbox][name=optedIn]:checked" ).val(), $( "input[type=radio][name=currentUser]:checked" ).val(), $( "input[type=radio][name=catDog]:checked" ).val(), $('#otherBrand').val());
                    $('.wrapper').slick('slickNext');
                } else {
                    // Do whatever if it fails.
          alert("Please enter a valid email address.");
                    $('.wrapper').find("#userEmail").focus();
                }

            }else{
                alert("Please enter your name and email address then click Submit.");
                $('.wrapper').find("#userName").focus();
            }
        }