带有文本输入和文件输入的HTML表单，不使用ajax

时间：2017-08-02 09:29:12

标签： php jquery html ajax post

我有一个包含文本和文件输入的表单，并希望使用ajax执行php脚本（php脚本完美地运行而没有ajax）因为我需要提交表单没有页面刷新。我在SO上尝试了答案，但很多都没有用。我尝试了here，here和其他一些但无济于事。以下是我的代码。

表格 

<form action="genformexec.php" name="genreg" id="genreg" method="post" enctype="multipart/form-data">
    <div class="logresult"></div>
      <label class="type" for="ccode">*Your confirmation code is the series of numbers sent to your mail after payment verification</label>
      <input class="half" type="text" name="ccode" id="ccode" placeholder="Confirmation Code">
      <input class="half" type="email" name="uemail" id="uemail" placeholder="Email Address">
      <input class="half" type="text" name="fname" id="fname" placeholder="First Name">
      <input class="half" type="text" name="lname" id="lname" placeholder="Last Name">
      <input class="full" type="text" name="cname" id="cname" placeholder="Company Name">
      <input class="full" type="text" name="crcnum" id="crcnum" placeholder="Company RC/BN Number">
      <input class="full" type="text" name="uaddress" id="uaddress" placeholder="Residential Address">
      <input class="full" type="text" name="caddress" id="caddress" placeholder="Company Address">
      <textarea class="full" rows="7" name="briefdes" id="briefdes" placeholder="Brief description about your company"></textarea>
      <input class="half" type="text" name="uname" id="uname" placeholder="Username">
      <input class="half" type="text" name="uphone" id="uphone" placeholder="Phone Number">
      <input class="half" type="text" name="pword" id="pword" placeholder="Password">
      <input class="half" type="text" name="cfpword" id="cfpword" placeholder="Re-Type Password">
      <div class="profImage"><img id="logo_prev" src=""></div><br>
      <label for="profimages">Upload Company Logo/Profile Picture</label><br><br>
      <input type="file" onchange="logo_prev()" name="profimages" id="profimages">
      <div class="coverimage"><img id="cover_prev"src=""></div>
      <label for="coverimage">Upload a cover image for your profile</label><br><br>
      <input type="file" onchange="cover_prev()" name="coverimage" id="coverimage">
      <input type="file" name="profimages" id="profimages">
      <label class="type">Product/Commodity of Interest</label>
      <div class="postLimit">
      <p class="limitType">Agro Commodities</p>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cashew"> Cashew</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Charcoal"> Charcoal</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Hibiscus"> Hibiscus</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Sesame seeds"> Sesame seeds</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Kolanut"> Kolanut</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Wonderful Kola"> Wonderful Kola</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Vegetables"> Vegetables</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cocoa"> Cocoa</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Shea nut"> Shea nut</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Shea butter"> Shea butter</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Coco butter"> Coco butter</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Gum Arabic"> Gum Arabic</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cassava"> Cassava</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Rubber"> Rubber</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Ginger"> Ginger</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cotton"> Cotton</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Coconut"> Coconut</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Palm Kernel"> Palm Kernel</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Palm Oil"> Palm Oil</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Yam"> Yam</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Plantain"> Plantain</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Pepper"> Pepper</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Ground Nut"> Ground Nut</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Millet"> Millet</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Melon (Egusi)"> Melon (Egusi)</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Soybeans"> Soybeans</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Locust Beans"> Locust Beans</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cashew, Soybeans, Locust Beans, Yam, Plantain, Pepper, Ground Nut, Millet, Melon (Egusi), Cashew Nuts, Palm Oil, Cotton, Coconuts, Palm Kernel Rubber, Ginger Charcoal, Hibiscus, Sesame seeds, Kolanut, Wonderful Kola, Vegetables, Cocoa, Shea nut, Shea butter, Coco butter, Gum Arabic, Cassava">All</div>
      </div>
      <div class="postLimit">
      <p class="limitType">Solid Minerals</p>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Barite"> Barite</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Bentonite"> Bentonite</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Bismuth"> Bismuth</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Bitumen"> Bitumen</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Cassiterite"> Cassiterite</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Clay"> Clay</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Coal"> Coal</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Columbite"> Columbite</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Feldspar"> Feldspar</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Fluorite"> Fluorite</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Gemstones"> Gemstones</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Gold"> Gold</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Gypsum"> Gypsum</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Kaolin"> Kaolin</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Lead ore"> Lead ore</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Limestone"> Limestone</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Manganese"> Manganese</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Mica"> Mica</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Molybdenum"> Molybdenum</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Rutile"> Rutile</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Silver"> Silver</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Talc"> Talc</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Tantalite"> Tantalite</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Wolframite"> Wolframite</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Zinc ore"> Zinc ore</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Zircon Sand"> Zircon Sand</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Barite, Bentonite, Bismuth, Bitumen, Cassiterite, Clay, Coal, Columbite, Feldspar, Fluorite, Gemstones, Gold, Gypsum, Kaolin, Lead ore, Gemstone, Manganese, Mica, Molybdenum, Rutile, Silver, Talc, Tantalite, Wolframite, Zinc ore, Zircon Sand">All</div>
      </div>
      <div class="postLimit">
      <p class="limitType">Manufactured Products</p>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Chemical and Pharmaceuticals">Chemical and Pharmaceuticals</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Domestic and Industrial Plastics and Rubber">Domestic and Industrial Plastics and Rubber</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Basic Metal, Iron and Steel and Fabricated Metal Products">Basic Metal, Iron and Steel and Fabricated Metal Products</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Pulp, Paper and Paper Products, Printing and Publishing">Pulp, Paper and Paper Products, Printing and Publishing</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Electrical and Electronics"> Electrical and Electronics</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Textile, Wearing Apparel, Carpet, Leather/Leather Footwear">Textile, Wearing Apparel, Carpet, Leather/Leather Footwear</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Wood and Wood Products Including Furniture">Wood and Wood Products Including Furniture</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Non-Metallic Mineral Products">Non-Metallic Mineral Products</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Motor Vehicle and Miscellaneous Assembly">Motor Vehicle and Miscellaneous Assembly</div>
      <div class="checkin"><input type="checkbox" name="postValue[]" value="Chemical and Pharmaceuticals, Domestic and Industrial Plastics and Rubber, Basic Metal, Iron and Steel and Fabricated Metal Products, Pulp, Paper and Paper Products, Printing and Publishing, Electrical and Electronics, Textile, Wearing Apparel, Carpet, Leather/Leather Footwear, Wood and Wood Products Including Furniture, Non-Metallic Mineral Products, Motor Vehicle and Miscellaneous Assembly">All</div>
      </div>
      <label class="type" for="regas">You are registering as:</label>
      <input type="text" class="full readonly" readonly name="regas" id="regas" value="Exporter">
      <label class="type" for="package">Package type:</label>
      <input type="text" class="full readonly" readonly name="package" id="package" value="Bronze">
      <input type="submit" name="regSubmit" id="regSubmit" value="Submit">
  </form>

