Member Avatar for titosd

Hello

I have a question.

let me have this select:

<form>
<select id="mymenu" name="id" onchange="getID()">
<option></option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>								
</select>

And Now i want to get the value from mymenu, to use it i another select in the same form.
I searched in the net and i found that i should use onchange

<select name="uid">
<option></option>
<?
$sql = mysql_query("Select * from $table WHERE id = '$ch_id'");
while ($row = mysql_fetch_array($sql)) {
   ?>
   <option value="<? echo $row['unit_id']; ?>"><? echo $row['unit_name'];?></option>
   <?
}
?>
</select>
</form>

this is the getID() function:

<script type="text/javascript">
function getChapterID(){ //run some code when "onchange" event fires
var selectmenu=document.getElementById("mymenu")
<?$ch_id?> = this.options[this.selectedIndex].value
}
</script>
  • 3 Contributors
  • 4 Replies
  • 6K Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

You cannot assign a PHP variable from JavaScript at runtime. PHP runs on the server before the page is sent; JavaScript runs in the browser after. To use the selected value to populate another select, either submit the form and rebuild the page server-side, or fetch the dependent options via Ajax and update the second select client-side.

Example using fetch and a small PHP endpoint that returns JSON:

<!-- Simplified HTML: first select changes, second select is populated -->
<select id="chapter">
  <option value="">Choose...</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<select id="unit">
  <option value="">Choose a unit...</option>
</select>

<script>
const chapter = document.getElementById('chapter');
const unit = document.getElementById('unit');

chapter.addEventListener('change', async (e) => {
  const id = e.target.value;
  unit.length = 1; // keep the placeholder
  if (!id) return;

  const res = await fetch('/units.php?id=' + encodeURIComponent(id), { headers: { 'Accept': 'application/json' } });
  if (!res.ok) return;
  const rows = await res.json();
  rows.forEach(row => unit.add(new Option(row.unit_name, row.unit_id)));
});
</script>
<?php
// units.php (use PDO/mysqli; the old mysql_* API is removed)
header('Content-Type: application/json; charset=UTF-8');
$pdo = new PDO('mysql:host=localhost;dbname=YOUR_DB;charset=utf8mb4','USER','PASS',[PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION]);
$id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT);
if (!$id) { echo json_encode([]); exit; }
$stmt = $pdo->prepare('SELECT unit_id, unit_name FROM your_table WHERE id = ?');
$stmt->execute([$id]);
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Avoid short PHP open tags and mixing PHP inside JS. See MDN: Using Fetch and PHP PDO.

Recommended Answers

All 4 Replies

Member Avatar for wilch

How exactly do you want to use the value from selectbox "mymenu" in selectbox "uid". It seems you pretty much have the idea, except in your getChapterID() you should be retrieving the value of "selectmenu" rather than of "this.options"

Member Avatar for Member #120589

this is the getID() function:

No it's not,

function getChapterID(){ //run some code when "onchange" event fires

will not run when you:

<select id="mymenu" name="id" onchange="getID()">

getID() is not the same as getChapterID()

Member Avatar for titosd

Sorry

I just make a mistake

but it's still don't work

I did this changes:

<form>
    <select id="mymenu" name="id" onchange="getID()">
    <option></option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    </select>
<select name="uid">
    <option></option>
    <?
    $sql = mysql_query("Select * from $table WHERE id = '$ch_id'");
    while ($row = mysql_fetch_array($sql)) {
    ?>
    <option value="<? echo $row['unit_id']; ?>"><? echo $row['unit_name'];?></option>
    <?
    }
    ?>
    </select>
    </form>
<script type="text/javascript">
    function getID(){ //run some code when "onchange" event fires
    var selectmenu=document.getElementById("mymenu")
    <?$ch_id?> = selectmenu[this.selectedIndex].value
    }
    </script>
Member Avatar for Member #120589

Avoid short tags if possible.

I can't see how this works.

<?$ch_id?> = selectmenu[this.selectedIndex].value

You're mixing php and js. JS can't make a call to php as JS works on the client and PHP works on the server. This can only be achieved through Ajax.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.