Javascript 未使用AJAX将单选按钮/复选框输入MySQL数据库

我有一个应用程序，我正试图获得单选按钮和复选框，将信息输入数据库。目前，只有文本字段正确地将信息输入数据库，但复选框和单选按钮仅将第一个单选按钮的值输入数据库。因此，例如，对于单选按钮，即使选择了“否”，也会在DB中输入“是”。我不确定我做错了什么

以下是相关的HTML函数：

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();
        }
    }

以下是surveySurver代码：

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...";
    }

为了更好地衡量，这里有表单字段：

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

对
不
猫
狗
二者都

根据freedomn-m的建议，我删除了“ID=”并且我还必须更改以下代码，该代码从选中的单选按钮/复选框中提取值（即：$（“input[type=checkbox][name=optedIn]：checked”）.val（）：

---

从单选按钮中删除

id=

。ID应该是唯一的。收音机在

name=

not id上匹配，并按名称而不是id发布，但是id可能会让人困惑。谢谢，我尝试了这个，它将所有三个的值都设置为未定义。但后来我使用JQuery来提取单选按钮的值，它成功了！在下面发布答案。对不起，当您的JS解析表单时，应该仔细查看，问题在于

$（'#userName'）.val（）

-这将始终为您提供第一个匹配元素（不管它是ID），而不是所选元素。您可能已更改为

$（“#用户名：选定”）.val（）

。但该键正在使用

：selected

。

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();
            }
        }