複選框的值是[對象HTMLInputElement]

Question

我有兩種形式緊挨着對方。

這裏這個權利是形成一個

<form> 
    <input type="radio" id="genderOne" name="genderOne" value="Mann"><label for="genderOne">Maennlich</label> 
    <input type="radio" id="genderTwo" name="genderOne" value="Frau"><label for="genderTwo">Weiblich</label><br><br> 
    <input type="checkbox" id="ageCheck" id="ageCheck" name="ageCheck"><label for="ageCheck">Bist du ueber 18?</label> 
</form> 

表2是根本一致，區別在於複選框的ID是genderThree和genderFour和名稱是genderTwo。該複選框還有另一個名字「ageCheckTwo」。

現在我想，如果一切都正確填寫開拓php.site與用戶鍵入的參數。

一切正常，除了第二種形式，但只有性別。

這對於部分

if(document.getElementById('genderOne').checked || document.getElementById('genderTwo').checked) 
     { 
      if(document.getElementById('genderOne').checked) 
      { 
       var genderOne = $('#genderOne').val(); 
       urlString += "&genderOne=" + genderOne; 
      } 
      if(document.getElementById('genderTwo').checked) 
      { 
       var genderTwo = $('#genderTwo').val(); 
       urlString += "&genderOne=" + genderTwo; 
      } 
     } 
     if(document.getElementById('genderThree').checked || document.getElementById('genderFour').checked) 
     { 
      if(document.getElementById('genderThree').checked) 
      { 
       var genderOne = $('#genderThree').val(); 
       urlString += "&genderTwo=" + genderThree; 
      } 
      if(document.getElementById('genderFour').checked) 
      { 
       var genderTwo = $('#genderFour').val(); 
       urlString += "&genderTwo=" + genderFour; 
      } 
     } 

而只是要確定JavaScript的代碼，這是第二種形式

<form> 
        <input type="radio" id="genderThree" name="genderTwo" value="Mann"><label for="genderThree">Maennlich</label> 
        <input type="radio" id="genderFour" name="genderTwo" value="Frau"><label for="genderFour">Weiblich</label><br><br> 
        <input type="checkbox" id="ageCheckTwo" id="ageCheckTwo" name="ageCheckTwo"><label for="ageCheckTwo">Ist er/sie ueber 18?</label> 
        </form> 

但是，網址是現在，當我檢查所有參數像這樣：

http://localhost/mojoGerman/questions.php?nameOne=fdgh&nameTwo=hj&genderOne=Mann&genderTwo=[object HTMLInputElement] 

雖然它應該顯示最後第二個人的性別。我究竟做錯了什麼？

Answer 1

var genderOne = $('#genderThree').val(); // get value in genderThree here 
urlString += "&genderTwo=" + genderThree; 

試試這個 -

if(document.getElementById('genderThree').checked) { 
     var genderThree = $('#genderThree').val(); 
     urlString += "&genderTwo=" + genderThree; 
} 
if(document.getElementById('genderFour').checked) { 
     var genderFour = $('#genderFour').val(); 
     urlString += "&genderTwo=" + genderFour; 
} 

Answer 2

簡單的印刷錯誤的位置：

 if(document.getElementById('genderThree').checked) 
     { 
      var genderThree = $('#genderThree').val(); 
      urlString += "&genderThree=" + genderThree; 
     } 
     if(document.getElementById('genderFour').checked) 
     { 
      var genderFour = $('#genderFour').val(); 
      urlString += "&genderFour=" + genderFour; 
     } 

這就是爲什麼剪切和粘貼是壞主意。使自己的一個簡單的功能：

function addIfChecked(name) { 
    var val = $('#' + name).val(); 
    return val ? "&" + name + "=" + encodeURIComponent(val) : ''; 
} 

urlString += addIfChecked("genderOne") + 
    addIfChecked("genderTwo") + 
    addIfChecked("genderThree") + 
    addIfChecked("genderFour"); 

或類似的東西。更好的是，給複選框一個類，以便您可以通過選擇器找到它們並通過jQuery對它們進行迭代。

Answer 3

的問題是使用了錯誤的變量名稱爲genderThree和genderFour

但是你可以簡化整個事情

$('input[type="radio"][name^="gender"]:checked').each(function(){ 
    urlString += '&' + this.name + '=' + this.value; 
}); 

Answer 4

我有沒有完全理解你想做什麼，但看到你的代碼，我認爲它可以通過使用不同的做法

<form> 
    <input type="radio" id="genderOne" name="genderOne[]" value="Mann"><label for="genderOne">Maennlich</label> 
    <input type="radio" id="genderTwo" name="genderOne[]" value="Frau"><label for="genderTwo">Weiblich</label><br><br> 
    <input type="checkbox" id="ageCheck" id="ageCheck" name="ageCheck"><label for="ageCheck">Bist du ueber 18?</label> 
</form> 

如果你想對你的查詢字符串genderOne相同的密鑰，你可以明確地聲明您的姓名作爲名稱屬性陣列進行優化。你的PHP腳本，你可以使用GET方法來獲得這些值

//php 
echo $_GET['genderOne'][0];//returns first checked gender value 
echo $_GET['genderOne'][1];//returns 2nd checked gender value 

你甚至不需要這個的JavaScript，如果我明白你想達到什麼得到這個值。