Wie einfach JavaScript-Daten veröffentlichen mit HTML-Formular an PHP

Question

Ich habe dies in meinem Javascript Code:

var data = signaturePad.toDataURL('image/png'); 
document.write(data); 

die Ausgabe an, dass schleimigeren aussieht:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiAAAHFklEQVR4Xu3VsQ0AAAjDMPr/0/yQ2exdLKTsHAECBAgQCAILGxMCBAgQIHAC4gkIECBAIAkISGIzIkCAAAEB8QMECB... 

Statt document.write(data); Ich möchte um die Daten auf die eigene Seite zu posten, indem ein einfaches HTML-Formular mit einem versteckten Feld verwendet wird, das die Daten von JS enthalten kann. dann möchte ich PHP verwenden $_POST zu handhaben und die Daten in einer Variablen speichern ...

<?php 
// check for form submission... 
if(isset($_POST['send'])) { 
    // get the data 
    $data = $_POST['data']; 
} 
?> 

HTML-Formular:

<form method="post"> 
    <input type="hidden" name="data" value=""> 
    <input type="submit" name="send" value="submit"> 
</form> 

Ich verstehe, dass ich es irgendwie mit AJAX tun kann, aber ich couldn nicht mit dem Formular herausfinden, wie soll ich das schaffen?

Ich denke, dass ich nach 2 Lösungen suche - zuerst, wie man das Formular mit JS benutzt, um die Daten im versteckten Feld zu speichern, und vielleicht, wie es über AJAX zu PHP gepostet werden kann, wenn es nicht sein kann gerade geschrieben auf die gleiche Seite ...

Answer 1

Es gibt viele Möglichkeiten, dies zu erreichen. In Bezug auf die Art, wie Sie fragen, mit einem versteckten Formelement.

<form method="post" name="myform" method="post" action="script.php"> 
    <input type="hidden" name="data" value=""> 
    <input type="submit" name="send" value="submit"> 
</form> 

Javascript:

Ihre Form ändern

var data = signaturePad.toDataURL('image/png'); 
document.myform.data.value = data; 
document.forms["myform"].submit(); 

Oder JQuery:

var data = signaturePad.toDataURL('image/png'); 
$('form input[name="data"]').val(data); 
$("form").submit(); 

Answer 2

Verwendung wie diese

<?php 
$data="<script>signaturePad.toDataURL('image/png')</script>"; 
?> 
<form method="post"> 
<input type="hidden" name="data" value="<?php echo $data; ?>"> 
<input type="submit" name="send" value="submit"> 
</form> 

arbeitet die ganze Zeit.