Передача строковой переменной в функцию javascript

Я создаю список меню с помощью php. Я хочу, чтобы пользователь изменил имя и переменную скидки в списке. Итак, вот изображение списка: список с элементами, поэтому для каждого элемента списка и подэлементов есть кнопка, которая должна открывать всплывающее окно и передавать переменные, принадлежащие этому элементу списка, такие как имена и переменная скидки, во ввод формы. поле, чтобы пользователь мог настроить его по старому значению. Я использую javascript для открытия и закрытия формы и хочу, чтобы он также помещал в эту форму переменные php (полученные из базы данных). Итак, вот мой кусок кода:

JavaScript:

<script>
function updatepopup(**$name**, $discount){
    document.getElementById("updatedata").style.display = "block";
    document.getElementById("fnaam").value = **$name**";
    document.getElementById("fkort").value = $discount;
}

function closeform(){
    document.getElementById("updatedata").style.display = "none";
}
</script>

php:

<ol class='tree'> "; 
    if ($currLevel == $prevLevel) echo "  ";
    echo '
    <li>
    <label for = "subfolder2">'.$category['name'].'</label>
    <label>  '.$category['discount'].'%</label>
    <input type = "checkbox" name = "subfolder2">

    <form id = "updatedata" method = "POST">
        <label for = "fnaam">Naam: </label>
        <input type = "text" id = "fnaam" name = "fnaam" value = "'.$category['name'].'">

        <label for = "fkort">Korting</label>
        <input type = "number" id = "fkort" name = "fkort" value = "'.$category['discount'].'">
        
        <button id = "closebutton" onclick = "closeform()">X</button>
        <button type= "submit"> </button>
    </form>

    <button onclick = "updatepopup()"><i class = "fa-solid fa-pen-to-square"></i></button>
    ';
    if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
    $currLevel++; 
    createTreeView ($array, $categoryId, $currLevel, $prevLevel);
    $currLevel--;               
    }
}

if ($currLevel == $prevLevel) echo "<li><button>+</button></li></li>
</ol>";
}
?>

Итак, я прочитал много решений для передачи строки в функцию javascript, но ни одно из них не помогло. Я делаю что-то подобное только с числами, но я также хочу отправить строку в это поле ввода. Итак, вот что я хочу получить: то, что я хочу

Не совсем понятно, что вы здесь спрашиваете. Каков фактический и ожидаемый результат?

— 15.11.2022 20:13

То, что я сейчас получаю, совсем не похоже на изображение выше. На самом деле я хочу получить второе изображение (то, что я хочу)

— 15.11.2022 20:24

Вы изменили структуру вопроса. Пара замечаний: значения атрибутов id можно использовать только один раз. Идентификаторы должны быть уникальными, иначе их использование будет потеряно. Я бы предложил использовать только одну форму updatedata, а не по одной на элемент списка, как в исходной структуре.

— 16.11.2022 11:31

Итак, как бы вы передали php vars в эту форму одним нажатием кнопки в списке?

— 16.11.2022 12:03

Не могли бы вы передать эти переменные в вызове updatepopup() вместо того, чтобы устанавливать их в качестве аргументов в его определении? <button onclick = "updatepopup(phpNameVar,phpDiscountVar);"><i class = "fa-solid fa-pen-to-square"></i></button>. Тогда ваше определение функции будет function updatepopup(name, discount){...

— 16.11.2022 15:23

@mykaf Как бы вы это сделали с: <php echo '<button onclick = "updatepopup()">Some text</button> ?> где в updatepopup должны быть размещены эти две переменные: $categories['name'] и $categories['discount']?

— 17.11.2022 08:31

Как аргументы? updatepopup("$categories['name']",$categories['discount'])?

— 17.11.2022 15:14

да и нет, пожалуйста, перепишите всю строку от < до >, заполненную переменными в качестве аргументов

— 17.11.2022 19:57

кстати, это работает только для чисел, а не для строковых переменных. Вот когда я делаю это так: <button onclick = "updatepopup('.$category['name'].', '.$category['discount'].')">Mybutton</button>

— 18.11.2022 09:00

javascript php html forms variables

15.11.2022 20:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

106

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы пытаетесь смешать PHP с JavaScript, чего следует избегать, если это возможно. Существуют и другие способы передачи значений PHP в JavaScript, например установка их в качестве атрибутов HTML.

Мой подход состоял бы в том, чтобы создать элемент <form> для каждого элемента списка и вывести ваши значения PHP $category в скрытые элементы <input />.

<!-- Start list -->
<ol class='tree'> 
  <li>
    <form class = "js-update-data">
      <label for = "subfolder2"><?= $category['name']; ?></label>
      <span><?= $category['discount']; ?>%</span>

      <input type = "checkbox" name = "subfolder2">
      <input type = "hidden" name = "name" value = "<?= $category["name"]; ?>"/>
      <input type = "hidden" name = "discount" value = "<?= $category["discount"]; ?>" />

      <button type = "submit"><i class = "fa-solid fa-pen-to-square"></i></button>
    </form>

    <!-- Nested list -->
    <ol class='tree'> 
      <li>
        <form class = "js-update-data">
          <!-- Structure for every list item.. -->
        </form>
      </li>
    </ol>
  </li>
</ol>
<!-- End list -->

<!-- Form to show/hide & update -->
<form id = "updatedata" method = "POST">
  <label for = "fnaam">Naam: </label>
  <input type = "text" id = "fnaam" name = "fnaam" value = "">

  <label for = "fkort">Korting</label>
  <input type = "number" id = "fkort" name = "fkort" value = "">
        
  <button type = "button" id = "closebutton">X</button>
  <button type = "submit"> </button>
</form>

Затем слушайте submit события в этих формах. Когда форма отправлена, убедитесь, что вызывается метод preventDefault() для события. Это предотвратит перезагрузку страницы и позволит вам написать собственное поведение.

Извлеките значения из отправленной формы и передайте их в свою функцию updatepopup.

const forms = document.querySelectorAll('.js-update-data');

for (const form of forms) {
  form.addEventListener('submit', event => {
    event.preventDefault();

    const formData = new FormData(event.target);
    const name = formData.get('name');
    const discount = formData.get('discount');

    updatepopup(name, discount);
  });
}

const closeButton = document.getElementById("closebutton");
closeButton.addEventListener('click', closeform);

function updatepopup(name, discount){
  document.getElementById("updatedata").display = "block";
  document.getElementById("fnaam").value = name;
  document.getElementById("fkort").value = discount;
}

function closeform(){
  document.getElementById("updatedata").style.display = "none";
}

Запускаемый пример

Этот пример выполняется с предварительно заполненными значениями. Единственная ваша задача — установить значения в нужном месте.

const forms = document.querySelectorAll('.js-update-data');

for (const form of forms) {
  form.addEventListener('submit', event => {
    event.preventDefault();

    const formData = new FormData(event.target);
    const name = formData.get('name');
    const discount = formData.get('discount');

    updatepopup(name, discount);
  });
}

const closeButton = document.getElementById("closebutton");
closeButton.addEventListener('click', closeform);

function updatepopup(name, discount){
  document.getElementById("updatedata").hidden = false;
  document.getElementById("fnaam").value = name;
  document.getElementById("fkort").value = discount;
}

function closeform(){
  document.getElementById("updatedata").hidden = true;
}

form[hidden] {
  display: none;
}

<!-- Start list -->
<ol class='tree'> 
  <li>
    <form class = "js-update-data">
      <label for = "subfolder2">Test 1</label>
      <span>25%</span>

      <input type = "checkbox" name = "subfolder2">
      <input type = "hidden" name = "name" value = "Test 1"/>
      <input type = "hidden" name = "discount" value = "25" />

      <button type = "submit"><i class = "fa-solid fa-pen-to-square"></i>edit</button>
    </form>

    <!-- Nested list -->
    <ol class='tree'> 
      <li>
        <form class = "js-update-data">
          <label for = "subfolder2">Test 2</label>
          <span>13%</span>

          <input type = "checkbox" name = "subfolder2">
          <input type = "hidden" name = "name" value = "Test 2"/>
          <input type = "hidden" name = "discount" value = "13" />

          <button type = "submit"><i class = "fa-solid fa-pen-to-square">edit</i></button>
        </form>
      </li>
    </ol>
  </li>
  
  <li>
    <form class = "js-update-data">
      <label for = "subfolder2">Test 4</label>
      <span>80%</span>

      <input type = "checkbox" name = "subfolder2">
      <input type = "hidden" name = "name" value = "Test 4"/>
      <input type = "hidden" name = "discount" value = "80" />

      <button type = "submit"><i class = "fa-solid fa-pen-to-square"></i>edit</button>
    </form>

    <!-- Nested list -->
    <ol class='tree'> 
      <li>
        <form class = "js-update-data">
          <label for = "subfolder2">Test 3</label>
          <span>50%</span>

          <input type = "checkbox" name = "subfolder2">
          <input type = "hidden" name = "name" value = "Test 3"/>
          <input type = "hidden" name = "discount" value = "50" />

          <button type = "submit"><i class = "fa-solid fa-pen-to-square"></i>edit</button>
        </form>
      </li>
    </ol>
  </li>
</ol>
<!-- End list -->

<!-- Form to show/hide & update -->
<form id = "updatedata" method = "POST" hidden>
  <label for = "fnaam">Naam: </label>
  <input type = "text" id = "fnaam" name = "fnaam" value = "">

  <label for = "fkort">Korting</label>
  <input type = "number" id = "fkort" name = "fkort" value = "">
        
  <button type = "button" id = "closebutton">X</button>
  <button type = "submit"> </button>
</form>

Это точно. Решение OP на самом деле не сильно отличается, кроме того, что оно выводит оба значения в одну кнопку. Золотая середина заключалась бы в том, чтобы выводить значения как data-attributes на кнопке. Если вы хотите использовать прослушиватели событий вместо встроенных обработчиков событий, вам следует это сделать. Мы несем ответственность за то, чтобы подавать правильный пример. И я не имею в виду без обид.

— 15.11.2022 20:38

как? Можете ли вы привести пример?

— 16.11.2022 08:53

Как бы вы это сделали в следующем случае: Список содержит подсписки, которые создаются функцией PHP следующим образом: if ($currentParent == category['parent_id']) { if ($currLevel > $prevLevel) echo " <ol class='tree'> "; if ($currLevel == $prevLevel) echo " "; echo ' <li> <label for = "subfolder2">'.$category['name'].'</label> <label> '.$category['discount'].'%</label> <form id = "updatedata" method = "POST"> ... </form> <button onclick = "updatepopup()"></button> ';

— 16.11.2022 09:30

Вы имеете в виду мой пример выше или data-attributes? Теоретически все элементы вашего списка должны иметь одинаковую разметку, независимо от уровня.

— 16.11.2022 10:38

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

— 16.11.2022 11:16

Да, это именно то, что делает пример. Ты пробовал это? Вам нужно будет вывести эту структуру для каждого элемента <li> во вложенных списках.

— 16.11.2022 11:19

Я попробовал ваше решение, но оно не решило вопрос. Я могу создавать все формы с помощью php, который отлично работает, но я хочу только скрыть или открыть форму с помощью javascript, поэтому есть кнопки с ручкой (см. Изображение «список с элементами» выше), которые должны это сделать.

— 16.11.2022 12:01

Я расширил пример, чтобы продемонстрировать более широкую картину. В вашем коде будет несколько форм, но только одна форма updatedata. Форма updatedata будет отображаться или скрываться в зависимости от нажатия любого из значков пера. Затем JS скопирует значения из формы в элемент списка и установит их в форме updatedata.

— 16.11.2022 12:58

Да, большое спасибо! Это работает, в том числе для моего конкретного случая! У меня только один вопрос, ввод числа в форму не будет работать как ввод числа, поэтому стрелки не отображаются

— 16.11.2022 15:22

как бы вы сделали это с двумя формами @Emiel Zuurbier? , потому что, когда я добавляю событие к этой кнопке отправки, обе формы не будут работать из-за этой строки, я думаю: adform.addEventListener('submit', event=> { event.preventDefault(); это для объявления объявления const.

— 18.11.2022 09:06

Присоединяйтесь ко мне в этом чате, чтобы мы могли поговорить об этом.

— 18.11.2022 13:39

Я не могу говорить в чате, потому что у меня недостаточно репутации. Не могли бы вы помочь мне улучшить репутацию?

— 23.11.2022 09:51

Еще нужно 7 репутации...

— 24.11.2022 20:22

Тогда вам остается только создать новый вопрос.

— 25.11.2022 10:03

15.11.2022 20:28