Как получить динамически созданный идентификатор?

Question

Я абсолютный новичок в использовании javascript и ajax, и поэтому я застрял сейчас.У меня есть цикл while, в котором есть 2 разные кнопки.Оба работают, как я себе представляю, за исключением одной мелочи ...

product-id всегда передается только для первого элемента или, если я изменяю его для последнего элемента.Как передать правильный код продукта в сценарий?

Это мой PHP-файл:

<?php while ( $product = $browse->fetch( PDO::FETCH_ASSOC ) ) :
    $postid = $product[ 'id' ];
    $userid = 1; ?>

 <div id="content_<?php echo $postid ?>">
 <div id="reload_<?php echo $postid ?>" class="row postfarbe browse">

  <form method='post' action="" onsubmit="return add();">
    <input type="hidden" id="userid" value="<?php echo $userid ?>" class="input-box">
    <input type="hidden" id="productid" value="<?php echo $postid ?>" class="input-box">
    <input type="hidden" id="collection" value="1" class="input-box">
    <input type="hidden" id="wish" value="0" class="input-box">
    <input type="submit" id="submit" value="Add to Collection" class="btn my-2 my-sm-0 btn-outline-dark btn-sm">
  </form>

 </div>
</div>
<?php endwhile; ?>

Мой Javascript:

function add()
{
    var userid = document.getElementById("userid").value;
    var productid = document.getElementById("productid").value;
    var collection = document.getElementById("collection").value;
    var wishlist = document.getElementById("wish").value;
    if(userid && productid && collection && wishlist) {
        $.ajax
        ({
            type: 'post',
            url: 'post_collection.php',
            data: {
                user_id:userid,
                product_id:productid,
                collection_id:collection,
                wishlist_id:wishlist
            },
            success: function (response) {
                $("#content_"+ productid).load(" #reload_" + productid);
            }
        });
    }  
    return false;
}
</script>

Я знаю, что идентификатор продукта в моем примере всегда один и тот же, но как передать правильный код в сценарий, если в цикле 10 или более записей?

Answer 1

Я прочитал ваш код, вы хотите иметь несколько записей и хотите читать / извлекать динамически сгенерированные поля формы в общей функции добавления JS, которая в настоящее время ссылается на ПЕРВЫЙ НАЙДЕННЫЙ ЭЛЕМЕНТ В ОТНОШЕННОМ HTML - Вот причина, по которой вы получаете то же самоезначение каждый раз.

Вам нужно изменить логику с небольшим триком - передать что-то уникальное в аргумент функции ADD

<form method='post' action="" onsubmit="return add(<?php echo $postid; ?> );">
<input type="hidden" id="<?php echo $postid; ?>_userid" value="<?php echo $userid ?>" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_productid" value="<?php echo $postid ?>" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_collection" value="1" class="input-box">
<input type="hidden" id="<?php echo $postid; ?>_wish" value="0" class="input-box">
<input type="submit" id="<?php echo $postid; ?>_submit" value="Add to Collection" class="btn my-2 my-sm-0 btn-outline-dark btn-sm">

СЕЙЧАС читать уникально в функции ADD

function add(post_id){

var userid = document.getElementById(post_id+"_userid").value;
var productid = document.getElementById(post_id+"_productid").value;
var collection = document.getElementById(post_id+"_collection").value;
var wishlist = document.getElementById(post_id+"_wish").value;
### Your code as it is ...  
}

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

Answer 2

Ваша проблема заключается в том, что id уникален и может быть назначен элементу только один раз, например:

<p id="paragraph"> This is legal </p>
<p id="paragraph"> This is illegal - It is no longer unique </p>

<p class="paragraph"> This is legal </p>
<p class="paragraph"> This is legal </p>

Вы можете получить доступ к выбранному в данный момент классу, используя $(this) вот так:

$('.paragraph').click(function() {
    $(this).html('See, totally legal.');
});

См. Этот пример , чтобы увидеть его в использовании.

---

Ваше решение необходимо добавить onclick() метод к button.Затем он получает форму parent().Затем вы можете find() класса и получить val() из данных формы.

Ваша форма также отправляет действие,Вам нужно иметь <button> типа button, чтобы оно не отправляло действие.Это также должен быть класс, так как он не будет уникальным, если вы их многократно создаете.

Вот рабочий пример, чтобы просто заново добавить свой AJAX-запрос.

$(document).ready(function() {
  $('.submit-btn').click(function() {
    var elements = {
      'userid': $(this).parent().find('.userid').val(),
      'productid': $(this).parent().find('.productid').val(),
      'collection': $(this).parent().find('.collection').val(),
      'wish': $(this).parent().find('.wish').val()
    };

    console.log("User ID: " + elements.userid);
    console.log("Product ID: " + elements.productid);
    console.log("Collection: " + elements.collection);
    console.log("Wish: " + elements.wish);

    // TODO: Add your AJAX request using these elements
  });
});

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- This will be generated by PHP -->

<form method='POST'>
  <input hidden class="userid input-box" value="1">
  <input hidden class="productid input-box" value="1">
  <input hidden class="collection input-box" value="1">
  <input hidden class="wish input-box" value="1">
  <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button>
</form>

<!-- This will be generated by PHP -->
<br />

<form method='POST'>
  <input hidden class="userid input-box" value="2">
  <input hidden class="productid input-box" value="2">
  <input hidden class="collection input-box" value="2">
  <input hidden class="wish input-box" value="2">
  <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button>
</form>

---

Ваши данные AJAX будут выглядеть следующим образом:

data: {
    user_id: elements.userid,
    product_id: elements.productid,
    collection_id: elements.collection,
    wishlist_id: elements.wish
}

---

Ваш PHP-код может выглядеть следующим образом:

<?php foreach($browse->fetchAll(PDO::FETCH_ASSOC) as $product):
    $id = $product['id'];
    $productDd = $product['product_id'];
    $productCategory = $product['category']; // TODO: change to your column nanme
    $productWishList = $product['wish']; ?>

    <div class="content_<?= $id; ?>">
        <div class="reload_<?= $id; ?> row postfarbe browse">
            <form method='POST'>
                <input hidden class="userid input-box" value="<?= $id; ?>">
                <input hidden class="productid input-box" value="<?= $productCategory; ?>">
                <input hidden class="collection input-box" value="<?= $productCollection; ?>">
                <input hidden class="wish input-box" value="<?= $productWishList; ?>">
                <button type="button" class="submit-btn btn my-2 my-sm-0 btn-outline-dark btn-sm"> Add to collection </button>
            </form>
        </div>
    </div>

<?php endforeach; ?>