2017-03-28 34 views
0

我有一個應用程序,我試圖讓單選按鈕和複選框將信息輸入到數據庫中。目前,只有文本字段能夠正確輸入數據庫中的信息,但複選框和單選按鈕僅將第一個單選按鈕的值輸入到數據庫中。因此,例如使用單選按鈕,即使選擇了「否」,「是」也會被輸入到數據庫中。我不確定我做錯了什麼。單選按鈕/複選框沒有使用AJAX輸入到MySQL數據庫中

下面是相關的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._%+-][email protected]([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"/> 
+3

從無線電卸下'ID ='鈕釦。 ID應該是唯一的。無線電的'name ='not id匹配,並且按名稱發佈,而不是id,但是id可能會令人困惑。 –

+0

謝謝,我嘗試了這一點,它將這三個值設置爲undefined。但後來我用JQuery來拉取單選按鈕的值,它工作!在下面發佈答案。 – Hennessey

+0

對不起,應該看起來更接近於你解析表單的JS,問題是用'$('#userName').val()' - 這總是會給你第一個匹配的元素(不管它是否是ID) ,而不是* selected *元素。你可能已經改成'$(「#userName:selected」).val()'。但關鍵是使用':selected'。 –

回答

0

我刪除了「ID =」根據freedomn-m的建議,我也不得不圍繞下面的代碼來改變val從所檢查的單選按鈕的UE /複選框(即:$( 「輸入[類型=複選框] [名稱= optedIn]:檢查」).VAL()):

function saveUser() 
    { 
     $('.wrapper').find("#userEmail").blur(); 
      if (($('#userName').val().length > 0) && ($('#userEmail').val().length > 0)) 
      { 
       var testEmail = /^[A-Z0-9._%+-][email protected]([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(); 
      } 
     } 
相關問題