php 在javascript函数中传递字符串变量

h5qlskok 于 2022-11-21 发布在 PHP

关注(0)|答案(1)|浏览(177)

我正在用php创建一个菜单列表。我想让用户更改列表中的name和discount变量。所以下面是列表的图像：list with items，所以对于每个列表项和子项，都有一个按钮，它必须打开一个弹出窗口，并将属于该列表项的变量（如名称和折扣变量）传递到表单输入字段，以便用户可以从旧值进行调整。我使用javascript打开和关闭表单，并且希望它也把php变量（从数据库中获得）放到那个表单中。
浏览器：

<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函数的解决方案，但是没有一个能帮上忙。我只对数字做了类似的事情，但是我也想把一个字符串发送到那个输入字段。所以这就是我想得到的：what I want

php

来源：https://stackoverflow.com/questions/74450977/passing-a-string-variable-in-a-javascript-function

1条答案

按热度按时间

q7solyqu1#

您尝试将PHP与JavaScript混合使用，如果可能的话，应该避免这样做。还有其他方法可以将PHP值传递给JavaScript，比如将它们设置为HTML属性。
我的方法是为每个列表项创建一个<form>元素，并在隐藏的<input />元素中输出PHP $category值。

<!-- 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";
}

可执行的范例

这个例子使用预先填充的值运行。你唯一要做的就是在正确的位置设置值。
第一个

赞(0）回复(0）举报 2022-11-21

我来回答

php 在javascript函数中传递字符串变量

1条答案

可执行的范例

相关问题

热门标签

最新问答