calling jquery ajax() with drop down menu?
im working a domain check script it works fine when i call ajax on keyup but by default the dropdown has the .com what if the user chooses a domain that is already taken, how can i get this script to do another check when the users switch from .com to .net or .org?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/JavaScript'>
$(document).ready(function () {
var validateUsername = $('#validateUsername');
$('#domain').keyup(function () {
var domain = $('#domain').val();
var tld = $('#tld').val();
if (this.value != this.lastValue) {
if (this.timer) clearTimeout(this.timer);
validateUsername.removeClass('error').html('checking...');
this.timer = setTimeout(function () {
$.ajax({
url: 'DomainCheck.php',
data: 'domain=' + domain + '&tld=' + tld,
dataType: 'json',
type: 'post',
success: function (j) {
validateUsername.html(j.msg);
}
});
}, 3500);
this.lastValue = this.value;
}
});
});
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>choose your domain</legend>
<div>
<span class="httpFont">http://www.</span>
<input type="text" name="domain" value="" id="domain" autocomplete="开发者_StackOverflow社区off" />
<select id="tld" name="tld">
<option selected="selected" value="com">.com</option>
<option value="net">.net</option>
<option value="org">.org</option>
</select> <span id="validateUsername"></span>
</div>
</fieldset>
<input type="hidden" name="action" value="register" />
<div class="submit">
<input type="submit" alt="Submit button">
</form>
</body>
</html>
Something like this:
$('select[name="tld"]').change(function() {
//your ajax code
});
That would of course duplicate your code, so I would recommend wrapping it inside a function.
thanks for replaying, i wrapped it into a function and it works until the second request
for example default .com i change to .net it does not work and the i change to .org and then it starts to work. also I am logging all check in MySQL and its creating duplicate entries
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/JavaScript'>
$(document).ready(function () {
var validateUsername = $('#validateUsername');
$('#domain').keyup(function () {
var domain = $('#domain').val();
var tld = $('#tld').val();
if (this.value != this.lastValue) {
if (this.timer) clearTimeout(this.timer);
validateUsername.removeClass('error').html('checking...');
this.timer = setTimeout(function () {
$.ajax({
url: 'DomainCheck.php',
data: 'domain=' + domain + '&tld=' + tld,
dataType: 'json',
type: 'post',
success: function (j) {
validateUsername.html(j.msg);
}
});
}, 3500);
this.lastValue = this.value;
}
});
});
</script>
<script type="text/javascript">
function checkDom(){
var validateUsername = $('#validateUsername');
$('select[name="tld"]').change(function() {
var domain = $('input[name="domain"]').val();
var tld = $('select[name="tld"]').val();
validateUsername.removeClass('error').html('checking...');
$.ajax({
url: 'DomainCheck.php',
data: 'domain=' + domain + '&tld=' + tld,
dataType: 'json',
type: 'post',
success: function (j) {
validateUsername.html(j.msg);
}
});
});
}
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>choose your domain</legend>
<div>
<span class="httpFont">http://www.</span>
<input type="text" name="domain" value="" id="domain" autocomplete="off" />
<select onchange="checkDom()" id="tld" name="tld">
<option selected="selected" value="com">.com</option>
<option value="net">.net</option>
<option value="org">.org</option>
</select> <span id="validateUsername"></span>
</div>
</fieldset>
<input type="hidden" name="action" value="register" />
<div class="submit">
<input type="submit" alt="Submit button">
</form>
</body>
</html>
加载中,请稍侯......
精彩评论