How to produce dynamic div id? in PHP/JAVASCRIPT/MYSQL

Question

I have an ajax code that displays data from table columns when a data is chosen from the dropdown.

surveycontent.php

<script type="text/javascript">

    function showUser(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            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 (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET","hay.php?q="+str,true);
            xmlhttp.send();
        }
    }
</script>

ajax.php. I have a textbox that generates dropdowns based on how many the user input

    if($question !="" && $cnt!="" && $addQues!="yes" && $main == 1){
        $i = 0;
        for ($i = 1; $i <= $cnt; $i++)
        {
            $query=mysqli_query($con, "SELECT question.* FROM question LEFT JOIN category AS subcategory on subcategory.category_id = question.question_subcat WHERE question.question_category = $question AND (question.question_subcat IS NULL OR subcategory.category_id IS NOT NULL)");
            echo "<form><b id='labelquestion_dropdown'>Question #". $i."</b>";
            echo "<select id='question_dropdown".$i."' class='form-control' onchange='showUser(this.value)' style='width: 300px;' name='question_dropdowns".$i."'>";
            echo "<option selected>"; echo "Select"; echo "</option>";
            while($row=mysqli_fetch_array($query))
            {
                    echo "<option value='$row[question_id]'>";
                    echo $row["questiontitle"];
                    echo "</option>";

            }
            echo "</select></form>";
            echo  "<div id='txtHint'><b>Person info will be listed here...</b></div>";
            echo "<br />";

        }

        echo "<div id='insertQuesHere".$i."'></div>";

        echo "<a href='#add_question' onclick='return addQues_Cat();'>Add Question</a> | ";
    echo "<a href='#del_question' onclick='return delQues();'>Delete Question</a>";
}

hay.php

<?php

$con = mysqli_connect('localhost','root','','imetrics') or die ("Cannot connect to database");
if(!$con){
    echo ('Could not connect: ' . mysqli_error($con));
}

$id= isset($_GET["q"])?intval($_GET["q"]):"";

$query = mysqli_query($con, "SELECT * FROM question WHERE question_id = '".$id."'");

function displayOption($i, $value, $answer_type) {
    if($value == null) {
        return;
    }

    if($answer_type == "radiobutton") {
        echo '<input type="radio" name="rinput" value="'.htmlspecialchars($value, ENT_QUOTES).'">'.htmlspecialchars($value).'<br>';
    } else if($answer_type == "checkbox") {
        echo '<input type="checkbox" name="cinput['.$i.']" value="'.htmlspecialchars($value, ENT_QUOTES).'">'.htmlspecialchars($value).'<br>';
    }
}

while($row = mysqli_fetch_assoc($query)) {
    for($i = 1; $i<=10; ++$i) {
        displayOption($i, $row["Option_$i"], $row['answer_type']);
    }
}

?>

I have a textbox that generates dropdowns based on the user input. For example, I generated 3 dropdowns, I need to make it possible that hay.php will display data for each of the dropdowns when clicked. Atm it's only showing 1 whichever dropdown I use to choose from. I think the problem is I only have 1 id for the <div id='textHint'> or is it a different problem?

DOM elements must have unique ID attributes if they are to have an an ID at all - you cannot have multiple divs with the ID txtHint — Professor Abronsius
– Professor Abronsius, Commented Jun 28, 2017 at 14:01
yes agree with @RamRaider You cant assign mulitiple same id. i Suggest you to assign this as class and check as document.getElementsByClassName(txtHint) or $(".txtHint").val() — Jaykumar Gondaliya
– Jaykumar Gondaliya, Commented Jun 28, 2017 at 14:08
The div part is where I display the data from hay.php to start with. I need it to display under each dropdown. Can you show me sample of code on how I will put that code sir? @JaykumarGondaliya — Jola
– Jola, Commented Jun 28, 2017 at 14:15
I changed my document.getElementByID to document.getElementsByClassName but it didn't display anything it all when i chose data from dropdown @RamRaider — Jola
– Jola, Commented Jun 28, 2017 at 14:25
@Jola You Mention here I need it to display under each dropdown — Jaykumar Gondaliya
– Jaykumar Gondaliya, Commented Jun 28, 2017 at 14:36

Professor Abronsius · Accepted Answer · 2017-06-28 15:16:15Z

1

One "hacky" way you could do this ( if I understood the problem correctly ) would be to assign a unique id to the various generated DIV elements and supply that ID as a second argument to your ajax function.

/* note 2nd parameter - id */
function showUser(str,id) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        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 (this.readyState == 4 && this.status == 200) {
                /* use id supplied */
                document.getElementById(id).innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","hay.php?q="+str,true);
        xmlhttp.send();
    }
}

And the PHP code

for( $i = 1; $i <= $cnt; $i++ ){
    $query=mysqli_query($con, "SELECT question.* FROM question LEFT JOIN category AS subcategory on subcategory.category_id = question.question_subcat WHERE question.question_category = $question AND (question.question_subcat IS NULL OR subcategory.category_id IS NOT NULL)");


    echo "
    <form>
        <b id='labelquestion_dropdown'>Question #{$i}</b>
        <select id='question_dropdown{$i}' class='form-control' onchange=\"showUser( this.value, 'txtHint{$i}' )\" style='width: 300px;' name='question_dropdowns{$i}'>
            <option selected>Select";

    while($row=mysqli_fetch_array($query)){
        echo "<option value='{$row['question_id']}'>" . $row["questiontitle"];
    }

    echo "
        </select>
    </form>
    <div id='txtHint{$i}'><b>Person info will be listed here...</b></div>
    <br />";
}

You might notice the missing </option> from the above - it's not necessary to use it so I tend to omit it.

answered Jun 28, 2017 at 15:16

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jola Over a year ago

Sir I'm getting this error, unexpected 'showUser' (T_STRING), expecting ',' or ';' in C:\xampp\htdocs\imetricslatest\ajax.php on line 35. I think this part is causing that onchange=\"showUser( this.value, 'txtHint{$i}' )\" @RamRaider

Professor Abronsius Over a year ago

:) no problem - I was just trying to find the error but seems to work fine here. Like I say - it is a bit "hacky" but if it works then it can't be all bad

Jola Over a year ago

It's pretty amazing bro :) I was wondering if you could help me out with one more problem. Like give me ideas. Maybe chat? @RamRaider

Professor Abronsius Over a year ago

what's the other problem?

Jola Over a year ago

Duplicating a div with onclick button @RamRaider

|

Jaykumar Gondaliya · Accepted Answer · 2017-06-28 14:29:34Z

0

Okay! If You wanna to put your div in Drop-down. You may try this in Your code echo "<option class="HINT"><div id='txtHint'><b>Person info will be listed here...</b></div></option>";

<select>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option><div>THIS IS DIV</div></option>
</select>

answered Jun 28, 2017 at 14:29

Jaykumar Gondaliya

3513 silver badges17 bronze badges

1 Comment

Jola Over a year ago

I don't want to put div in my dropdown. I want it to display under in all dropdowns and not just 1 in total.

Collectives™ on Stack Overflow

How to produce dynamic div id? in PHP/JAVASCRIPT/MYSQL

2 Answers 2

10 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related