时间戳

首页 > 解决方案 > 在选择选项中变得未定义

javascript - 在选择选项中变得未定义

问题描述

我正在制作一个简单的表单，用于使用 AJAX 将产品添加到数据库中。问题是显示未定义的选择选项。

我是这个领域的新手。任何人都可以检查代码的质量和我犯的任何其他错误。请在评论中提及。这只是为了学习目的。

$(document).ready(function() {
  $("#uploadsdfkf").on('click', function(e) {
    e.preventDefault();
    var form = $('#upload')[0];
    var formdata = new FormData(form);
    $productname = $('#Product').val();
    $fileupload = $('#file').val();
    $price = $('#price').val();
    $category = $('#category option:selected').attr('data-id'); // undefined here.
    
    alert($productname + "   " + $fileupload + "  " + $price + "  --->category" + $category);
    
    if ($varpp == "" || $varf == "" || $varpr == "") {
      alert("Please Fill all the details");
    } else {
      $.ajax({
        url: "./Flower Delivery Online_files/logicphotoadd.php",
        type: "post",
        data: formdata,
        contentType: false,
        processData: false,
        success: function(result) {
          alert(result);
        }
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="upload" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label class="control-label" for="input-email">Product Name</label>
    <input type="text" name="ProductNamees" value="" placeholder="Enter Product Name" id="Product" class="form-control">
  </div>


  <div class="form-group">
    <label class="control-label" for="input-email">Category</label>
    <select name="categoryname" value="" id="category" class="form-control">
      <option data-id="0" value="0">Category</option>
      <option data-id="1" value="1">Flower Bouquet (Buke)</option>
      <option data-id="2" value="2">Flower Garland (Har)</option>
      <option data-id="3" value="3">Stage Decoration</option>
      <option data-id="4" value="4">Bed Decoration</option>
      <option data-id="5" value="5">Car Decoration</option>
      <option data-id="6" value="6">Home Decoration</option>
      <option data-id="7" value="7">Palna Decoration</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label" for="input-email">file upload</label>
    <input type="file" name="files" value="" placeholder="" id="file" class="form-control">
  </div>
  <div class="form-group">
    <label class="control-label" for="input-email">price</label>
    <input type="text" name="price" value="" placeholder="Enter price" id="price" class="form-control">
  </div>
  <input type="submit" id="uploadsdfkf" name="upload" value="upload" class="btn check btn-primary">
</form>

标签： javascriptjquery

解决方案

你可以试试看

$(document).ready(function() {
  $("#uploadsdfkf").on('click', function(e) {
    e.preventDefault();
    var form = $('#upload')[0];
    var formdata = new FormData(form);
    $productname = $('#Product').val();
    $fileupload = $('#file').val();
    $price = $('#price').val();
    $category = $('.category').val(); 
    var test_string = $productname + "   " + $fileupload + "  " + $price + "  --->category:" + $category;
   alert(test_string);
    if ($productname == "" || $fileupload == "" || $price == "") {
          alert("Please Fill all the details");
    } else {
      $.ajax({
        url: "./Flower Delivery Online_files/logicphotoadd.php",
        type: "post",
        data: formdata,
        contentType: false,
        processData: false,
        success: function(result) {
          alert(test_string);
        }
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="upload" method="post" enctype="multipart/form-data">
  <div class="form-group">
    <label class="control-label" for="input-email">Product Name</label>
    <input type="text" name="ProductNamees" value="" placeholder="Enter Product Name" id="Product" class="form-control">
  </div>


  <div class="form-group">
    <label class="control-label" for="input-email">Category</label>
    <select name="categoryname" class="form-control category">
      <option data-id="0" value="0">Category</option>
      <option data-id="1" value="1">Flower Bouquet (Buke)</option>
      <option data-id="2" value="2">Flower Garland (Har)</option>
      <option data-id="3" value="3">Stage Decoration</option>
      <option data-id="4" value="4">Bed Decoration</option>
      <option data-id="5" value="5">Car Decoration</option>
      <option data-id="6" value="6">Home Decoration</option>
      <option data-id="7" value="7">Palna Decoration</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label" for="input-email">file upload</label>
    <input type="file" name="files" value="" placeholder="" id="file" class="form-control">
  </div>
  <div class="form-group">
    <label class="control-label" for="input-email">price</label>
    <input type="text" name="price" value="" placeholder="Enter price" id="price" class="form-control">
  </div>
  <input type="submit" id="uploadsdfkf" name="upload" value="upload" class="btn check btn-primary">
</form>

推荐阅读