Отправить динамическую форму с помощью JQuery
Я не совсем уверен, что смогу это сделать, но попробовать стоит.
У меня есть таблица по крайней мере с 10 элементами из базы данных Mysql. Это предметы, за которые вы можете делать ставки. Идея состоит в том, что в каждой строке (а значит, и в каждом элементе) есть кнопка, по которой можно щелкнуть, чтобы ввести ставку. Эта кнопка открывает всплывающее окно с текстовым полем для ввода ставки и кнопкой для отправки формы.
Чтобы идентифицировать предмет, за который пользователь делает ставку, мне нужен его идентификатор, а также сумма ставки. Сумму действительно легко получить, но я очень борюсь с идентификатором предмета.
Вот что у меня есть:
$(document).ready(function(){
$(".show").click(function() {
$("#popup").show();
var $id = document.getElementsByClassName('show')[0].value;
console.info($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>Какое-то время я безуспешно пытался. Я всегда получаю идентификатор для первого элемента, независимо от того, на какой кнопке я нажимаю.
Возможно ли то, что я хочу? Это правильный подход? Стоит ли использовать другой?
Заранее большое спасибо.
сгенерировать динамические идентификаторы, а затем передать кнопку, например <button id = "dynamicid by php" onsubmit = "func (this.id)">
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Просто измените эту строку:
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, и я сходил с ума ... Большое спасибо, муэкас.
@saysmus без проблем. Я рада, что смогла тебе помочь.
Чтобы получить доступ к идентификатору текущего элемента 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.
Когда вы делаете это так, как этот var $id = document.getElementsByClassName('show')[0].value;, он всегда будет принимать первый элемент с class = "show".
.
Который будет содержать первый элемент, следовательно, всегда дает id первого элемента.
Поэтому вместо того, чтобы делать это так, вы можете сделать это так:
var $id = $(this).val();
Это выберет текущий элемент, на который щелкнул пользователь, и предоставит идентификатор этого элемента.
У вас есть несколько кнопок ставок? Вы всегда выбираете первый элемент с классом, разве вам не нужен тот, который находится внутри нажатой кнопки?