-1

I am trying to pass the value of a dynamically created JavaScript form (or pretty much just one select/option field of it) to another php file.

Here's the whole code of my request.php (which happens to use php, JavaScript and HTML):

<?php
include ("DbVerbindung.php");
 ?>
<!-- Verbindung zur Datenbank aufbauen -->
<?php
    include "header.php";
 ?>
<!-- Kopfteil des Webfrontends holen -->

    <!-- Hauptinhaltbereich -->

    <div class="float">

        <script>
<!-- dynamische Abfrage für Optionsfeld -->
function showUser(str) {
if (str=="") {
document.getElementById("gang").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("gang").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getStudiengang.php?q="+str,true);
xmlhttp.send();
}
        </script>

        <h2>Daten des Wählers auswählen</h2>
        <table id="auswahl">
            <!-- Optionen zur Abfrage der Wählerdaten -->
            <form action="speichern.php" method="POST">
                <tr>
                    <td>Fachbereich:</td>
                    <td id="fachbereich">
                    <select size="1" maxlength="20" name="fachbereich" onChange="showUser(this.value)">
                        <option>Fachbereich auswählen</option>
                        <?php $sql = "SELECT * FROM bereich";
                            $result = mysql_query($sql);
                            while ($row = mysql_fetch_array($result)) {
                                echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
                            }
                        ?>
                    </select>
                </tr>
                <tr>
                    <td>Studiengang:</td>
                    <td id="gang"></td>
                </tr>
                <tr>
                    <td>Geschlecht:</td>
                    <td id="geschlecht">
                    <select size="1" maxlength="20" name="geschlecht">
                        <?php $sql = "SELECT * FROM geschlecht";
                        $result = mysql_query($sql);
                        while ($row = mysql_fetch_array($result)) {
                            echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
                        }
                        ?>
                    </select></td>
                </tr>
                <tr>
                    <td>Name:</td>
                    <td id="name"><select size="1" maxlength="30" name="name" onClick="getName.p"</td>
                </tr>
                <tr>
                    <td>Wahllokal:</td>
                    <td id="lokal">
                    <select size="1" maxlength="50" name="lokal">
                        <?php $sql = "SELECT * FROM lokal";
                        $result = mysql_query($sql);
                        while ($row = mysql_fetch_array($result)) {
                            echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
                        }
                        ?>
                    </select></td>

                </tr>
                <tr>
                    <td id="submit">
                        <input type="submit" name="waehlt" value="Wähler wählt..!">
                    </td>
                </tr>
            </form>
        </table>

    </div>

<?php
    include "footer.php";
 ?>

The JS script uses yet another php file -> getStudiengang.php. Here's its code:

<?php
$q = intval($_GET['q']);

include ("DbVerbindung.php");

$sql = "SELECT * FROM studiengang WHERE fs_b = '" . $q . "'";
$result = mysql_query($sql);

echo "<select size='1' name='studiengang'>";

while ($row = mysql_fetch_array($result)) {

    echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}

echo "</select">;
?>

And last but not least, the php the values should get passed to (speichern.php):

if ($_POST[waehlt]) {
        $uhrzeit = date('G:i:s');
        echo "Wähler tritt seine Wahl an. Uhrzeit: $uhrzeit<br>";
        echo "Übergebene Daten:<br>";
        echo "Fachbereich: ";
        $sql = "SELECT * FROM bereich where b_id = '" . $_POST[fachbereich] . "'";
        $result = mysql_query($sql);

        while ($row = mysql_fetch_array($result)) {
            echo "$row[1]<br>";
        }

        echo "Studiengang: ";
        echo $_POST['studiengang'];
        /*$sql = "SELECT * FROM studiengang where s_id = '" . $_POST[studiengang] . "'";
        $result = mysql_query($sql);

        while ($row = mysql_fetch_array($result)) {
            echo "$row[1]<br>";
        }
        */
        echo "Geschlecht: ";
        $sql = "SELECT * FROM geschlecht where g_id = '" . $_POST[geschlecht] . "'";
        $result = mysql_query($sql);

        while ($row = mysql_fetch_array($result)) {
            echo "$row[1]<br>";
        }

        echo "Wahllokal: ";

        $sql = "SELECT * FROM lokal where l_id = '" . $_POST[lokal] . "'";
        $result = mysql_query($sql);

        while ($row = mysql_fetch_array($result)) {
            echo "$row[1]<br>";
        }

    }

Note that all variables except the 'studiengang' variable (which happens to be dynamically generated) gets passed and displayed just fine. Any help will be appreciated!

Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59
  • 1
    Language mixing, SQL injections here and there, german naming in variables and file names, legacy MySQL library that will be deprecated, commented out code and html layout in tables. It has absolutely everything... :( – Chris Hasiński May 29 '14 at 09:30
  • The SQL commands are working just fine and so does the code, except for that one and only variables which, for whatever reason, does not get passed to PHP. I googled around, but can't figure the problem. It obviously has to do with the dynamically created field, however, I don't know why. Don't mind the language mixing - Code is the same in all languages. – Philipp Meissner May 29 '14 at 09:33
  • Every example I can find of dynamically constructed forms using pure javascript (I usually rely on jQuery for this) uses `.appendChild()`, presumably because it lets the browser know where the form element is... – serakfalcon May 29 '14 at 09:35
  • 1
    Please be aware that the mysql extension (supplying the mysql_ functions) has been deprecated since 2012, in favor of the mysqli and PDO extensions. It's use is highly discouraged. See http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php – Oldskool May 29 '14 at 12:19
  • We are very aware of that and would love to use the latest functions as of today, however, the client we're working for still uses PHP 5.3 thus it needs to be done this way. Besides that, you're absolutely correct and I thank you for your input. – Philipp Meissner May 29 '14 at 13:59
  • Please also be aware that the presented code has multiple points of entrance for an SQL Injection attack and therefore shouldn't be used in production system. – Chris Hasiński Jun 16 '14 at 09:34
  • Thanks. We are very aware of it and already re-worked the whole code to remove the possibility to attack the system. – Philipp Meissner Jun 16 '14 at 14:26

2 Answers2

0

You will need to use .appendChild so the browser understands that the item is added to the form. To make the fewest modifications to your code that should still work,

replace document.getElementById("gang").innerHTML=xmlhttp.responseText; with:

var gang = document.getElementById("gang");
while (gang.firstChild) {
    gang.removeChild(gang.firstChild); //clear all elements
}
var div = document.createElement('div'); 
/*make a div to attach the response text to
if you didn't send the select in the responseText, you could createElement('select')*/
div.innerHTML = xmlhttp.responseText;
gang.appendChild(div); //attach the select
serakfalcon
  • 3,501
  • 1
  • 22
  • 33
  • Thanks for the effort, unfortunately it still does not show up after submitting :( – Philipp Meissner May 29 '14 at 09:49
  • Considering that it displays all information just fine on the first php page (request.php) I do think yes. The HTML code looks all fine as well when inspecting with Chrome/FireBug. We were able to crop the problem down to the transmission. Everything else works just fine. All other variables get displayed without any problem. Only the JS-generated content does not seem to get transmitted properly.. – Philipp Meissner May 29 '14 at 09:59
  • We finally resolved the issue. For whatever reason it was necessary to 'hardcode' the select-box in HTML already and have it not created dynamically by Javascript. Javascript now does only dynamically generate the option-fields within the section, this does in fact solve the issue. Being a user with less than 10 reputation we will have to wait 7 more hours until we can answer our question with the whole code. – Philipp Meissner May 29 '14 at 11:12
  • that's strange, you shouldn't need to. I'll have to look into that myself, i can't seem to replicate it. – serakfalcon May 29 '14 at 14:13
0

We finally resolved the issue. For whatever reason it was necessary to 'hardcode' the select-box in HTML already and have it not created dynamically by Javascript. Javascript now does only dynamically generate the option-fields within the section, this does in fact solve the issue.

Latest version with changes already applied: JavaScript in request.php:

<script>
        function showUser(str) {
            if (str=="") {
                document.getElementById("gang").innerHTML="";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            } else { // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    document.getElementById("gang").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","getStudiengang.php?q="+str,true);
            xmlhttp.send();
        }

        </script>

Request.php (important piece of code):

<form action="save.php" method="POST">
    <tr>
        <td>Studiengang:</td>
        <td>
            <select id="gang" size="1" name="studiengang"></select>
        </td>
    </tr>
</form>

getStudiengang.php:

<?php

$q = intval($_GET['q']);

include ("DbVerbindung.php");

$sql = "SELECT * FROM studiengang WHERE fs_b = '" . $q . "'";
$result = mysql_query($sql);

while ($row = mysql_fetch_array($result)) {

    echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}


?>

Thanks for all the help. The answer given by serakfalcon has a good point and may be useful later on. It's not an requirement though.

Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59