Variable von JS an PHP übergeben

Nubba

Grünschnabel
Hi,

ich möchte einen Gif-Countdown-Timer erstellen bei dem ich die Schriftfarbe einstellen kann.

Für den Timer gibt es das hier auf Github: Omgitsonlyalex/EmailCountdown
Das Funktioniert soweit.

Nun habe ich per JS eine HTML-Datei mit dem ColorPicker-Plugin erstellt, war meiner Meinung nach das einfachste für diesen Fall.

Code:
<script src="jscolor.js"></script>

<table>
    <tr>
        <td><button class="jscolor {valueElement:'chosen-value1', onFineChange:'setTextColor(this)'}">Schriftfarbe auswählen</button></td>
    </tr>
    <tr>
        <td><input id="chosen-value1" value="000000"></td>
    </tr>
</table>

<script>function setTextColor(picker) {document.getElementsByTagName('body')[0].style.color = '#' + picker.toString()}</script>



<table bgcolor="#000000">
    <tr>
        <td align="center" width="311" height="120px" background="countdown.png" style="background-image:inherit; font-family:'Arial Black', Gadget, sans-serif;">asdf</td>
    </tr>
</table>




</body>
</html>

Meine Frage ist nun wie ich diese Variable in die gif.php bekomme, ich habe von PHP keine Ahnung.
Ich hab das so probiert aber ohne Erfolg:

HTML-Datei:
var color = chosen-value1
var request = new XMLHttpRequest();
request.open("POST", "gif.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(color);

Gif.php-Datei wo man die Farbe einstellen kann.
<?php
$color = $_POST["color"];

?>

Jemand eine Idee?
Es erscheint schon ein Syntax-Error in der folgenden Zeile:

'color' = $_POST["color"], // RGB Colour of the text
 
Entweder machst es via AJAX oder du musst dann die gif.php anpassen :)
Wobei Ich dir zu AJAX rate :)

Hier mal ein Beispiel mit jQuery. :)

Javascript:
$.ajax({
    url: 'gif.php',
    type: 'POST',
    data: { farbe: $('input[id="color"]').val() },
    beforeSend: function(data) {
        console.log([data]);
    },
    success: function(data) {
        console.log([data]);
    },
    error: function(xhr, status, errtxt) {
        console.log([xhr], [status], [errtxt]);
    }
});
 
Vielen Dank für deine Antwort.

Wo genau muss das jetzt aber hin? In die HTML oder in die Php-Datei? Mit der HTML hab ich das gerade probiert aber funktioniert leider nicht.

Code:
<script>
$.ajax({
    url: 'gif.php',
    type: 'POST',
    data: { farbe: $('input[id="color"]').val() },
    beforeSend: function(data) {
        console.log([data]);
    },
    success: function(data) {
        console.log([data]);
    },
    error: function(xhr, status, errtxt) {
        console.log([xhr], [status], [errtxt]);
    }
});
</script>

Wie genau komme ich dann auf die gif.php? Muss ich da weiterleiten per href?
Getestet hab ich das jetzt mit XAMP
 
Ein Ansatzpunkt war jetzt im Test das der Hexwert der Farbe selektiert wird, das gif.php dies aber in rgb braucht. Demnach habe ich das umgestellt:

HTML-Datei:
Code:
<script type="text/javascript" src="jquery.js"></script>
<script src="jscolor.js"></script>

<div style="position:relative; left:280px; top:10px;">
    toHEXString = <span id="hex-str"></span><br />
    toRGBString = <span id="rgb-str"></span><br />
    R, G, B = <span id="rgb"></span><br />
 
</div>

<input class="jscolor {onFineChange:'update(this)'}" id="rgbfull" value="ffcc00">

<script>
function update(picker) {
    document.getElementById('hex-str').innerHTML = picker.toHEXString();
    document.getElementById('rgb-str').innerHTML = picker.toRGBString();

    document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);
    var rgbfull = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);
   


}
</script>

<script>
$.ajax({
    url: 'gif.php',
    type: 'POST',
    data: { farbe: $('input[id="rgbfull"]').val() },
    beforeSend: function(data) {
        console.log([data]);
    },
    success: function(data) {
        console.log([data]);
    },
    error: function(xhr, status, errtxt) {
        console.log([xhr], [status], [errtxt]);
    }
</script>

<iframe src="gif.php?time=today-11:30"/>

gif.php (Auszug aus problematischer Stelle):
Code:
$font = array(
    
        'color' => imagecolorallocate($image, $_GET["rgbfull"]), // RGB Colour of the text
    );
 
Zuletzt bearbeitet:
Eine Weiterleitung ist nicht notwendig :)

Denn mit $.ajax();
Und dem Paramenter URL sagst Du ihm ja was passieren soll.
Mit Type gibst Du an ob es per POST oder GET übergeben werden soll.
beforeSend kannst Du verwenden um vorab zu Prüfen was passieren soll
success, sagt der Name schon ,passiert wenn er Daten gefunden hat, ob nun nur ein Leerer String oder Array.
error ist der error-handler

Wichtig ist, dass Du jQuery eingebunden hast, sonst funktioniert es nicht. :)

Zudem heisst es dann nicht $_GET['rgbfull'] sondern wenn dann $_GET['farbe'].
Da es aber im aktuellen Beispiel per POST kommt, kannst Du $_REQUEST nutzen :)
 
Vielen Dank für deine Hilfe, ich stehe hier echt auf dem Schlauch. Jquery hab ich drin.

