Mike Mike - 3 months ago 9
HTML Question

Passing 2 values to a js function from an HTML form using $_POST

I have a form that I want to use to pass 2 values to a JS function using

$_POST
. I've tried doing just one at at time and it kind of worked, sometimes it would pass the value and sometimes it would be empty. I have two
select
in the form and I want to pass what is selected to the function. Here's what I've got:

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


and here's the function:

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


I know that the values get passed to
$_POST
when I click yes in the
confirm
pop-up, but I don't know that it always gets passed to
$_POST
before being sent to the function

EDIT

I've tried removing the
onsubmit
from the form and instead using

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


This results in my page going blank. So I don't know what if anything is being returned. What am I doing wrong?

Answer

This can not working onSubmit, because PHP is a server side programming language (back-end) and he need to execute the code when he arrive to the action path ('Admin.php' in your case). Try to call this function on the Admin.php file when you get a POST request.

You can call this function with js variable in your case. So, you need to get the selected value of your <select> tags with js on button click, so you dont need a <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>