using POST to send js variable to php from iframe

Question

I am trying to pass a variable from js to a backoffice page. So far I've tried using a form and submitting it from javascript (but that refreshes the page, which I don't want)

• I ditched the form and when for an iframe (so the page doesn't reload everytime the data is submitted). The function is run every few seconds (so the form should be submitting):

<iframe style="visibility:hidden;display:none" action="location.php" method="post" name="location" id="location">
 <script>
   /*Some other stuff*/
    var posSend = document.getElementById("location");
    posSend.value = pos;
 posSend.form.submit();
  </script>

• However my php page does not display the value posted (im not quite sure how to actually get the $_POST variable):

<?php
$postion = $_POST['location'];
echo $_POST['posSend'];
echo "this is the";
echo $position;
?>

• I also tried $.post as suggested here Using $.post to send JS variables but that didn't work either.

How do I get the $_POST variable value? I cannot use $_SESSION - as the backoffice is a different session. What is the best method to do this?

EDIT I'd rather avoid ajax and jquery

Answer 1

And i think you no need to use form or iframe for this purpose . You just want to know the user onf without refreshing then use the following method with ajax.

index.html the code in this will

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>
    navigator.geolocation.getCurrentPosition(function(position) 
    { 
        pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        $.ajax(
        {
            url:'location.php',
            type: 'POST',
            datatype: 'json',
            data: {'pos':pos},   // post to location.php
            success: function(data) {
                aler(data);
                // success
            },

            error: function(data) {
                alert("There may an error on uploading. Try again later");
            },

         });  
    });  
    </script>

location.php

echo "position :=".$_POST['pos'];

Answer 2

Instead of using iframe to submit your form with out reloading you submit form using ajax call.

$.ajax({
  type: "POST",
  url: url,
  data: $("#formId").serialize(), // This will hold the form data
  success: success, // Action to perform on success
  dataType: "JSON" or "HTML" or "TEXT" // return type of function
});

There are various alternative to submit the form without reloading the page check here

Thanks

Answer 3

You can use plugin ajaxForm. On action and method you can form options

$(function() {
            $('#form_f').ajaxForm({ 
                beforeSubmit: ShowRequest, //show request
                success:SubmitSuccesful, //success 
                error: AjaxError //error
            });
        });

Answer 4

Lakhan is right, you should try to use ajax instead of an iframe as they cause a lot of issues. If you absolutely need to use an iframe add a target attribute to your form (target the iframe not the main page) and only the iframe will reload.

<form action="action" method="post" target="target_frame">
    <!-- input elements here --> 
</form>
<iframe name="target_frame" src="" id="target_frame" width="XX" height="YY">
</iframe> 

Answer 5

Here's a fully worked example that makes use of a <form>, the FormData object and AJAX to do the submission. It will update the page every 5 seconds. Do note that in PHP, the use of single quotes ( ' ) and double quotes ( " ) is not always interchangeable. If you use single quotes, the contents are printed literally. If you use double-quotes, the content is interpretted if the string contains a variable name. Since I wanted to print the variable name along with the preceding dollar sign ($) I've used single quotes in the php file.

First, the PHP

location.php

<?php
$location = $_POST['location'];
$posSend = $_POST['posSend'];

echo '$location: ' . $location . '<br>';
echo '$posSend: ' . $posSend;
?>

Next, the HTML

index.html

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}

function myAjaxPostForm(url, formElem, successCallback, errorCallback)
{
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function()
    {
        if (this.readyState==4 && this.status==200)
            successCallback(this);
    }
    ajax.onerror = function()
    {
        console.log("AJAX request failed to: " + url);
        errorCallback(this);
    }
    ajax.open("POST", url, true);
    var formData = new FormData(formElem);
    ajax.send( formData );
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    var submitIntervalHandle = setInterval( doAjaxFormSubmit, 5000 );       // call the function to submit the form every 5 seconds
}

function doAjaxFormSubmit()
{
    myAjaxPostForm('location.php', byId('myForm'), onSubmitSuccess, onSubmitError);
    function onSubmitSuccess(ajax)
    {
        byId('ajaxResultTarget').innerHTML = ajax.responseText;
    }
    function onSubmitError(ajax)
    {
        byId('ajaxResultTarget').innerHTML = "Sorry, there was an error submitting your request";
    }
}

</script>
<style>
</style>
</head>
<body>
    <form id='myForm'>
        <input name='location'/><br>
        <input name='posSend'/><br>
    </form>

    <hr>

    <div id='ajaxResultTarget'>
    </div>
</body>
</html>