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

Question

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?

PHP runs on the server, JS runs on the client. It is impossible to directly call a function in one language from the other. — Marc B
– Marc B, Commented Aug 26, 2016 at 18:48
What are you trying to achieve with POST method? Why not pass the values and call function with button onclick()? — Ahmad Maleki
– Ahmad Maleki, Commented Aug 26, 2016 at 19:03
@AhmadM If I use onClick it would mean that if I click anywhere in the form, not just on the button and that is not good for what I'm doing. — Mike
– Mike, Commented Aug 26, 2016 at 19:05
@Mike You can use onClick only for the button, add this line of code: onclick="submitForm();" as an attribute to your button and define the function in <script> tag. You can also achieve this using jQuery with: $('#submit').click(function(){ ... }). (I assume your button's ID is submit). — Ahmad Maleki
– Ahmad Maleki, Commented Aug 26, 2016 at 19:14

Stefan Bürscher · Accepted Answer · 2016-08-26 19:48:59Z

1

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>

edited Aug 26, 2016 at 19:48

answered Aug 26, 2016 at 18:47

Stefan Bürscher

1231 gold badge1 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Mike Over a year ago

How would I do that without using a form?

Mike Over a year ago

Okay, that got the pop-up to work, but how do I now use the result either a true or a false? i don't know how to read what is returned.

Stefan Bürscher Over a year ago

What do you want to do now with your data, please be specific. Do you want to send a POST request on Admin.php ? And if you want it, please tell me with what data

Mike Over a year ago

I need to know if the user clicked ok or cancel in the confirm pop-up. Then if ok I'll be running a SQL script if cancel nothing. All of this is already on Admin.php That's the file that this code is in. It is currently looking for $_REQUEST['action'] to be set then it switches on this based on the value (in the case of this form it's "AddTable"). When the case matches "AddTable" then it runs some SQL code to add data to a table.

Stefan Bürscher Over a year ago

just when you call your js function, call she like this: if(AddTableName(tableName,yesNo)) { // now here you are if you clicked ok }

|

Mike · Accepted Answer · 2016-08-29 15:04:31Z

Here is what I ended up doing in total to get it to work.

I used what @StefanBurscher gave me and then set the returned value to a Cookie that I can check later like this:

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

Then here's the PHP/HTML that is creating the button and form:

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

And then here's the PHP that is checking for the $_REQUEST and the $_COOKIE that I've set:

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

This took much trial and error to get working and I couldn't have gotten it without the help of @StefanBurscher and the answer that he posted above. That's why his is marked as the answer and not this.

Collectives™ on Stack Overflow

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

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related