php - passing a string variable in a javascript function
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:
<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>";
}
?>
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
Answer
Solution:
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.
<!-- 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>
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);
});
}
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";
}
Runnable example
This example runs with pre-filled values. The only job you have is to set the values in the right spot.
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>