0

我有两个表格紧挨着。

这里是表格一

<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也是一样，只是checkbox的ID是genderThree和genderFour，名字是genderTwo。该复选框还有另一个名称“ageCheckTwo”。

现在我想，如果所有内容都正确填写，则可以使用用户输入的参数打开一个 php.site。

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

这是该部分的 JavaScript 代码

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

可以肯定的是，这是第二种形式

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

但是，当我检查所有参数时，URL 现在是这样的：

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

虽然它应该在最后显示第二个人的性别。我究竟做错了什么？

4

4 回答 4

3

这里有简单的印刷错误：

        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 迭代它们。

于 2013-04-20T21:41:39.350 回答
2 
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;
 }
于 2013-04-20T21:41:59.240 回答
0

问题是使用了错误的变量名genderThree和genderFour

但是您可以将整个事情简化为

$('input[type="radio"][name^="gender"]:checked').each(function(){
   urlString += '&' + this.name + '=' + this.value;
});
于 2013-04-20T21:46:34.617 回答
0

我还没有完全理解你想要做什么，但是看到你的代码，我认为它可以通过使用不同的实践来优化

<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 ，您可以在 name 属性中明确声明您的名称为数组。在您的 php 脚本上，您可以使用 GET 方法获取此值以获取这些值

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

如果我了解您要实现的目标，您甚至不需要 javascript。

于 2013-04-20T21:50:51.747 回答