Javascript Variable in eine PHP Variable speichern?

totendio

Grünschnabel
Hey Leute
Ich bin ziemlich neu in dem gebiet und steh vor einem problem...
Ich will mir eine eigene Prompt box in javascript erstellen und dann den eingegebenen wert in PHP weiter verarbeiten können.

die Promt box funktioniert:
Javascript:
function CustomPrompt(){
    this.render = function(dialog,func){
        var winW = window.innerWidth;
        var winH = window.innerHeight;
        var dialogoverlay = document.getElementById('dialogoverlay');
        var dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH+"px";
        dialogbox.style.left = (winW/2) - (550 * .5)+"px";
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
        document.getElementById('dialogboxhead').innerHTML = "A value is required";
        document.getElementById('dialogboxbody').innerHTML = dialog;
        document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1">';
        document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>';
    }
    this.cancel = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
    this.ok = function(func){
        var prompt_value1 = document.getElementById('prompt_value1').value;
        window[func](prompt_value1);
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
}
var Prompt = new CustomPrompt();

function changeText(val){
    document.getElementById('status').innerHTML = val;
}
function doStuff(val){
    document.body.style.background = val;
}

diese wird im PHP file durch einen button aufgerufen:
PHP:
<div id="dialogoverlay"></div>
    <div id="dialogbox">
        <div>
            <div id="dialogboxhead"></div>
            <div id="dialogboxbody"></div>
            <div id="dialogboxfoot"></div>
        </div>
    </div>

    <fieldset>
        <legend>Prompt Box</legend>

        <h1 id="status">Default Text</h1>

        <button onclick="Prompt.render('Type some text:','changeText');">Change Text</button>
        <button onclick="Prompt.render('Type a color name:','doStuff')">Do stuff</button>
    </fieldset>
meine Idee war es mit XMLHttpRequest(); zu arbeiten das funktioniert aber nicht:
Javascript:
var data = prompt_value1;
    var xhr = new XMLHttpRequest();
    var url = "index.php";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }

    xhr.send(data);
PHP:
<?
$eingabe = $_POST[prompt_value1];
?>
mit $eingabe wollte ich dann weiter arbeiten.... was hab ich falsch gemacht? oder gibt es einen viel einfacheren weg?
ich wäre sehr froh um hilfe...vielen Dank!
 
Meine Meinung: Nicht alles, was machbar ist und was funktioniert, ist auch empfehlenswert zu machen. Dein Verfahren mit den dynamischen Funktionsnamen mag funktionieren, aber es erschwert die Lesbarkeit stark. Sicher lässt sich eine einfache Dialogbox auch übersichtlicher programmieren.

Meine Empfehlung, wenn es um Ajax geht: Die Verwendung von jQuery macht das Ganze sehr viel einfacher und übersichtlicher.
 
Zurück