2017-03-08 1 views
0

Ich habe ein Formular mit Datei-Upload. Ich möchte zu zwei Aufgaben durchführen: Eins ist Daten an die Datenbank senden und Datei hochladen durch Ajax und nach Ajax erfolgreich wird ein anderes Formular bilden action.ajax funktionieren ordnungsgemäß, aber nach Ajax erfolgreich Formular Aktion funktioniert nicht Bitte helfenFormular Aktion funktioniert nicht nach Ajax erfolgreich

main.php

<!doctype html> 
<html> 
    <head> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

     <script type="text/javascript"> 
      function mycall() { 

       //disable the default form submission 
       event.preventDefault(); 

       //grab all form data 
       var formData = new FormData(document.getElementById('data')); 

       $.ajax({ 
        url: 'addToMySQL.php', 
        type: 'POST', 
        data: formData, 
        async: false, 
        cache: false, 
        contentType: false, 
        processData: false, 
        success: function (returndata) { 
         alert(returndata); 
        } 
       }); 

       return false; 
      } 
     </script> 
    </head> 
    <body> 
     <form method='post' enctype="multipart/form-data" id="data" action="try.php" > 
      <div class="form-input"> 
       <label for="exampleSelect1" class="col-md-3 control-label">Type of Paper</label> 
       <div class="col-md-9"> 
        <select class="form-control" id="Otop" name="Otop" required> 
         <option value="1">1</option> 
         <option value="2">2</option> 
         <option value="3">3</option> 
         <option value="4">4</option> 
         <option value="5">5</option> 
        </select> 
       </div> 
      </div> 

      <div class="col-md-12"> 
       <div class="form-input"> 
        <label for="exampleSelect1" class="col-md-3 control-label">Paper upload</label> 
        <div class="col-md-9"> 
         <input type="file" id="file" name="profileImg" > 
        </div> 
       </div> 
      </div> 
      <div class="form-input"> 
       <div class="col-sm-12"> 
        <input type="submit" class="btn btn-primary btn-lg btn-block" onclick="mycall()" name="OrderSubmit" value="Order"> 
       </div> 
      </div> 
     </form> 
    </body> 
</html> 

addToMySQL.php

<?php 
ini_set('display_errors', 1); 
ini_set('display_startup_errors', 1); 
error_reporting(E_ALL); 
include("dbconfig.php"); 
include('class/userClass.php'); 

$userClass = new userClass(); 

$Otop   = $_POST['Otop']; 
$Odiscipline = $_FILES['profileImg']['name']; 

$target   = "uploads/";  
$fileTarget  = $target.$Odiscipline; 

$result   = move_uploaded_file($_FILES['profileImg']['tmp_name'], "uploads/".$_FILES['profileImg']['name']); 

$id    = $userClass->userOrderInfo($Otop,$Odiscipline, $fileTarget); 

if ($id) { 
    echo "done"; 
} else { 
    echo "Notdone"; 
} 

userOrderInfo fuction in userClass.php

/* User Payment */ 
    public function userOrderInfo($Otop, $Odiscipline, $fileTarget) 
    { 
      try { 
       $db = getDB(); 

       $stmt = $db->prepare("INSERT INTO orderinfo(Otop, Odiscipline, fileTarget) VALUES (:Otop, :Odiscipline, :fileTarget)"); 
       $stmt->bindParam("Odiscipline", $Odiscipline) ; 
       $stmt->bindParam("Otop", $Otop) ; 
       $stmt->bindParam("fileTarget", $fileTarget) ; 
       $stmt->execute(); 
       $db = null; 

       return true; 

      } catch(PDOException $e) { 
       echo '{"error":{"text":'. $e->getMessage() .'}}'; 
      } 
    } 
+0

Was meinst du damit, dass es nicht funktioniert? Sagen Sie uns die spezifischen Details –

+0

@CamiloGo ya nach Ajax erfolgreich es nicht zu try.php gehen, die Form Aktion ist. –

+0

Ich sehe kein Element mit ID = Daten .. – scaisEdge

Antwort

0

Ok dies klar in meinem Kopf zu bekommen, was Ihr Code tut, ist dies:

  1. Das Formular wird ausgefüllt und Sie auf „Eintragen“, die von der Form Standardaktion verhindert vorgelegt. Stattdessen nimmt dies die Form Daten und sendet sie über Ajax zu addToMySQL.php
  2. addToMySQL.php kümmert sich dann um den Upload der Datei und ruft userOrderInfo() auf userClass.php
  3. userOrderInfo zurückkehren wird entweder ein (string) oder (boolean) true von denen beide PHP als true behandeln wird die Zwecke einer if() Aussage.
  4. addToMySQL.php gibt eine Antwort von (string) "done"-main.php
  5. Der Ajax-Aufruf main.php nimmt die Antwort von addToMySQL.php und löst eine Javascript-Warnung mit dem Inhalt von "done".

dem Weg Da dies geschrieben wurde, wird das Formular nie Aktionseigenschaft es verwenden und stattdessen wird nur versuchen, ständig den Inhalt des Formulars addToMySQL.php Ajax, weil Sie event.preventDefault(); verwenden.

Lösung

Eine schnelle Lösung wäre entweder ein Javascript zu der Ajax-Erfolg Methode umleiten hinzufügen oder versteckte <form> hinzufügen mit der Aktion, die Sie möchten, dass Ihre Benutzer senden zu tun und dann zu füllen und senden Sie es mit Javascript, sobald die Datei hochgeladen wurde.

Egal wie Sie sich entscheiden, es zu tun, würde ich empfehlen, addToMySQL.php zu beheben, so wird es nicht ständig "done" zurücksenden!

+0

viele viele .... danke für die Hilfe es gelöst –

+0

Keine probs @ManojMali. Bitte achten Sie darauf, die Antwort zu verbessern und akzeptieren Sie die Antwort, wenn dies geholfen hat. Es wird helfen, meinen Ruf zu stärken;) – Spholt

Verwandte Themen