Adding Ajax to PHP

Question

brandon66 0 Expert in Progress

11 Years Ago

Hello everyone i have two forms that are similiar the only difference is the rma number. One RMA number will get typed in by the user which will add it to the database and the second one, the user will select an rma number from the database(dropdown menu). What i want the second one to do is use ajax to populate the form with data from mysql from that rma number.

This is the form i will select the rma  number: 



<?php
        //connect to the database
        include('Model/DBAdapter.php');

        //create sql statement
        $sql = "SELECT RMA_Number FROM INC_Test";
        //Retrieve data
        $result = $connection->query($sql);

        //process results
        if ($result){
        //loop through data
        while ($number = $result->fetch()){
        $numbers[] = $number;
         } 
         include 'View/IncomingUpdate.html.php';

        } else {

        $output = "No RMA Number found in database.";
        include 'View/IncomingOutput.html.php';
        }
?>




<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Styles/inc.css"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Incoming Update</title>
</head>
<body>
<form id="incUpdateForm" action="" method="post">
<fieldset>
<legend>RMA Incoming Test Update</legend>
         <ul>
            <li>
                    <label>RMA Number:</label>
                    <select id="rmaNumber" name="rmaNumber" onchange="???">
                    <option>Choose an RMA Number:</option>
                    <?php foreach($numbers as $number):?>
                    <option value="<?php echo $number['RMA_Number'];?>"><?php echo $number['RMA_Number'];?></option>
                    <?php endforeach; ?>
                    </select> 
              </li>
<li>
            <label>ISN:</label>
            <input  type="text" id="isn" name="isn" maxlength="12"  class="validate[required],validate[custom[hex]]"/>
            </li>

            <li>
            <label>IDT Employee:</label>
            <select  id="employee" name="employee" class="validate[required]">
                    <option value="">Employee Name...</option>
                        <option value="1">Brandon McBride</option>
                        <option value="2">Keith Carlson</option>
                        <option value="3">Glenn Davis</option>
                        <option value="4">Andrea Shupe</option>
                        <option value="5">Adam Shupe</option>
                        <option value="6">Angelo Polisinelli</option>
                        <option value="7">Bob Poor</option>
                        <option value="8">Steve Uban</option>
                        <option value="9">Rod Redlin</option>
                        <option value="10">Erika Kaiser</option>
                        <option value="11">Liz</option>
            </select> 
        </li>

        <li> 
        <label>Check for Physical Damage:</label>
        <textarea id="damage" name="damage" rows=5 cols=30 maxlength="400" class="validate[required]"></textarea>     
        </li>

        <li>
            <label>Log:</label>
            <p id="red">Please take a Log of the unit with Scope.</p>
        </li>
        <li>
            <label>Board:</label>
            <select  id="board" name="board" class="validate[required]">
                    <option value="">Choose a Board Type...</option>
                        <option value="G1">G1</option>
                        <option value="G1 Plus">G1 Plus</option>
            </select>
            </li>
        <li>
            <label>Battery Voltage Test:</label>
            <input  type="text" id="voltage" name="voltage" maxlength="12"  />
            <select  id="voltage1" name="voltage1" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>

            <li>
            <label>Battery Serial Number:</label>
            <input  type="text" id="serial" name="serial" maxlength="12"  />
            <select  id="serial1" name="serial1" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>

        <li>
            <label>MCU Firmware Version:</label>
            <input  type="text" id="mcufw" name="mcufw" maxlength="12"  />
            <select  id="mcu1" name="mcu1" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>
        <li>
            <label>MCU Hardware Version:</label>
            <input  type="text" id="mcuhw" name="mcuhw" maxlength="12"  />
            <select  id="mcu2" name="mcu2" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>        
        <li>
            <label>DMR Firmware Version:</label>
            <input  type="text" id="dmrfw" name="dmrfw" maxlength="12"  />
            <select  id="dmr1" name="dmr1" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>
        <li>
            <label>DMR Hardware Version:</label>
            <input  type="text" id="dmrhw" name="dmrhw" maxlength="12"  />
            <select  id="dmr2" name="dmr2" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>
        <li>
            <label>DMR Script Version:</label>
            <input  type="text" id="script" name="script" maxlength="12"  />
            <select  id="script1" name="script1" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>
        <li>
            <label>Leak Test:</label>
            <select  id="leak" name="leak" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>
        <li>
            <label>Verification Test:</label>
            <select  id="verify" name="verify" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>
        <li>
            <label>Final Test:</label>
            <select  id="final" name="final" >
                    <option value="">Choose...</option>
                    <option value="Pass">Pass</option>
                    <option value="Fail">Fail</option>
            </select>
        </li>                        
        </ul>    
    </fieldset>          <p>
        <input type="submit" id="sub" value="Update"/>
        <input type="hidden" name="addMe" value="True" />
        </p>     
</form>
</body>

</html>

javascript php

Edited 11 Years Ago by brandon66

2 Contributors
2 Replies
244 Views
1 Week Discussion Span
Latest Post 11 Years Ago Latest Post by brandon66

mmcdonald 28 Posting Pro

11 Years Ago

Create another file called 'populate.php' or something similar, in this file you're going to write standard PHP that includes a DB connection, the collection of data, based on the users input, and then the population of fields.

This in your original file (where the dropdown and the table exists) add something like: <div id="populatedTable"></div>.

What you then want to do is call in the populate.php script using AJAX, but with a variable URL containing the value of RMA; something like this:

<div id="populatedTable"></div>

<script type="text/javascript">
    // reloads populated table every 10 seconds

    var auto_refresh = setInterval(
        function (){
            $('#populatedTable').load('populate.php?rma=<?php echo $rma; ?>');
        }, 10000
    );
</script>

Then in populate.php you need to use $_GET['rma'] and construct your MySQL query based on that value.

Instead of the 10 second refresh timer you can choose to make it refresh once after the users imput is detected from the dropdown using JQuery.

To be honest, you're bascially asking someone to teach you AJAX, and we can't do that, it's simply too much. Teach yourself JQuery and AJAX from YouTube or another tutorial and then come back when you need some help with your new code, only then will our help be genuinely beneficial to you.

Michael

Edited 11 Years Ago by mmcdonald

Reply to this topic

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.

brandon66 0 Expert in Progress · Answer 1 · 2013-09-30T19:39:52+00:00

brandon66 0 Expert in Progress

11 Years Ago

thank you