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


Storing Dynamic Input into a PHP Variable

我有一堆复选框,其中一个是"其他"。用户选中其他后,它会打开一个新的输入字段以获取更多详细信息。我需要使用 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();
  }
}

我认为您需要的是创建一个字段,给它一个名字然后隐藏它,每次用户单击其他显示它时,然后当您提交表单时,该字段将像categories[]一样作为帖子发送,但带有给定的名称(在我的示例中other_category

):

.JS:

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

CSS :(仅用于避免内联样式)

.hidden{
  display:none;
}

.HTML:

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

PHP:(提交后)

 $_POST["other_category"]

希望这有帮助。

如果我

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

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

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

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

这是一个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。但是我正在提供一些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
  list($var1, $var2) = explode(' ', readline());
  
  // Typecasting to integers
  $var1 = (int)$var1;
  $var2 = (int)$var2;
  
  echo "The sum of " . $var1 . " and "
    . $var2 . " is " . ($var1 + $var2);
?>