Question

我有一堆复选框，其中一个是“其他”。用户检查其他内容后，会打开一个新的输入字段以获取更多详细信息。我需要使用POST将输入值存储在PHP变量中。以下是我所拥有的内容，但我似乎无法找到有关如何执行此操作的更多信息，因为它更具体一些。

HTML：

        <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 type="checkbox" name="categories[]" value="O" onclick="dynInput(this);">Other<br>
    <p id="insertinputs"></p>
</td>

JS：

 function dynInput(cbox) {
  if (cbox.checked) {
    var input = document.createElement("input");
    input.type = "text";
    var div = document.createElement("div");
    div.id = cbox.name;
    div.innerHTML = "Explain: ";
    div.appendChild(input);
    document.getElementById("insertinputs").appendChild(div);
  } else {
    document.getElementById(cbox.name).remove();
  }
}

Answer 1

我认为你需要的是创建一个字段，给它一个名字，然后隐藏它，每次用户点击其他节目时，然后当你提交表单时，字段将像{{1}一样发送到帖子但是使用给定的名称（在我的示例categories[]中）：

JS：

other_category

CSS：（仅用于避免内联样式）

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

HTML：

.hidden{
  display:none;
}

PHP：（提交后）

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

希望这有帮助。

Answer 2

如果我错了，不要咬我，但如果你想在用户勾选选项时动态显示一个额外的表格，也许你可以拥有它

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

然后，您可以处理额外的$_POST['others']服务器端！

Answer 3

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

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

Answer 4

这是一个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'] : '';
?>

Answer 5

由于OP没有在问题中标记JQuery。但是我提供了一些JQuery解决方案，它可以帮助OP或其他人。

<强> HTML：

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

<强> javascipt的/ JQuery的：

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

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

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

5 个答案: