Query database with Ajax and classic ASP

I'm trying to modify a script from w3scools to use a combination of asp and ajax to query a database and return results.

Here is the code:

<html>
<head>
<script type="text/javascript">
function showCustomer(str)
{
    var xmlhttp;    
    if (str=="")
    {
        document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
    <select name="customers" onchange="showCustomer(this.value)">
        <option value="">Select a customer:</option>
        <option value="ALFKI">Alfreds Futterkiste</option>
    </select>
</form>
<br />

<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

I would like to replace the select field with 2 input fields.

Can someone please tell me how to amend the javascript so that both the input values are passed with the querystring and what needs to be changed on the form to call the function.

Thanks

Answers:

Answer

It depends exactly how you want the page to operate. Can you be a bit more specific?

When you say 'input values' do you mean a text box?

I'm assuming in the following example that you'll have two fields and a button for submitting:

<form action=""> 
    <label for="MyTextBox1>Enter some text:</label>
    <input type="text" id="MyTextBox1" />

    <label for="MyTextBox1>Enter some text:</label>
    <input type="text" id="MyTextBox2" />

    <input type="button" onclick="showCustomer();" />
</form>

The definition of your JavaScript function will change from

function showCustomer(str)

to

function showCustomer()

And you'll need to remove any associated str code.

To pick up these values use document.getElementById:

var val1 = document.getElementById("MyTextBox1").value);
var val2 = document.getElementById("MyTextBox1").value);
xmlhttp.open("GET","getcustomer.asp?q="+ val1 +"&r=" + val2 ,true);

This is very rough and ready, but a good starting point.

Answer

Depends on how you want to do it. Right now the script itself is triggered by the change event of the select element. If you replace that element, you'll need a different event to trigger the script. A button, perhaps? If that's the case, then probably the easiest way to do this is with jQuery:

Field 1: <input id="text1" type="text" />
Field 2: <input id="text2" type="text" />
<input id="buttonSend" type="button" value="Send" />
<script type="text/javascript">
  $(document).ready(function() {
    $('#buttonSend').click(function() {
      $.get('getcustomer.asp?text1=' +
          $('#text1').val() + '&text2=' + $('#text2').val()
      );
    });
  });
</script>

There's more you can do with the $.get() function, documented here, which is really just shorthand for the $.ajax() function, documented here. The former is shorter, the latter gives you more options and control.

(Note also that if you want to use other JavaScript libraries as well, you may want to replace the $ alias with jQuery in the above code to avoid confusion.)

Notice a benefit here is that it de-couples the script (which can be put in a separate file if need be) from the markup. As an overall design paradigm, this is generally preferred over the onchange="someFunctionCall()" syntax in the markup.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.