2017-12-27 15 views
0

Ich suche nach mehreren Schaltflächen in meiner PHP-Website, die verschiedene Werte basierend auf der ausgewählten Schaltfläche festlegen und dann die endgültige Schaltfläche einen Wert festlegen und dann alle diese auf die nächste PHP-Seite senden. Also hier habe ich zwei Sätze von Schaltflächen, die sich innerhalb einer Form festgelegt werden müssen:Wie verwende ich mehrere Schaltflächen in HTML, um Werte für meine Website festzulegen, und dann eine Schaltfläche, die alle Daten übermittelt?

<form id="formUploadFile" action="<?php echo $uploadHandler ?>" enctype="multipart/form-data" method="post" > 
    <p> 
     <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>"> 
    </p> 

    <p align="left"> 
     <label for="file" >First, Choose your image!</label> 
     <input type="file" name="files[]" /> 
    </p> 

    <p> 
     <h5>Would you like to use colored pencils or paint?</h5> 
     <div class="btn-group"> 
      <button class="btn btn-primary" name="ToolChoice" value="0">Colored Pencils</button> 
      <button class="btn btn-primary" name="ToolChoice" value="1">Paint</button> 
      </div> 
    </p> 
    <p class="text-center"> 
     <h5>Then, Choose your Difficulty!</h5> 
      <div class="btn-group"> 
      <button type="submit" class="btn btn-success" name="DifficultyChoice" value="0" onclick="loadingCircle()">Kids</button> 
      <button type="submit" class="btn btn-success" name="DifficultyChoice" value="1" onclick="loadingCircle()">Novice</button> 
      <button type="submit" class="btn btn-success" name="DifficultyChoice" value="2" onclick="loadingCircle()">Intermediate</button> 
      <button type="submit" class="btn btn-success" name="DifficultyChoice" value="3" onclick="loadingCircle()">Advanced</button> 
      </div> 

    </p> 

    </form> 

Ich möchte den Benutzer zuerst ihre „ToolChoice“ wählen und dann ihre „DifficultyChoice“ wählen und beide Werte gebucht haben der $ uploadHandler. wie geschrieben, jedoch nur die „DifficultyChoice wobei ich nur mit

$difficulty=$_POST['DifficultyChoice']; 
$toolChoice=$_POST['ToolChoice']; 

ich gesendet. Auf dem PHP-Ende verstehen, das ist, weil ich mich für die toolchoice nicht vorlegen, aber ich will nicht die php $ uploadHandler laufen separat für jeden dieser Werte. Vielmehr muss ich sowohl Satz und zugleich gesendet.

jede Hilfe ist willkommen!

Antwort

0

Verwenden Sie javscript für die Behandlung des Submit-Ereignisses. Das Speichern des Programmzustands kann auf verschiedene Arten erfolgen. In diesem Beispiel habe ich zwei versteckte Felder, um die Werte zu speichern:

<input type="hidden" name="DifficultyChoice" id="hiddDiff" value="-1" /> 
<input type="hidden" name="toolChoice" id="hiddTool" value="-1" /> 

Ich habe zwei Funktionen changeDifficulty und changeTools, die ein int übergeben werden und sie setzen die Werte der hidden fields auch.

Hidden fields werden verwendet, da sie eine name haben, die an die empfangende PHP-Datei übergeben wird. Sie müssen also nicht names auf jedem button verwenden. Stattdessen lassen javascript es für Sie tun mit two functions und two hidden fields:

EDIT: ich die ursprüngliche Antwort für ein funktionierendes Beispiel ersetzt, da die OP für den empfangenden Server-Seite als auch gefragt.

Das Programm besteht aus zwei PHP Dateien a_test.php und b_tesp.php und eine javascript Datei a_test.js. Sie sollten sich alle in demselben Ordner befinden, damit dieses Beispiel funktioniert.

Programmablauf:a_test.phpPOST Daten b_test.phpa_test.js mit schicken. b_test.php empfängt die Daten und versucht sie zu validieren. Wenn alles in Ordnung ist, wird das Bild hochgeladen, sonst wird eine Fehlermeldung angezeigt.Hier

ist der Code:

Datei a_test.php:

<!DOCTYPE html> 
<html> 
<head> 
<title>Title of the document</title> 
<script src="a_test.js"></script> 
</head> 

