将动态输入存储到PHP变量中

我有很多复选框，其中一个是“其他”。一旦用户检查其他，它将打开一个新的输入字段以获取更多详细信息。我需要使用POST将输入值存储在PHP变量中。下面是我所拥有的，但我似乎找不到更多关于如何做到这一点的信息，因为它更具体一点

HTML:

function dynInput(cbox) {
    if (cbox.checked) {
      document.getElementById("other").className="";
    } else {
      document.getElementById("other").className="hidden";
    }
}

<input type="checkbox" name="categories[]" value="P">Poster<br>
<input type="checkbox" name="categories[]" value="B">Brochure<br>
<input type="checkbox" name="categories[]" value="F">Flyer<br>
<input type="checkbox" name="categories[]" value="M">Mailer<br>
<input type="checkbox" name="categories[]" value="N">Newsletter<br>
<input type="checkbox" name="categories[]" value="G">Program<br>
<input type="checkbox" name="categories[]" value="V">Invitations<br>
<input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
<div class="hidden" id="other">
  Explain: <input type="text" name="other_category"/>
</div>

<!--Including JQUERY library through google api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form type="POST" action="yourfile.php">
    <table>
        <tr>
            <td>Categories?</td>
            <td>
                <input type="checkbox" name="categories[]" value="P">Poster<br>
                <input type="checkbox" name="categories[]" value="B">Brochure<br>
                <input type="checkbox" name="categories[]" value="F">Flyer<br>
                <input type="checkbox" name="categories[]" value="M">Mailer<br>
                <input type="checkbox" name="categories[]" value="N">Newsletter<br>
                <input type="checkbox" name="categories[]" value="G">Program<br>
                <input type="checkbox" name="categories[]" value="V">Invitations<br>
                <input class="other_category" type="checkbox" name="categories[]" value="O">Other<br>
                <p id="insertinputs" style="display:none;">
                    <input type="text" name="categories[other]" value="">
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
$(function() {
    // On click event for Other Checkbox 'other_category' by using '#' selector
    $( "#other_category" ).click(function() {

        // Checking if Other Checkbox is checked or not
        if($(this).is(":checked")){
            // Showing 'insertinputs' div
            $("#insertinputs").show();
        }else{
            // So, if the clicked checkbox isn't 'Other' we are hiding the div
            $("#insertinputs").hide();
        }

        // making input field value empty on click of Other checkbox
        $("#insertinputs input").val('');

    });
});

</script>

<?php
// yourfile.php
if( !empty($_POST['categories']) ){
    echo "<pre>";
    print_r($_POST['categories']);
    exit;
}
?>

类别？
海报

小册子

传单

梅勒

时事通讯

节目

邀请

其他

我认为您需要的是创建一个字段，给它一个名称，然后隐藏它，每次用户单击“其他”时显示它，然后当您提交表单时，该字段将作为post发送，就像

类别[]

一样，但具有给定的名称（在我的示例中为

其他类别

）：

JS:

function dynInput(cbox) {
    if (cbox.checked) {
      document.getElementById("other").className="";
    } else {
      document.getElementById("other").className="hidden";
    }
}

<input type="checkbox" name="categories[]" value="P">Poster<br>
<input type="checkbox" name="categories[]" value="B">Brochure<br>
<input type="checkbox" name="categories[]" value="F">Flyer<br>
<input type="checkbox" name="categories[]" value="M">Mailer<br>
<input type="checkbox" name="categories[]" value="N">Newsletter<br>
<input type="checkbox" name="categories[]" value="G">Program<br>
<input type="checkbox" name="categories[]" value="V">Invitations<br>
<input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
<div class="hidden" id="other">
  Explain: <input type="text" name="other_category"/>
</div>

<!--Including JQUERY library through google api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form type="POST" action="yourfile.php">
    <table>
        <tr>
            <td>Categories?</td>
            <td>
                <input type="checkbox" name="categories[]" value="P">Poster<br>
                <input type="checkbox" name="categories[]" value="B">Brochure<br>
                <input type="checkbox" name="categories[]" value="F">Flyer<br>
                <input type="checkbox" name="categories[]" value="M">Mailer<br>
                <input type="checkbox" name="categories[]" value="N">Newsletter<br>
                <input type="checkbox" name="categories[]" value="G">Program<br>
                <input type="checkbox" name="categories[]" value="V">Invitations<br>
                <input class="other_category" type="checkbox" name="categories[]" value="O">Other<br>
                <p id="insertinputs" style="display:none;">
                    <input type="text" name="categories[other]" value="">
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
$(function() {
    // On click event for Other Checkbox 'other_category' by using '#' selector
    $( "#other_category" ).click(function() {

        // Checking if Other Checkbox is checked or not
        if($(this).is(":checked")){
            // Showing 'insertinputs' div
            $("#insertinputs").show();
        }else{
            // So, if the clicked checkbox isn't 'Other' we are hiding the div
            $("#insertinputs").hide();
        }

        // making input field value empty on click of Other checkbox
        $("#insertinputs input").val('');

    });
});

