Question

所以我仍然对JS和jQuery还是陌生的，但是我试图学习如何在单击div中的按钮时获取div中的所有元素和值。

当我使用FormData执行此操作时，便能够使它适用于表单。我不知道如何使用div而不是表单来做到这一点。（我只能使用一种表格，但不幸的是不能使用这种形式。）

这是到目前为止我得到的，但是我知道我做错了。

$id = DB::table('users')->where('money', 100)->pluck('id')->first();
DB::table('users')->where('id', '=', $id)->update(['money' => 125]);

$('button.browsePageImages').on('click', (function(e) {
  e.preventDefault();
  console.log("Attempting Image Browsing: ");
  var myArea = $(this).closest("div");
  console.log(myArea);
  var myAreaData = new FormData(myArea[0]);
  console.log(myAreaData);
  var myFormID = $(this).closest("div").attr("id");
  console.log(myFormID);
  var dataHref = $(this).attr('data-href');
  console.log(dataHref);
}));

Answer 1

您可以为每个输入使用serializeArray。

var myArea = $(this).closest("div").find(':input');
var myAreaData = myArea.serializeArray();

$('button.browsePageImages').on('click', (function(e) {
  e.preventDefault();
  console.log("Attempting Image Browsing: ");
  var myArea = $(this).closest("div").find(':input');
  //console.log(myArea);
  var myAreaData = myArea.serializeArray();
  console.log(myAreaData);
  var myFormID = $(this).closest("div").attr("id");
  console.log(myFormID);
  var dataHref = $(this).attr('data-href');
  console.log(dataHref);
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="browseImagesDiv">
  <h4>Image (Optional) <span></h4>

  <input type="text" class="form-control" name="description" value="This is the image description." />
  <input type="text" class="form-control" id="areaSection-15" name="image_url" value="" placeholder="Image URL Here"/>
  
  <button type="button" class="btn btn-white btn-xs browsePageImages" data-href="15">Save Image Info</button></span>
</div>

从按钮单击的父div内获取元素和值

1 个答案: