Using PHP within Javascript to create dynamic form

Question

I want to add a drop down menu on click to my page via java script however when added it does not retrieve the mysql value it just prints the code inside the drop down. Any suggestions:

Index.php

<script src="addInput.js" language="Javascript" type="text/javascript"></script>


<?php

include 'config.php';
include 'opendb.php';

$sql = "SELECT fullname FROM test";
$result = $conn->query($sql);
echo "<form action='process.php' method='post' <div id='dynamicInput'>
<select name='competitor1'>";
while ($row = $result->fetch_array()) {
$name = $row['fullname'];
echo "<option value='" . $row['fullname'] . "'>" . $row['fullname'] . "    </option>";
}
echo "</select> </div>";

echo "<input type='submit' /></form>";

?>
  <input type="button" value="Add another text input"      onClick="addInput('dynamicInput');">

addInput.js

var counter = 1;
var limit = 3;
function addInput(divName){
 if (counter == limit)  {
      alert("You have reached the limit of adding " + counter + " inputs");
 }
 else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = "Entry " + (counter + 1) 
      + "<?php mysqli_data_seek($result, 0); ?>"
      + "<br><select name='competitor2'>" 
      + "<?php while ($row = $result->fetch_array()) { echo \"<option value=\" . $row['fullname'] . \"/>\" . $row['fullname'] . \"</option>\";} ?>" + "</select>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
    }
 }

All I can say is "PHP runs on server-side; JS runs on client-side." This type of questions appear far too often. Please read: http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming — light, Jul 04 '15 at 15:52
Ah apologies guys, would you be able to point me in the right direction at all? — lukayeh, Jul 04 '15 at 16:22

score 0 · Answer 1 · answered Jul 04 '15 at 17:28

Although what you intend to do is not totally clear, however it seems you need to learn AJAX - in layman's term, a technology that can be used to load data dynamically without having to load an entirely new page. I suggest you look at the basics of jquery, it is relatively easy to learn.

The reason why it prints the code inside the drop down is because PHP can not be processed on the client by javascript hence the need for ajax.

Another method you can use (crude and cumbersome) is to retrieve all the data you will require first before making the javascript calls, then pass those data to javascript via JSON

score 0 · Accepted Answer · answered Jul 04 '15 at 17:49

This is script could help you.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</script>
<script>

    $( document ).ready(function() {
        $("#keyword").keyup(function() {
            var keyword = $("#keyword").val();
            if (keyword.length >= MIN_LENGTH) {
                $.get( "sqlquery.php", { keyword: keyword } )
                .done(function( data ) {
                    $('#data').html('');
                    var data = jQuery.parseJSON(data);
                    $(data).each(function(key, value) {
                        $('#data').append('<option value="' + value + '">' + value + '</option>');
                    })

                    $('.item').click(function() {
                        var text = $(this).html();
                        $('#keyword').val(text);
                    })

                });
            } else {
                $('#data').html('');
            }
        });

        $("#keyword").blur(function(){
                $("#data").fadeOut(500);
            })
            .focus(function() {     
                $("#data").show();
            });

    });
      </script>

sqlquery.php

<?php
     mysql_connect("localhost", "username",  "password");
    if(! $conn )
    {
      die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('database');
    /* If connection to database, run sql statement. */
    $searchword = $_GET['select'];
        $fetch = mysql_query("SELECT word
                FROM table
            word='$searchword'
            ORDER BY word");

        /* Retrieve and store in array the results of the query.*/
        while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
            $data[] = $row['word'];
        }

    echo json_encode($data); //This is what will be sent to the script above

    ?>

Using PHP within Javascript to create dynamic form

2 Answers2