</script>

<?php
// yourfile.php
if( !empty($_POST['categories']) ){
    echo "<pre>";
    print_r($_POST['categories']);
    exit;
}
?>

CSS:（用于避免内联样式）

HTML:

function dynInput(cbox) {
    if (cbox.checked) {
      document.getElementById("other").className="";
    } else {
      document.getElementById("other").className="hidden";
    }
}

<input type="checkbox" name="categories[]" value="P">Poster<br>
<input type="checkbox" name="categories[]" value="B">Brochure<br>
<input type="checkbox" name="categories[]" value="F">Flyer<br>
<input type="checkbox" name="categories[]" value="M">Mailer<br>
<input type="checkbox" name="categories[]" value="N">Newsletter<br>
<input type="checkbox" name="categories[]" value="G">Program<br>
<input type="checkbox" name="categories[]" value="V">Invitations<br>
<input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
<div class="hidden" id="other">
  Explain: <input type="text" name="other_category"/>
</div>

<!--Including JQUERY library through google api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form type="POST" action="yourfile.php">
    <table>
        <tr>
            <td>Categories?</td>
            <td>
                <input type="checkbox" name="categories[]" value="P">Poster<br>
                <input type="checkbox" name="categories[]" value="B">Brochure<br>
                <input type="checkbox" name="categories[]" value="F">Flyer<br>
                <input type="checkbox" name="categories[]" value="M">Mailer<br>
                <input type="checkbox" name="categories[]" value="N">Newsletter<br>
                <input type="checkbox" name="categories[]" value="G">Program<br>
                <input type="checkbox" name="categories[]" value="V">Invitations<br>
                <input class="other_category" type="checkbox" name="categories[]" value="O">Other<br>
                <p id="insertinputs" style="display:none;">
                    <input type="text" name="categories[other]" value="">
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
$(function() {
    // On click event for Other Checkbox 'other_category' by using '#' selector
    $( "#other_category" ).click(function() {

        // Checking if Other Checkbox is checked or not
        if($(this).is(":checked")){
            // Showing 'insertinputs' div
            $("#insertinputs").show();
        }else{
            // So, if the clicked checkbox isn't 'Other' we are hiding the div
            $("#insertinputs").hide();
        }

        // making input field value empty on click of Other checkbox
        $("#insertinputs input").val('');

    });
});

</script>

<?php
// yourfile.php
if( !empty($_POST['categories']) ){
    echo "<pre>";
    print_r($_POST['categories']);
    exit;
}
?>

---

希望这能有所帮助。

如果我错了，请不要咬我，但是如果您希望在用户勾选选项时动态显示一个额外的表单，也许您可以这样做

    <input type="checkbox" name="categories[]" value="V">Invitations<br>
    <input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
    <input type="text" id="others" style="display: none;" name="other" placeholder="Please specify"></input>
    <p id="insertinputs"></p>

邀请

其他

还有JS

<script type="text/javascript">
function dynInput(cbox) {
    if (cbox.checked) {
        document.getElementById("others").style.display = "initial";
    } else {
        document.getElementById("others").style.display = "none";
    }
}
</script>

功能输出（cbox）{
如果（cbox.checked）{
document.getElementById（“其他”）.style.display=“初始”；
}否则{
document.getElementById（“其他”）.style.display=“无”；
}
}

---

然后，您可以处理额外的

$\u POST['others']

服务器端

我使用Jquery创建了一个代码。这可能对你有帮助

<script>
    $("#dynInput").on("click", function(){
        if($(this).prop( "checked" ))
        $('#insertinputs').html('<input type="text" name="FieldName" >');
        else
            $('#insertinputs').html('');
    });
</script>

$（“#dynInput”）。在（“单击”，函数（）{
如果（$（this）.prop（“选中”））
$（'#insertinputs'）.html（''）；
其他的
$（'#insertinputs'）.html（''）；
});

这是一个PHP解决方案，不需要修改JS：

<?php
    $categories = $_POST['categories'];

    // check the existence of the "other_field" variable,
    // if it not exists, assign a default value (an empty string in our case).
    $other_field = isset($_POST['other_field']) ? $_POST['other_field'] : '';
?>

因为OP在问题中没有标记。但我给出了一些JQuery解决方案，它可能会帮助OP或其他人

HTML:

function dynInput(cbox) {
    if (cbox.checked) {
      document.getElementById("other").className="";
    } else {
      document.getElementById("other").className="hidden";
    }
}

<input type="checkbox" name="categories[]" value="P">Poster<br>
<input type="checkbox" name="categories[]" value="B">Brochure<br>
<input type="checkbox" name="categories[]" value="F">Flyer<br>
<input type="checkbox" name="categories[]" value="M">Mailer<br>
<input type="checkbox" name="categories[]" value="N">Newsletter<br>
<input type="checkbox" name="categories[]" value="G">Program<br>
<input type="checkbox" name="categories[]" value="V">Invitations<br>
<input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
<div class="hidden" id="other">
  Explain: <input type="text" name="other_category"/>
</div>

<!--Including JQUERY library through google api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form type="POST" action="yourfile.php">
    <table>
        <tr>
            <td>Categories?</td>
            <td>
                <input type="checkbox" name="categories[]" value="P">Poster<br>
                <input type="checkbox" name="categories[]" value="B">Brochure<br>
                <input type="checkbox" name="categories[]" value="F">Flyer<br>
                <input type="checkbox" name="categories[]" value="M">Mailer<br>
                <input type="checkbox" name="categories[]" value="N">Newsletter<br>
                <input type="checkbox" name="categories[]" value="G">Program<br>
                <input type="checkbox" name="categories[]" value="V">Invitations<br>
                <input class="other_category" type="checkbox" name="categories[]" value="O">Other<br>
                <p id="insertinputs" style="display:none;">
                    <input type="text" name="categories[other]" value="">
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
$(function() {
    // On click event for Other Checkbox 'other_category' by using '#' selector
    $( "#other_category" ).click(function() {

        // Checking if Other Checkbox is checked or not
        if($(this).is(":checked")){
            // Showing 'insertinputs' div
            $("#insertinputs").show();
        }else{
            // So, if the clicked checkbox isn't 'Other' we are hiding the div
            $("#insertinputs").hide();
        }

        // making input field value empty on click of Other checkbox
        $("#insertinputs input").val('');

    });
});

</script>

<?php
// yourfile.php
if( !empty($_POST['categories']) ){
    echo "<pre>";
    print_r($_POST['categories']);
    exit;
}
?>

类别？
海报

小册子

传单

梅勒

时事通讯

节目

邀请

其他



提交

Javascipt/JQuery:

function dynInput(cbox) {
    if (cbox.checked) {
      document.getElementById("other").className="";
    } else {
      document.getElementById("other").className="hidden";
    }
}

<input type="checkbox" name="categories[]" value="P">Poster<br>
<input type="checkbox" name="categories[]" value="B">Brochure<br>
<input type="checkbox" name="categories[]" value="F">Flyer<br>
<input type="checkbox" name="categories[]" value="M">Mailer<br>
<input type="checkbox" name="categories[]" value="N">Newsletter<br>
<input type="checkbox" name="categories[]" value="G">Program<br>
<input type="checkbox" name="categories[]" value="V">Invitations<br>
<input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
<div class="hidden" id="other">
  Explain: <input type="text" name="other_category"/>
</div>

<!--Including JQUERY library through google api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form type="POST" action="yourfile.php">
    <table>
        <tr>
            <td>Categories?</td>
            <td>
                <input type="checkbox" name="categories[]" value="P">Poster<br>
                <input type="checkbox" name="categories[]" value="B">Brochure<br>
                <input type="checkbox" name="categories[]" value="F">Flyer<br>
                <input type="checkbox" name="categories[]" value="M">Mailer<br>
                <input type="checkbox" name="categories[]" value="N">Newsletter<br>
                <input type="checkbox" name="categories[]" value="G">Program<br>
                <input type="checkbox" name="categories[]" value="V">Invitations<br>
                <input class="other_category" type="checkbox" name="categories[]" value="O">Other<br>
                <p id="insertinputs" style="display:none;">
                    <input type="text" name="categories[other]" value="">
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
$(function() {
    // On click event for Other Checkbox 'other_category' by using '#' selector
    $( "#other_category" ).click(function() {

        // Checking if Other Checkbox is checked or not
        if($(this).is(":checked")){
            // Showing 'insertinputs' div
            $("#insertinputs").show();
        }else{
            // So, if the clicked checkbox isn't 'Other' we are hiding the div
            $("#insertinputs").hide();
        }

        // making input field value empty on click of Other checkbox
        $("#insertinputs input").val('');

    });
});