Ajax 

$('#genreg').on('submit', function (e) {
  e.preventDefault();
  var ccode = $('#ccode').val();
  var fname = $('#fname').val();
  var lname = $('#lname').val();
  var cname = $('#cname').val();
  var crnum = $('#crcnum').val();
  var uaddress = $('#uaddress').val();
  var caddress = $('#caddress').val();
  var briefdes = $('#briefdes').val();
  var uname = $('#uname').val();
  var uphone = $('#uphone').val();
  var pword = $('#pword').val();
  var cfpword = $('#cfpword').val();
  var posttype = $("input[name=postValue]").each($(this)).val();
  $.ajax({
      url: "genformexec.php",
      type: "POST",
      data:  new FormData(this),
      contentType: false,
      cache: false,
      processData:false,
      success: function(data) {
          $('.logresult').html(data);
          console.log(data);
      }
  });
  return false;

}）;

PHP 

<?php
error_reporting(0);
session_start();
require_once ("db.php");
$db = new MyDB();

if (isset($_POST['regSubmit']))
{
  $fname = strip_tags(@$_POST['fname']);
  $lname = strip_tags(@$_POST['lname']);
  $cname = strip_tags(@$_POST['cname']);
  $crnum = strip_tags(@$_POST['crcnum']);
  $uaddress = strip_tags(@$_POST['uaddress']);
  $caddress = strip_tags(@$_POST['caddress']);
  $briefdes = strip_tags(@$_POST['briefdes']);
  $uname = strip_tags(@$_POST['uname']);
  $uphone = strip_tags(@$_POST['uphone']);
  $pword = $_POST['pword'];
  $cfpword = $_POST['cfpword'];
  $uemail = $_POST['uemail'];
  $regas = strip_tags(@$_POST['regas']);
  $package = strip_tags(@$_POST['package']);
  $imagedir = './profimages/';
  $profimages = $_FILES['profimages']['name'];
  $profimagestmpname = $_FILES['profimages']['tmp_name'];
  $profimagesType = $_FILES['profimages']['type'];
  $profimagesSize = $_FILES['profimages']['size'];
  $regdate = date('d/m/Y');
  $ccode = strip_tags(@$_POST['ccode']);
  $posttype = join(", ", $_POST['postValue']);
  $status = "0";
  $verified = "0";
  $zero = "0";
  $website = strip_tags(@$_POST['website']);
  $coverimage = $_FILES['coverimage']['name'];
  $coverimagetmpname = $_FILES['coverimage']['tmp_name'];
  $coverimageSize = $_FILES['coverimage']['size'];
  $coverimageType = $_FILES['coverimage']['type'];

  $csql = "SELECT COUNT(*) as count FROM paymentverification WHERE code = $ccode";

  $psql = $db->prepare("SELECT * FROM paymentverification WHERE code = ?");

  $psql->bindParam(1, $ccode, SQLITE3_TEXT);

  $cret = $db->querySingle($csql);
  $pret = $psql->execute();

  if ($cret == 1)
  {
    while ($prow = $pret->fetchArray(SQLITE3_ASSOC))
    {
        $cpackage = $prow['package'];

      if ($cpackage == $package)
      {

      $cql = <<<EOF
      SELECT COUNT(*) FROM users WHERE ccode = $ccode;
EOF;

    $count = $db->querySingle($cql);

    if ($count == 1)
    {
      echo "This code as already been used";
    }
    else
    {
        if ($pword != $cfpword)
        {
          echo 'The passwords you entered do not match. Please try again!.';
        }
        else
        {
            if (strlen($pword) <= 8)
            {
                echo 'Your password must be more than 8 characters';
            }
            else
            {


                    $imagepath = $imagedir . $profimages;
                    $imagepath_2 = $imagedir . $coverimage;

                    $imageresult = move_uploaded_file($profimagestmpname, $imagepath);
                    $imageresult_2 = move_uploaded_file($coverimagetmpname, $imagepath_2);

                    if (!$imageresult && !$imageresult_2)
                    {
                      echo "Error uploading Company Logo/Profile Picture";
                    }
                    if (!get_magic_quotes_gpc())
                    {
                      $profimages = addslashes($profimages);
                      $imagepath = addslashes($imagepath);
                      $coverimage = addslashes($coverimage);
                      $imagepath_2 = addslashes($imagepath_2);
                    }

                    $stmt = $db->prepare('INSERT INTO users (fname, lname, cname, crcnum, caddress, uaddress, briefdes, uemail, uphone, uname, regas, pword, cfpword, profimages, package, regdate, ccode, posttype, status, verified, website, coverimage)
                VALUES (:fname, :lname, :cname, :crnum, :caddress, :uaddress, :briefdes, :uemail, :uphone, :uname, :regas, :pword, :cfpword, :profimages, :package, :regdate, :ccode, :posttype, :status, :verified, :website, :coverimage)');

                    $stmt->bindValue(':fname', $fname, SQLITE3_TEXT);
                    $stmt->bindValue(':lname', $lname, SQLITE3_TEXT);
                    $stmt->bindValue(':cname', $cname, SQLITE3_TEXT);
                    $stmt->bindValue(':crnum', $crnum, SQLITE3_TEXT);
                    $stmt->bindValue(':caddress', $caddress, SQLITE3_TEXT);
                    $stmt->bindValue(':uaddress', $uaddress, SQLITE3_TEXT);
                    $stmt->bindValue(':briefdes', $briefdes, SQLITE3_TEXT);
                    $stmt->bindValue(':uemail', $uemail, SQLITE3_TEXT);
                    $stmt->bindValue(':uphone', $uphone, SQLITE3_TEXT);
                    $stmt->bindValue(':regas', $regas, SQLITE3_TEXT);
                    $stmt->bindValue(':regdate', $regdate, SQLITE3_TEXT);
                    $stmt->bindValue(':uname', $uname, SQLITE3_TEXT);
                    $stmt->bindValue(':pword', password_hash($pword, PASSWORD_BCRYPT));
                    $stmt->bindValue(':cfpword', password_hash($cfpword, PASSWORD_BCRYPT));
                    $stmt->bindValue(':profimages', $imagepath, SQLITE3_TEXT);
                    $stmt->bindValue(':package', $package, SQLITE3_TEXT);
                    $stmt->bindValue(':ccode', $ccode, SQLITE3_INTEGER);
                    $stmt->bindValue(':posttype', $posttype, SQLITE3_TEXT);
                    $stmt->bindValue(':status', $status, SQLITE3_INTEGER);
                    $stmt->bindValue(':verified', $verified, SQLITE3_INTEGER);
                    $stmt->bindValue(':website', $website, SQLITE3_TEXT);
                    $stmt->bindValue(':coverimage', $imagepath_2, SQLITE3_TEXT);

                    $result = $stmt->execute();

                    if ($result)
                    {
                        echo "Account Successfully Created";
                    }
                    else
                    {
                        echo "Sorry!.....There was an issue creating your account. Please try again";
                    }
              }
          }
        }
      }
        else
        {
            echo "You payed for the $cpackage package";
            exit();
        }
      }
  }
}
?>

当我说console.log(something)检查ajax request是否已发送时，它会记录，但数据不会提交给数据库。谢谢，我将不胜感激。

3 个答案:

答案 0 :(得分：1)

试试这个：

logger.debug("Deleting virtual machine. VMName: {}".format(vm.name))
vm.delete()
logger.info("Successfully deleted virtual machine. VMName: {}".format(vm.name))

并失去其中一项： <script> $('#genreg').on('submit', function (e) { var formDat = new FormData($(this)[0]); $.ajax({ url: "genformexec.php", type: "POST", data: formDat, contentType: false, cache: false, processData:false, success: function(data) { $('.logresult').html(data); console.log(data); } }); return false; </script> <input type="file" onchange="logo_prev()" name="profimages" id="profimages">我应该是唯一的

答案 1 :(得分：0)

试试这个：

$('#genreg').on('submit', function (e) {
  e.preventDefault();

  var data = new FormData(this);
  data.append( 'profimages1', $( '#profimages1' )[0].files[0] ); // change profimages as profimages1
  data.append( 'coverimage', $( '#coverimage' )[0].files[0] );
  data.append( 'profimages2', $( '#profimages2' )[0].files[0] ); // change profimages as profimages2

  var ccode = $('#ccode').val();
  var fname = $('#fname').val();
  var lname = $('#lname').val();
  var cname = $('#cname').val();
  var crnum = $('#crcnum').val();
  var uaddress = $('#uaddress').val();
  var caddress = $('#caddress').val();
  var briefdes = $('#briefdes').val();
  var uname = $('#uname').val();
  var uphone = $('#uphone').val();
  var pword = $('#pword').val();
  var cfpword = $('#cfpword').val();
  var posttype = $("input[name=postValue]").each($(this)).val();
  $.ajax({
      url: "genformexec.php",
      type: "POST",
      data:  data,
      contentType: false,
      cache: false,
      processData:false,
      success: function(data) {
          $('.logresult').html(data);
          console.log(data);
      }
  });
  return false;

});

答案 2 :(得分：0)

如果您尝试发送文件或发布大小超过允许限制的数据（默认为2MB），也可能发生这种情况。 您可以尝试增加限制。在 .htaccess 文件中修改这些值，如下所示。

php_value post_max_size 5M

php_value upload_max_filesize 5M

相关问题
最新问题