CODEWITHSUNDEEP
javascriptajaxforms
Khrys
Khrys

Reputation: 2774

Ajax submit using a button

I am using the code from this page: http://www.w3schools.com/ajax/ajax_database.asp to build my ajax solution.

I am getting there, but this code use onchange, I would like to use a button to submit, instead.

One of my tries:

<!DOCTYPE html>
<html>
<head>
<script>
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">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
<input name="Submit1" type="submit" onclick="showCustomer(this.value)" />
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

Upvotes: 0

Views: 145

Answers (3)

andrew
andrew

Reputation: 9583

they have the event attached to the select so you can just move it to the form instead

<form action="" onsubmit="showCustomer(document.getElementById('customers')).value);return false"> 
  <select id="customers" name="customers">
  <option value="">Select a customer:</option> 
  <option value="ALFKI">Alfreds Futterkiste</option>
  <option value="NORTS ">North/South</option>
  <option value="WOLZA">Wolski Zajazd</option>
 </select>
 <input type="submit"/>
</form>

Edit:

Oh, and add a submit button

Upvotes: 1

VtoCorleone
VtoCorleone

Reputation: 17203

onchange is an event on a select element.

Just tie that event into a button element.

<button onclick="showCustomer()">Submit</button>

and then get the desired customer in the showCustomer() method

function showCustomer()
{
    var str = document.getElementById("customers").value;
    .
    .
    .
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();
}

Upvotes: 1

yesnault
yesnault

Reputation: 900

Something like that :

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer()
{
var xmlhttp;    
var str = document.getElementById("customers").value;
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>


<select name="customers">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
<input name="Submit1" type="button" onclick="showCustomer()" />

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

</body>
</html>

But you should try Jquery to avoid verbose syntax document.getElementById

Upvotes: 0

Related Questions