<body> 
<form id="formUploadFile" name="formUploadFile" action="b_test.php" enctype="multipart/form-data" method="post" > 

    <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_file_size ?>"> 

    <p align="left"> 
    <label for="file" >First, Choose your image!</label> 
    <input type="file" name="img_1" /> 
    </p> 

    <h5>Would you like to use colored pencils or paint?</h5> 
    <div class="btn-group"> 
     <input type="button" class="btn btn-primary" value="Colored Pencils" onclick="changeTools(0)" /> 
     <input type="button" class="btn btn-primary" value="Paint" onclick="changeTools(1)" /> 
    </div> 

    <h5>Then, Choose your Difficulty!</h5> 
    <div class="btn-group"> 
     <input type="button" class="btn btn-success" value="Kids" onclick= "changeDifficulty(0)" /> 
     <input type="button" class="btn btn-success" value="Novice" onclick="changeDifficulty(1)" /> 
     <input type="button" class="btn btn-success" value="Intermediate" onclick="changeDifficulty(2)" /> 
     <input type="button" class="btn btn-success" value="Advanced" onclick="changeDifficulty(3)" /> 
    </div> 

    <input type="hidden" name="difficultyChoice" id="hiddDiff" value="-1" /> 
    <input type="hidden" name="toolChoice" id="hiddTool" value="-1" /> 
</form> 
</body> 

</html> 

Datei a_test.js:

function changeDifficulty(number) 
{ 
    var toolChoice = parseInt(document.getElementById('hiddTool').value) 
    var difficulty = document.getElementById('hiddDiff'); 
    var form = document.getElementById('formUploadFile'); 
    difficulty.value = number; 

    // if the toolChoice is set 
    if(toolChoice != -1) 
    { 
     // Show the values, for testing purposes 
     console.log("Tools: " + toolChoice + " Difficulty: " + difficulty.value); 
     form.submit(); 
    } 
} 

function changeTools(number) 
{ 
    var difficulty = parseInt(document.getElementById('hiddDiff').value) 
    var toolChoice = document.getElementById('hiddTool'); 
    var form = document.getElementById('formUploadFile'); 
    toolChoice.value = number; 

    // If the difficulty is set 
    if(difficulty != -1) 
    { 
     console.log("Tools: " + toolChoice.value + " Difficulty: " + difficulty); 
     form.submit(); 
    } 
} 

Datei b_test.php:

<?php 

// make a function to check if `int` so you don't have to retype for each variable 
function checkIfInt($var) 
{ 
    // Here we use a fix to let `0` also be validated as `int` 
    if (filter_var($var, FILTER_VALIDATE_INT) || filter_var($var, FILTER_VALIDATE_INT) === 0) 
    { 
     return true; 
    } 
    else 
    { 
     return false; 
    } 
} 


function checkImageValidityAndUpload() 
{ 
    // Check if file was uploaded without errors 
    if($_FILES["img_1"]["error"] == 0) 
    { 
     // allowed image types 
     $allowed = array("jpg" => "image/jpg", "jpeg" => "image/jpeg", "gif" => "image/gif", "png" => "image/png"); 
     // some (incoming) file properties 
     $filename = $_FILES["img_1"]["name"]; 
     $filetype = $_FILES["img_1"]["type"]; 
     $filesize = $_FILES["img_1"]["size"]; 

     // Verify file extension (here we are comparing the file extension to the keys of $allowed array) 
     $ext = pathinfo($filename, PATHINFO_EXTENSION); 
     if(!array_key_exists($ext, $allowed)) 
     { 
      echo "Error: Please select a valid file format.<br/>"; 
      return false; 
     } 

     // Verify file size - 5MB maximum (5MB is example, you can set anything) 
     $maxsize = 5 * 1024 * 1024; 
     if($filesize > $maxsize) 
     { 
      echo "Error: File size is larger than the allowed limit.<br/>"; 
      return false; 
     } 

     // Verify MYME type of the file (here we are comparing the file MYME type to the $allowed array values) 
     if(in_array($filetype, $allowed)) 
     { 
      // Check whether file exists before uploading it (upload/ is example folder, change to your image folder) 
      if(file_exists("upload/" . $_FILES["img_1"]["name"])) 
      { 
       echo $_FILES["img_1"]["name"] . " already exists.<br/>"; 
       return false; 
      } 
      else 
      { 
       move_uploaded_file($_FILES["img_1"]["tmp_name"], "upload/" . $_FILES["img_1"]["name"]); 
       return true; 
      } 
     } 
     else 
     { 
      echo "Error: There was a problem uploading your file. Please try again.<br/>"; 
      return false; 
     } 
    } 
    else 
    { 
     echo "Error: " . $_FILES["img_1"]["error"]."<br/>"; 
     return false; 
    } 
} 



