CODEWITHSUNDEEP
phpjavascripthtmlajax
Nickolas Shaffer
Nickolas Shaffer

Reputation: 209

AJAX / Javascript fails to update webpage

Ive written some ajax code and its not updating the webpage. Its supposed to grab a form from a folder and replace the form showing on the webpage. However when i press the button thats linked to the javascript nothing happens at all.

Javascript:

function LoadManagerForm()
{
    document.getElementById('insert_response').innerHTML = "Loading..."
    nocache = Math.random()
    http.open('get', '../forms/managerform.php?nocache='+nocache);
    http.onreadystatechange = insertReply;
    http.send(null);
}
function insertReply() 
{
    if(http.readyState == 4){ 
    var response = http.responseText;
    document.getElementById('insert_response').innerHTML = response;
}

Webpage:

    <section class="grid col-three-quarters mq2-col-two-thirds mq3-col-full">
        <h2>Login</h2>
        <div id="insert_response">
        <p class="warning">Are you a manager? <a onclick="javascript:LoadManagerForm()" class="button" href="javascript:void(0);">Click here to login!</a></p>

        <form id="emplogin" class="contact_form" action="#" method="post" name="emplogin">  
            <ul>
                <li>
                    <label for="store">Store ID:</label>
                    <input type="text" name="store" id="store" required class="required" >
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" required placeholder="[email protected]" class="required email">
                </li>   
                <li>
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" required class="required">
                </li>
                <li>
                    <button type="submit" id="submit" name="submit" class="button fright">Login</button>
                </li>   
            </ul>           
        </form>
        </div>
    </section>

Upvotes: 1

Views: 81

Answers (1)

Angelo Saleh
Angelo Saleh

Reputation: 622

I recomend you to use Jquery it is simple:

include in you html within the head tag:

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

then change your javascript function by the following:

function LoadManagerForm()
{
    document.getElementById('insert_response').innerHTML = "Loading..."
    nocache = Math.random();
    $.post(
        '../forms/managerform.php?nocache='+nocache,
        {
            nocache : nocache
        },
        function(response)
        {
            document.getElementById('insert_response').innerHTML = response;
        }
    );
}

Upvotes: 1

Related Questions