Отправить динамическую форму, используя JQuery

Question

Отправить динамическую форму, используя JQuery

0

Я не уверен, что смогу это сделать, но стоит попробовать.

У меня есть таблица с не менее 10 элементами, поступающими из базы данных Mysql. Это предметы, для которых вы можете делать ставки. Идея состоит в том, что каждая строка (следовательно, каждый элемент) имеет кнопку, которую можно нажать, чтобы ввести ставку. Эта кнопка открывает всплывающее окно с текстовым полем для ввода ставки и кнопкой для отправки формы.

Чтобы определить элемент, на который пользователь предлагает цену, мне нужен его идентификатор, а также сумма ставки. Количество действительно легко получить, но я много разбираюсь с идентификатором элемента.

Вот что я имею:

$(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>

Я пробовал какое-то время без везения. Я всегда получаю идентификатор элемента для первого элемента независимо от того, в какую кнопку я нажимаю.

Возможно ли, что я хочу? Это правильный подход? Должен ли я использовать другой?

Заранее большое спасибо.

saysmus 22 май 2018, в 13:55

Источник

1

У вас есть несколько кнопок ставок? Вы всегда выбираете первый элемент с классом. Разве вы не хотите, чтобы тот элемент внутри кнопки, на который вы нажали?
epascarello 22 май 2018, в 11:55
0

генерировать dynmic идентификаторы, а затем передавать в кнопку, как <button id = "dynamicid by php" onsubmit = "func (this.id)">
Shubh 22 май 2018, в 11:58

Теги:

php

mysql

javascript

jquery

3 ответа

1

Чтобы получить доступ к текущему идентификатору элемента div, вы можете использовать ( $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, который при нажатии возвращает идентификатор этого div.

5eeker 22 май 2018, в 11:01

1

Когда вы делаете это так: var $id = document.getElementsByClassName('show')[0].value; он всегда будет принимать первый элемент, имеющий class="show".
Которая будет содержать первый элемент, поэтому всегда дает id первого элемента.
Поэтому вместо того, чтобы делать это, вы можете сделать это следующим образом:

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

Это выберет текущий элемент, на который пользователь нажал, и даст идентификатор этого элемента.

prit.patel 22 май 2018, в 10:09

Ещё вопросы

У вас есть несколько кнопок ставок? Вы всегда выбираете первый элемент с классом. Разве вы не хотите, чтобы тот элемент внутри кнопки, на который вы нажали?
генерировать dynmic идентификаторы, а затем передавать в кнопку, как <button id = "dynamicid by php" onsubmit = "func (this.id)">

muecas · Accepted Answer · 2018-05-22T09-46-00.000Z

Просто измените эту строку:

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

К этому:

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

Проблема в том, что с document.getElementsByClassName('show')[0].value вы запрашиваете первое вхождение кнопки .show. С помощью $(this) вместо этого вы будете получать доступ к текущей нажатой кнопке.

JQuery привязывает события к цели, где вы присоединяете событие, поэтому this всегда будет ссылкой на цель события. Использование $(this) создаст объект jQuery целевого элемента, позволяющий применить к этому элементу функции jQuery.

Как побочная заметка, вы не должны дублировать идентификаторы элементов. Каждый идентификатор должен быть уникальным в html-документе, поэтому будет хорошей практикой сделать этот идентификатор разным для каждой кнопки.

Надеюсь, поможет.

Я даже не знаю, что сказать. Я очень любитель JQuery / Javascript, и я схожу с ума ... Большое спасибо, muecas.
@saysmus нет проблем. Я рад, что смог помочь тебе.