// MAIN program starts here - Check if the form was submitted 
if($_SERVER["REQUEST_METHOD"] == "POST") 
{ 
    $tools = array("Colored Pencils", "Paint"); 
    $difficulties = array("Kids", "Novice", "Intermediate", "Advanced"); 

    // check if all needed variables are set and valid, and if the image is valid and uploaded successfully 
    if(isset($_POST['difficultyChoice']) && isset($_POST['toolChoice']) && isset($_FILES['img_1']) && 
     checkIfInt($_POST['difficultyChoice']) && checkIfInt($_POST['toolChoice']) && 
     checkImageValidityAndUpload()) 
    { 
     $diff = intval($_POST['difficultyChoice']); 
     $tool = intval($_POST['toolChoice']); 
     echo 'Tools choice: '.$tools[$tool].' Difficulty choice: '.$difficulties[$diff].'<br/>'; 
     echo 'image has been uploaded successfully'; 
     // do something 
    } 
    else 
    { 
     echo 'Something went wrong. Program will not continue'; 
     die(); 
    } 
} 
else 
{ 
    echo 'There was no POST request.'; 
    die(); 
} 
?> 
+0

Ich denke, die Art, wie dies geschrieben wird, verursacht, dass die Schaltfläche auf den Wert -1 jedes Mal zurückgesetzt wird, wenn ich die andere Schaltfläche auswähle. Ich denke, das liegt daran, dass wir am Anfang jeder Funktion die Variablen durch die Element-ID setzen, und der einzige Bereich, in dem die Element-IDs sind, sind Werte, die auf -1 gesetzt werden? Was ist die Methode, um den Wert dieser Schaltflächen von der PHP-Site zu erhalten? – clutch1020

+0

@ clutch1020 Ok, ich werde jetzt ein funktionierendes Beispiel einer Beispieldatei 'a_test.php' hochladen (ich habe es gerade getestet), die das Bild, Schwierigkeitsgrad und toolChoice in eine Datei namens' b_test.php' übertragen wird. Die Datei 'a_test.php' verwendet eine Javascript-Datei' a_test.js'. Legen Sie alle diese Dateien in den gleichen Ordner. Lesen Sie die Kommentare, die ich in 'b_test.php' hinterlassen habe, um zu verstehen, wie das Programm auf der Empfängerseite funktioniert. Setzen Sie Ihren 'Upload-Ordner' auf einen vorhandenen Ordner, da das Programm nicht prüft, ob der Ordner existiert. – Ivan86

+0

@ Kupplung1020 Ok. Ich habe bearbeitet. Kopieren Sie einfach den Code in neue Dateien und geben Sie ihm die Dateinamen, die ich zur Verfügung gestellt habe, damit er funktioniert. Die Menge an Code auf der Serverseite ('b_test.php') wird benötigt, da das Hochladen eines Images ein großes Sicherheitsrisiko darstellt und ordnungsgemäß überprüft werden sollte. – Ivan86

0

Sie wollen würde, JavaScript verwenden und das Onclick-Attribut in Das würde den Wert der Schaltfläche ändern, so wie es sein muss, um zu überprüfen, ob sie aktiv ist, wenn die ganze Sache an die eigentliche PHP-Seite übergeben wird Tonnen mit denselben Namensattributen werden niemals funktionieren. Sie sollten stattdessen jedem ein anderes Namensattribut geben und JavaScript verwenden, um den Wert beim Klicken auf "aktiv" zu ändern und dann alle verschiedenen gesendeten $ _POST-Dateien zu überprüfen. So nennen Sie zum Beispiel die erste Schwierigkeit "Schwierigkeit1", if ($_POST['Difficulty1'] === 'active') { // They chose this difficulty }

+0

Eigentlich kratzen Sie das, falsch gelesen, was Sie brauchten. Sie möchten also, dass die anderen Schaltflächen für "DifficultyChoice" anders sind, aber anstatt die Werte so zu ändern, wie sie jetzt sind, ändern Sie sie in das, was der Benutzer mit ToolChoice mithilfe von JavaScript auswählt. Dann wird der Wert aller Schwierigkeitsgrade Ihre Werkzeugwahl sein, die Sie benötigen. –

Verwandte Themen