</script>

<?php
// yourfile.php
if( !empty($_POST['categories']) ){
    echo "<pre>";
    print_r($_POST['categories']);
    exit;
}
?>

$（函数（）{
//使用“#”选择器单击其他复选框“其他#类别”的事件
$（“#其他#类别”）。单击（函数（）{
//检查是否选中了其他复选框
如果（$（this）.is（“：checked”））{
//显示“插入输入”div
$（“#插入输入”）.show（）；
}否则{
//因此，如果单击的复选框不是'Other'，我们就隐藏了div
$（“#插入输入”）.hide（）；
}
//单击“其他”复选框时使输入字段值为空
$（“#插入输入”）.val（“”）；
});
});

PHP:

function dynInput(cbox) {
    if (cbox.checked) {
      document.getElementById("other").className="";
    } else {
      document.getElementById("other").className="hidden";
    }
}

<input type="checkbox" name="categories[]" value="P">Poster<br>
<input type="checkbox" name="categories[]" value="B">Brochure<br>
<input type="checkbox" name="categories[]" value="F">Flyer<br>
<input type="checkbox" name="categories[]" value="M">Mailer<br>
<input type="checkbox" name="categories[]" value="N">Newsletter<br>
<input type="checkbox" name="categories[]" value="G">Program<br>
<input type="checkbox" name="categories[]" value="V">Invitations<br>
<input type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
<div class="hidden" id="other">
  Explain: <input type="text" name="other_category"/>
</div>

<!--Including JQUERY library through google api-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form type="POST" action="yourfile.php">
    <table>
        <tr>
            <td>Categories?</td>
            <td>
                <input type="checkbox" name="categories[]" value="P">Poster<br>
                <input type="checkbox" name="categories[]" value="B">Brochure<br>
                <input type="checkbox" name="categories[]" value="F">Flyer<br>
                <input type="checkbox" name="categories[]" value="M">Mailer<br>
                <input type="checkbox" name="categories[]" value="N">Newsletter<br>
                <input type="checkbox" name="categories[]" value="G">Program<br>
                <input type="checkbox" name="categories[]" value="V">Invitations<br>
                <input class="other_category" type="checkbox" name="categories[]" value="O">Other<br>
                <p id="insertinputs" style="display:none;">
                    <input type="text" name="categories[other]" value="">
                </p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
$(function() {
    // On click event for Other Checkbox 'other_category' by using '#' selector
    $( "#other_category" ).click(function() {

        // Checking if Other Checkbox is checked or not
        if($(this).is(":checked")){
            // Showing 'insertinputs' div
            $("#insertinputs").show();
        }else{
            // So, if the clicked checkbox isn't 'Other' we are hiding the div
            $("#insertinputs").hide();
        }

        // making input field value empty on click of Other checkbox
        $("#insertinputs input").val('');

    });
});

</script>

<?php
// yourfile.php
if( !empty($_POST['categories']) ){
    echo "<pre>";
    print_r($_POST['categories']);
    exit;
}
?>

我不明白，是否要将表单提交到某个.php文件？或者只是想使用javascript在同一网页中显示在的选择？或者您希望以相同的方式显示动态HTML？与其动态添加输入，为什么不将其添加到HTML中，在用户选择其他输入时使用Javascript显示？加载表单时，您还可以使用js隐藏它，因此如果javascript因某种原因被禁用，则会进行故障切换。我正在尝试使用$\u POST@hmdt将它提交到某个.php文件，这正是我正在做的。这里的问题不在于Js，我只需要使用$_POST@bjelleklangDude将值存储在PHP变量中，为什么不使用JQuery？我可以在解决方案中编写一些JQuery吗？我认为他不需要修改JS，您可以检查变量“other_category”的存在并执行相同的任务。谢谢，但我需要的是PHP代码段，而不是Js或HTML@ZakariaAcharki@RicardoVigatti我认为他需要额外的代码和糟糕的实现，我提供给他简单的代码，让他以适当的方式做同样的事情。@Gela你只需要

$\u POST[“其他类别”]

谢谢，我找到了PHP部分，现在一切都正常了，这要感谢您修改过的Js@Zakaria Acharkith。无需更改javascript，因为您可以检查PHP上是否存在变量。使用isset（$_POST['other']），并在需要时指定默认值。是的，这是正确的，但我的javascript编辑不会验证变量的存在，仅在复选框选中或未选中时动态显示/隐藏额外的文本输入。