使用jquery提交动态表单

cidc1ykv 于 2021-06-20 发布在 Mysql

关注(0)|答案(3)|浏览(402)

我´我不确定我能不能做到，但值得一试。
我有一个表，其中至少有10项来自mysql数据库。它们是你可以出价的物品。其思想是，每一行（因此，每一个项目）都有一个按钮，可以点击进入出价。此按钮打开一个弹出窗口，其中包含一个用于输入投标的文本字段和一个用于提交表单的按钮。
为了确定用户投标的项目，我需要它的id，以及投标金额。这个数目很容易得到，但我´我很纠结于商品id。
以下是我所拥有的：

$(document).ready(function(){
 $(".show").click(function() {
   $("#popup").show();
   	  var $id = document.getElementsByClassName('show')[0].value;
   	  console.log($id);
   	  $("#jugador").val($id);
 });

 $("#close, #submit").click(function() {
   $("#popup").hide();
 });
});


# popup {

  position: relative;
  z-index: 100;
  padding: 10px;
}

.content {
  position: absolute;
  z-index: 10;
  background: #ccc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 5;
  opacity: 0.4;
}

<td><button class="show" id="bid" value="<?php echo $row2["id"];?>"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>

/*Popup*/

<div id="popup" style="display: none;">
 <div class="overlay"></div>
  <div class="content">
    <header>
     <div id="close">✖</div>
    </header>
    <form name="form1" method="post" action="bid.php">
     <fieldset>
      <label for="bid">Bid:</label>
      <input type="text" name="bidAmount" id="bidAmount" size="8" />
      <input type="hidden" name="item" id="item" />
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
    <footer>
    <button type="button" id="submit">Bid Now</button>
    </footer>
   </form>
  </div>
</div>

我´我试了好一阵子都没走运。无论单击哪个按钮，我都将始终获得第一个元素的项目id。
我想要的东西可行吗？这是正确的方法吗？我应该换一个吗？
提前多谢了。

mysql php jquery JavaScript

来源：https://stackoverflow.com/questions/50467007/submit-dynamical-form-using-jquery

3条答案

按热度按时间

j9per5c41#

要访问当前div元素的id，可以使用( $this )，它引用当前javascript对象。

$("div").click(function(){
 alert($(this).attr('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Num 1</div>
<div id="2">Num 2</div>
<div id="3">Num 3</div>
<div id="4">Num 4</div>

在本例中，我创建了div，当单击return时，它是该div的id。

赞(0）回复(0）举报 2021-06-20

imzjd6km2#

只要换一行：

var $id = document.getElementsByClassName('show')[0].value;

对此：

var $id = $(this).val();

问题是你的 document.getElementsByClassName('show')[0].value 您正在查询 .show 按钮。与 $(this) 相反，您将访问当前单击的按钮。
jquery将事件绑定到附加事件的目标，因此 this 将始终是对事件目标的引用。使用 $(this) 将创建目标元素的jquery对象，允许将jquery函数应用于该元素。
作为补充说明，您不应该复制元素ID。在html文档中，每个id都必须是唯一的，因此，为每个按钮设置不同的id是一种很好的做法。
希望有帮助。