passing a string variable in a javascript function-CodePudding

I am creating a menu list with php. I want the user to change name and the discount variable in the list. So here is an image of the list:list with items, so for each list item and subitems, there's a button which must open a popup and pass the variables belonging to that listitem, like names and discount variable into the form input field, so the user can adjust it from the old value. I use javascript to open and close the form, and want it also to put the php variables (obtained from a database) into that form. So here is my piece of code:

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:

echo '
    <li>
    <label for="subfolder2">'.$category['name'].'</label>
    <label>  '.$category['discount'].'%</label>
    <input type="checkbox" name="subfolder2"><button onclick="updatepopup(\'$category["**name**"]\', \'$category["discount"]\')"><i ></i></button>
    ';

the form in html:

<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 id="closebutton" onclick="closeform()">X</button>
        <button type= "submit"> </button>

    </form>

So I have read many solutions to pass a string to a javascript function but not a single one would help. I only get something like that done with numbers, but I also want to sent a string into that input field. So this is what I want to get: what I want

CodePudding user response：

You're trying to mix PHP with JavaScript, which should be avoided if possible. There are other ways to pass PHP values to JavaScript, like setting them as HTML attributes.

My approach would be to create a <form> element for each list item and output your PHP $category values in hidden <input /> elements.

<li>
  <form >
    <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 ></i></button>
  </form>
</li>

Then listen for submit events on these forms. When a form gets submitted, make sure the preventDefault() method on the event is called. This will prevent a reload of the page and allows you to write your own behavior.

Extract the values from the submitted form and pass them to your updatepopup function.

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);
  });
}

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

CodePudding user response：

updatepopup(\'$category["**name**"]\', \'$category["discount"]\')

should look more like this

updatepopup(\'<?= $category["**name**"] ?>\', \'<?= $category["discount"] ?>\')

you can't print php variables to your page without containing the php code portion within a php tag. in my above code <?= is synonymous with <? echo