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

时间:2016-08-26 18:36:54

标签: javascript php html

我有一个表单,我想用它来使用$_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;
}

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

修改

我尝试从表单中删除$Name = $_POST['TableName']; $Edit = $_POST['YesNo']; $Results = AddTableName('$Name','$Edit'); ,而不是使用

myButton

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

2 个答案:

答案 0 :(得分:1)

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

你可以在你的情况下用js变量调用这个函数。因此,您需要在点击按钮时使用js获取<select>标记的选定值,因此您不需要<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>    

答案 1 :(得分:1)

以下是我最终完成的工作。

我使用了@StefanBurscher给我的内容,然后将返回值设置为Cookie,我可以稍后检查:

document.getElementById("Addsubmit").addEventListener("click", function (event)
{
    //event.preventDefault();  //use this if you don't 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;
    var TheResult = AddTableName(tableName, yesNo);
    //alert(TheResult);
    if (TheResult == true)// AddTableName(tableName, yesNo))
    {
        createCookie("AddHeadingCookie", TheResult, 1);
        //alert("This is what happens with a ok " + TheResult);
    }
    else
    {
        createCookie("AddHeadingCookie", TheResult, 1);
        //alert("This is what happens with a cancel " + TheResult);

    }
});
function createCookie(name, value, days)
{
    var expires;
    if (days)
    {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else
    {
        expires = "";
    }
    document.cookie = escape(name) + "=" + escape(value) + expires;
    //alert(document.cookie);
}
function AddTableName(Name, Edit)
{
    var y = confirm("Do you want to add this table: " + Name + "\nWith table Editable set to: " + Edit);
    return y;
}

然后是创建按钮和表单的PHP / HTML:

<p>Add table to the Headings table</p>
<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="Addsubmit" name='submit' value='Add Table'></p>
</form>

然后在这里检查我已经设置的$_REQUEST$_COOKIE的PHP:

if(isset($_REQUEST['action']))
{
    //var_dump($_COOKIE); echo " Cookie<br>";
    if($_COOKIE['AddHeadingCookie'] == "true")
    {
        switch($_REQUEST['action'])
        {
            case 'AddTable':

这需要大量的试验和错误才能开始工作,如果没有@StefanBurscher的帮助以及他在上面发布的答案,我无法得到它。这就是为什么他被标记为答案而不是这个。