How to pass user input value from a PHP page to HTML page using AJAX

Question

I have a course table in the database which stores course information (i.e. code, name, date and description). Admin is allowed to update the course information. Let's assume that a course information is already in my database and the admin intends to update the course info.

When he heads to the Update page (pls see managemodule.php), my page will show him a dropdown options with a list of courses that are in the database. He will then choose a particular course from the dropdown list and then the course information will be shown (achieved thru' ajax) in different HTML input fields (info is output thru. the placeholder attr.).

What I want to achieve here is that, admin can update whatever info they want in the input fields directly, and when he presses 'update', these data will be sent over and update in my database.

However I failed to do so. I know it's the problem of the ajax code in managemodule.js. The course table in the database has 4 columns which is code, name, date and description

managemodule.php:

<form id="moduleform" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <h2 class="fs-title">Module Info Update</h2>
    <p>Please select a module for more information:</p><br />

    <select id="modulelist" name="module" onchange="showModuleInfo(this.value)">
        <option>-- Select a module --</option>
        <option value="CS2102">Database Systems</option>   ***hard coded here for simplicity*****
    </select>

<?php    ****This php part is not updating my course table********
            if(isset($_POST['update']))
            {   
                mysql_query("UPDATE module SET code = '".$_POST['update_moduleCode']."' ");
            }
?>


    <div id="moduleinfo"><b><-- Module info will be listed here --></b></div>   
</form>

managemodule.js:

function showModuleInfo(str)
{
    if (str == "")
    {
        document.getElementById("moduleinfo").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("moduleinfo").innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","moduleinfo.php?q="+str,true);
    xmlhttp.send();
}

moduleinfo.php

    session_start();

    $q = $_GET['q'];
    $result = mysql_query("SELECT * FROM module WHERE code = '".$q."'");

    while($row = mysql_fetch_array($result))
    {
        echo '<input type="text" name="update_moduleCode" placeholder="Module Code" value="'.$row['code'].'" required />';
        echo '<input type="text" name="update_moduleTitle" placeholder="Module Name" value="'.$row['name'].'" required />';
        echo '<textarea name="update_moduleDescription" rows="14" placeholder="Module Description" required></textarea><br />';
        echo '<input type="submit" name="update" class="next action-button" value="Update" />'; 

*****I guess this 'Update' button is not passing the user input to my managemodule.php
    }

The php part in managemodule.php above is not working (means it doesnt update my course table). I guess it is because the 'Update' button is not passing user input to managemodule.php. I used $_POST['update_moduleCode'] wanted to get the value from moduleinfo.php but I didnt manage to get.

So how am I supposed to pass the input from moduleinfo.php to managemodule.php

What are the actual file names and are these all three separate files or did you cut and paste certain parts from the same file — Deryck
– Deryck, Commented Jan 25, 2014 at 13:04
Let me be more clear: Is this "HTML" page actually a PHP file with HTML code mixed with PHP or is it actually an HTML file like index.html or something — Deryck
– Deryck, Commented Jan 25, 2014 at 13:06
@Deryck Sorry I should have made it clear. It's a PHP file actually with HTML codes in it. All these 3 are separate files. — SCC
– SCC, Commented Jan 25, 2014 at 13:10
While I continue writing this monologue, go ahead and remove action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" from your <form> and see what happens when you change the module again. — Deryck
– Deryck, Commented Jan 25, 2014 at 13:19
Because you have "?q="+str and don't need it. You put str inside of send() if you're using POST - so your new code will be xmlhttp.open("POST", "moduleinfo.php", true); xmlhttp.send(str); — Deryck
– Deryck, Commented Jan 25, 2014 at 14:24

Community · Accepted Answer · 2023-11-14 22:34:04Z

3

It appears that in moduleinfo.php file your update button is doing nothing when you click it. That's because it is not inside a HTML form and there is nothing binded to the onclick event. You should either create a function like showModuleInfo() but POSTing the data to a separate PHP file (that will update the database) or create a HTML form in moduleinfo.php that POST data to managemodule.php.

Despite that, I have some considerations about your code:

PHP extension mysql is deprecated

According to PHP documentation ( https://www.php.net/manual/en/intro.mysql.php ) this extension is deprecated. You should use mysqli or pdo_mysql instead.

Your code is vulnerable to SQL injection

Note that you are using a information from $_GET directly into a MySQL query.

$q = $_GET['q'];
$result = mysql_query("SELECT * FROM module WHERE code = '".$q."'");

It makes your code vulnerable to a kind of attack named SQL injection. Instead, you should treat variables got from $_POST and $_GET with mysqli_real_escape_string ( https://www.php.net/manual/en/mysqli.real-escape-string.php ) or using PDO prepared statements ( https://www.php.net/manual/en/pdostatement.execute.php ).

You are mixing your business logic with the view (HTML code)

You are writing both the business logic code and the view code (HTML) in the same file. It makes your application very hard to maintain. You should have a look at some design patterns, starting with MVC (Model-View-Controller).

You are writing pure javascript code

Well, that's not exactly a bad thing. But you should consider that there are inconsistencies between browsers and sometimes, writing pure javascript code, your code may work in a browser but not in another. You should consider taking a look in the available javascript frameworks (I recommend jQuery), they take care of these inconsistencies and also have a lot of ready functionality.

edited Nov 14, 2023 at 22:34

CommunityBot

11 silver badge

answered Jan 25, 2014 at 14:25

rafaame

8222 gold badges12 silver badges22 bronze badges

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

3 Comments

SCC Over a year ago

Thank you so much for your detailed explanation! I have learnt a lot :)

SCC Over a year ago

A quick question sir. Do you know what is the reason that I couldnt pass any variable in moduleinfo.php to managemodule.php? For instance, if I do $_SESSION['q'] = $q, even if I called $_SESSION['q'] in managemodule.php, I wasnt able to get any values. Any idea?

rafaame Over a year ago

Are you calling session_start() in both moduleinfo.php and managemodule.php? Note that this function should be called in the very top of the file, before any content is sent to the client.

Collectives™ on Stack Overflow

How to pass user input value from a PHP page to HTML page using AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related