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，其中包含用户输入的参数。

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

这是该部分的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]

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

Answer 1

简单的印刷错误：

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

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

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

如果我理解你想要实现的目标，你甚至不需要javascript。

复选框的值是[object HTMLInputElement]

4 个答案: