javascript - 使用 $_POST 从 HTML 表单向 js 函数传递 2 个值

Question

我有一个表单，我想用它通过 $_POST 将 2 个值传递给 JS 函数。我尝试过一次只做一个，它有点有效，有时它会传递该值，有时它会是空的。我在表单中有两个 select，我想将所选内容传递给函数。这是我得到的:

<p>Add table to the Headings table</p>
<form action='Admin.php' enctype='multipart/form-data' method='POST' onsubmit="return AddTableName('<?php $_POST['TableName']; ?>','<?php $_POST['YesNo']; ?>')">
    <input type='hidden' name='action' value='AddTable'>
    <p>
        <label><strong>Table Name:</strong>
            <select name='TableName'><?php
                foreach($TableNames as $Table)
                {
                    //var_dump($Table);?>                            
                    <option value='<?php echo $Table; ?>'><?php echo $Table; ?></option><?php
                }?>
            </select>
        </label>
    </p><p></p>
    <p>
        <label><strong>Editable:</strong> 
            <select name='YesNo'>
                <option value='No' selected='selected'>No</option>
                <option value='Yes'>Yes</option>
            </select>
        </label>
    </p><p></p>
    <p><input type='submit' name='submit' value='Add Table'></p>
</form>

这是函数:

function AddTableName(Name, Edit)
{
    var y = confirm("Do you want to add this table: " + Name + "\nWith table Editable set to: " + Edit);
    return y;
}

我知道当我在 confirm 弹出窗口中单击“yes”时，值会传递到 $_POST，但我不知道它总是会传递到$_POST 在发送到函数之前

编辑

我尝试从表单中删除 onsubmit 并改为使用

$Name = $_POST['TableName'];
$Edit = $_POST['YesNo'];
$Results = AddTableName('$Name','$Edit');

这会导致我的页面变成空白。所以我不知道如果有东西被退回怎么办。我做错了什么？

Answer 1

这不能在提交上工作，因为 PHP 是一种服务器端编程语言(后端)，他需要在到达操作路径(在您的情况下为“Admin.php”)时执行代码。当您收到 POST 请求时，尝试在 Admin.php 文件上调用此函数。

您可以根据您的情况使用 js 变量调用此函数。因此，您需要获取 <select> 的选定值单击按钮时带有 js 的标签，因此您不需要 <form> 。

<form action="Admin.php" enctype='multipart/form-data' method='POST'>
    <input type='hidden' name='action' value='AddTable'>
    <p>
        <label><strong>Table Name:</strong>
            <select id="tableName" name='TableName'><?php
                foreach($TableNames as $Table)
                {
                        //var_dump($Table);?>                            
                    <option value='<?php echo $Table; ?>'><?php echo $Table; ?></option><?php
                }?>
            </select>
        </label>
    </p><p></p>
    <p>
        <label><strong>Editable:</strong> 
            <select id="yesNo" name='YesNo'>
                <option value='No' selected='selected'>No</option>
                <option value='Yes'>Yes</option>
            </select>
        </label>
    </p><p></p>
    <p><input type='submit' id="submitBtn" name='submit' value='Add Table'></p>
</form>


<script type="text/javascript">
    function post(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

document.getElementById("submitBtn").addEventListener("click", function(event){
            event.preventDefault(); // Use this if you dont want to POST it.
            var e1 = document.getElementById("tableName");
            var tableName = e1.options[e1.selectedIndex].value;
            var e2 = document.getElementById("yesNo");
            var yesNo = e2.options[e2.selectedIndex].value;
            if(AddTableName(tableName,yesNo)) { 
                post('/test.php', {TableName: tableName ,YesNo: yesNo});
            }
        });

function AddTableName(Name, Edit)
{
    var y = confirm("Do you want to add this table: " + Name + "\nWith table Editable set to: " + Edit);
    return y;
}

</script>