K3n5
K3n5

Reputation: 49

How to trigger AJAX from a search button

I have the following Javascript:

<script>
function showtickets(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "/processes/editticket.php?WTNum=" + str, true);
    xmlhttp.send();
}

It works perfectly if I use a selectbox and trigger the function with "onchange". However, my client requested a searchbox instead. I cannot get it to work with a search box. Here is my HTML for the search box and the div where the results should go.

    <form class='form-horizontal col-xs-12 col-md-12 col-lg-12' name="editticket" method="post" action="/processes/updateticket.php">
   <div class='panel panel-primary'>
        <div class='panel-heading'>
            <h3 class='panel-title'>Edit Work Tickets</h3>
        </div>

            <div class='panel-body'>
                <div class="input-group">

    <span class="input-group-addon">Enter Ticket #</span>
                            <input type="text" class="form-control" id="search" name="WTNum" >
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" onclick="showtickets(document.getElementById('search').value)">Search</button>
                            </span>

                 <div id="txtHint"><b></b></div>

</form>

Am I missing something!! This is driving me INSANE!! Thank you all in advance. It is greatly appreciated.

Upvotes: 0

Views: 1643

Answers (2)

tuan huynh
tuan huynh

Reputation: 727

I think you must you javascript debug or alert in some scope to find where error

Upvotes: 0

Khalid
Khalid

Reputation: 4808

Why not just call the showtickets function without arguments and then inside the function you do this

str = document.getElementById('search').value;

Upvotes: 1

Related Questions