Php 如何使jquery序列化忽略在隐藏和显示之间切换的div中的输入字段

我有一个表单，其中一个控件（在一个div中）的显示为none。当用户选中某个单选按钮时，将显示隐藏的div，其中包含一个允许用户输入某些输入的输入元素

当我用PHP（使用isset（）函数）测试它时，我意识到输入变量已经设置好了，即使它的父变量（id为details的div）没有显示

但是，我希望serialize只在显示包含输入字段的div时将变量发送到服务器。但是，如果我直接将none显示给输入元素，它将按我所希望的方式工作。但我希望它位于div上，因为一些控件（如标签和许多其他可能的输入字段）也需要隐藏。一个快速的解决方案是为div a类中的所有控件或元素设置一个类，并使用单选按钮切换它们的显示，但我更希望该类位于div上，将它们全部包装起来。

HTML:

<form id="form">
  <div class="form-group">
    <label for="firstname">First Name</label>
    <input type="firstname" class="form-control" name="firstname" autofocus placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="surname">Surname</label>
    <input type="surname" class="form-control" name="surname" placeholder="Surname">
  </div>

  <label>1. Do you program?: &nbsp;</label>
  <label class="radio-inline">
    <input type="radio" name="one" value="Yes"> Yes
  </label>

  <label class="radio-inline">
    <input type="radio" name="one" value="No" checked> No
  </label>

  <div class="form-group" id="details" style="display:none;">
    <label class="control-label">State your Languages</label>
    <input type="text" name="language" class="form-control" autofocus>
  </div>

  <div class="form-group">
    <button id="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

PHP

if(isset($_POST['language'])) {
  echo 'Language is set';
} else {
  echo 'Not set';
}

---

PHP报告“Language is set”，即使包含名称为Language的输入的div显示为none

禁用的输入元素被

$忽略。serialize（）

或

您可以插入没有“name”属性的输入字段：

<input type="text" id="in-between" />

---

您可以用PHP轻松地完成JavaScript中的复杂变通方法。检查是否选中了单选按钮

Yes

，如果选中，您可以基于此执行其他处理

if(isset($_POST['one']) && $_POST['one'] === 'Yes') {
    if(!empty($_POST['language'])) {
       echo $_POST['language'];
    } else {
       echo "Language is given empty!";
    }
} else {
    echo 'Language is not selected!';
}

上面的PHP代码是一个简单的解决方法。你可以这么做。如果您只想在JavaScript本身中实现这一点，那么我将引导您使用Bilal给出的答案。他有一些JavaScript的变通方法

编辑

我已经用JavaScript提出了自己的简单解决方法。希望它能帮助你

<script>
    $(function() {
        var details = $('#details');
        $('#details').remove();

        $('#form input[name=one]').click(function() {
            if(this.value === 'Yes') {
                details.insertBefore($('#form div.form-group:last-of-type'));
                details.show();
            } else {
                $('#details').remove();
            }
        });
    });
</script>

$（函数（）{
var详细信息=$（“#详细信息”）；
$（“#详细信息”）.remove（）；
$（'#表单输入[name=one]'）。单击（函数（）{
如果（this.value=='Yes'）{
details.insertBefore（$（“#form div.form-group:type的最后一个”）；
details.show（）；
}否则{
$（“#详细信息”）.remove（）；
}
});
});

在从DOM中删除

details

div之前，将对id

details

的div的引用存储在变量中

根据单选按钮中选择的值，如果选择了

No

，则

details

div将被添加到DOM中并显示或从DOM中删除

---

希望有帮助

您可以将“禁用”添加到隐藏的输入中，以防止其被提交，并在显示第一个解决方案已足够时将其删除。我认为您的第二个解决方案在我的情况下不起作用，因为我将从服务器端的输入字段获取值。（如果输入可用），如果我不将name属性附加到该字段，我怀疑它是否起作用！Yh，但我的目的是防止该变量包含在发送到服务器的查询字符串中。我已经编辑了我的答案。你可以查看一下，如果你对这个简单的解决方法感到满意，请告诉我。

<input type="text" id="in-between" />

$("form").submit(function() {

   $(this).children('#in-between').remove();

});

if(isset($_POST['one']) && $_POST['one'] === 'Yes') {
    if(!empty($_POST['language'])) {
       echo $_POST['language'];
    } else {
       echo "Language is given empty!";
    }
} else {
    echo 'Language is not selected!';
}

<script>
    $(function() {
        var details = $('#details');
        $('#details').remove();

        $('#form input[name=one]').click(function() {
            if(this.value === 'Yes') {
                details.insertBefore($('#form div.form-group:last-of-type'));
                details.show();
            } else {
                $('#details').remove();
            }
        });
    });
</script>