Da das imagecolorallocate 4 Werte erwartet und nur 2 geliefert wurden (Image und rgbfull) habe ich das rgbfull auf die 3 Werte separiert. Deinen Ajax-Aufruf habe ich dann 3x (?, richtig so?) drin.
Ich bekomme als Fehlermeldung jeweils "undefined index" (farber, farbeg, farbeb) für die gif.php.
Ich nehme an das es lediglich ein Syntaxfehler ist, ich kanns aber nicht nachvollziehen.

Hier der Code vom HTML:
HTML:
<script type="text/javascript" src="jquery.js"></script>
<script src="jscolor.js"></script>
<table><tr><td>

    toHEXString = <span id="hex-str"></span><br />
    toRGBString = <span id="rgb-str"></span><br />
    R, G, B = <span id="rgb"></span><br />
</td></tr>
</table>
<table><tr><td>
<input class="jscolor {onFineChange:'update(this)'}" id="rgbfull" value="ffcc00">


<script>
function update(picker) {
    document.getElementById('hex-str').innerHTML = picker.toHEXString();
    document.getElementById('rgb-str').innerHTML = picker.toRGBString();
    document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);
    var rgbr = Math.round(picker.rgb[0]);
    var rgbg = Math.round(picker.rgb[1]);
    var rgbb = Math.round(picker.rgb[2]);
    document.getElementById("rgbr").innerHTML = rgbr;
    document.getElementById("rgbg").innerHTML = rgbg;
    document.getElementById("rgbb").innerHTML = rgbb;
}
</script>


<table><tr><td>
<p id="rgbr"></p>
<p id="rgbg"></p>
<p id="rgbb"></p>
</td></tr></table>
<script>$.ajax({url: 'gif.php', type: 'POST', data: { farber: $('input[id="rgbr"]').val() }, beforeSend: function(data) {console.log([data]);}, success: function(data) {console.log([data]);},error: function(xhr, status, errtxt) {console.log([xhr], [status], [errtxt]);}});</script>
<script>$.ajax({url: 'gif.php', type: 'POST', data: { farbeg: $('input[id="rgbg"]').val() }, beforeSend: function(data) {console.log([data]);}, success: function(data) {console.log([data]);},error: function(xhr, status, errtxt) {console.log([xhr], [status], [errtxt]);}});</script>
<script>$.ajax({url: 'gif.php', type: 'POST', data: { farbeb: $('input[id="rgbb"]').val() }, beforeSend: function(data) {console.log([data]);}, success: function(data) {console.log([data]);},error: function(xhr, status, errtxt) {console.log([xhr], [status], [errtxt]);}});</script>


<!--<iframe src="gif.php?time=-11:30"/>-->

<table><tr><td><img src="gif.php?time=2019-03-12" /></td></tr></table>

und hier die Stelle aus dem gif.php:
Code:
$font = array(
        'color' => imagecolorallocate($image, $_REQUEST['farber'], $_REQUEST['farbeg'], $_REQUEST['farbeb'] ), // RGB Colour of the text
    );

Ich habs mit deinem $-REQUEST probiert wie auch mit POST, funktioniert beides leider nicht. :-(
Müsste der AJAX-Aufruf nicht auch in die funktion update(picker) mit rein? Hab ich auch probiert, ging ebenfalls nicht.
 
Zuletzt bearbeitet:
Dazu musst du keine 3 Anfragen via AJAX machen, da dir das so nichts bringt.

Hier:
Javascript:
$.ajax({
    url: 'gif.php',
    type: 'POST',
    data: { farbeR: $('input[id="rgbr"]').val(), farbeG: $('input[id="rgbg"]').val(), farbeB: $('input[id="rgbb"]').val() },
    beforeSend: function(data) {
        console.log([data]);
    },
    success: function(data) {
        console.log([data]);
    },
    error: function(xhr, status, errtxt) {
        console.log([xhr], [status], [errtxt]);
    }
});

Deine Abfrage oben würde erst nur farber, dann farbeg und dann farbeb übermitteln.
Das bedeutet du hast immer nur einen WERT :)

Da du aber 3 Werte willst/brauchst, müssen die Werte auch in einer AJAX-Abfrage mit rein. :)
 
Ich habe deinen Code jetzt 1zu1 so verwendet und in der gif.php folgendes stehen:
Code:
$font = array(
        'color' => imagecolorallocate($image, $_REQUEST['farbeR'], $_REQUEST['farbeG'], $_REQUEST['farbeB'] ), // RGB Colour of the text
    );

Ich bekomme immer noch die Fehlermeldung mit dem undefined Index für die 3 Werte.
Muss ich das noch irgendwie anders deklarieren? Weil wenn ich statt den $_REQUEST dafür 3 Zahlen eintrage funktionierts, halt ohne die Farbe aber zumindest krieg ich was zurück.
 
Dann bekommst du die Werte nicht :)
Debugge mal und lass dir mittels print_r request und Post aus geben und schau was du an werte bekommst, falls Werte kommen :)

Haben deine HTML Felder denn auch Werte?
 
Danke für deine Mühe und vor allem Geduld. Ich habe mit Php 0 Erfahrung. JS ist ok.

In der HTML-Datei bekomme ich alle 3 Farbwerte korrekt ausgegeben. (id=rgbr, rgbg, rgbb)
Da ich den syntax nicht kenne den du im Sinn hast habe ich folgendes probiert und in die HTML-Datei eingebaut aber ohne Erfolg.

Code:
<?php
function console_log( $('input[id="rgbr"]').val(), farbeG: $('input[id="rgbg"]').val(), farbeB: $('input[id="rgbb"]').val() ){
  echo '<script>';
  echo 'console.log('. json_encode( $data ) .')';
  echo '</script>';
}

?>

also bei mir scheiterts schon am debuggen, Ich hab vorher einfach die Entwicklerwerkzeuge von Chrome genommen, von da habe ich auch die Infos mit den undefined index.
 
Zurück