在类似 AJAX 的场景中单击单选按钮后未选中
我有一个文本字段，其更改事件绑定到一个验证文本字段值的函数，并且可以将相应的验证错误消息拼接到文本字段上方的 DOM 中。如果通过单击一对有些不相关的单选按钮中的一个来触发更改事件，则单击的单选按钮将获得焦点，但与我和用户的预期相反，它不会被选中 - 这就是问题所在。
虽然最终系统中的验证将使用 AJAX 在服务器端进行，但以下代码表明 AJAX 与该问题无关。
你能告诉我我在这里缺少什么吗：
<html>
<head>
<STYLE type="text/css">
.highlighted { color: red; }
</STYLE>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<span id="errors">
</span>
<label for="mytextfield">First, type something in this textfield</>
<input type="text" id="mytextfield" name="mytextfield"/>
<p>Second, click on one of these radio buttons</>
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" >Yes</>
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" >No</>
<script type="text/javascript">
$(document).ready(function() {
//$("#mytextfield").change(validateTextField);
$("#mytextfield").change(spliceInTheValidationResultMessage);
});
function validateTextField() {
$.ajax({
url: 'http://www.google.com',
success: function(data) {
spliceInTheValidationResultMessage();
}
});
}
function spliceInTheValidationResultMessage() {
$("#errors").append("<p>Thank you for your input!</p>").addClass("highlighted");
alert("I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!");
};
</script>
</body>
</html>
I have a textfield for which change events are bound to a function that validates the textfield's value and may splice a corresponding validation error message into the DOM above the textfield. If the change event is triggered by clicking one of a pair of somewhat unrelated radio buttons, the radio button that is clicked gains the focus but, against my and users' expectations, does not become checked - this is the problem.
Although the validation in the final system will be carried out server-side using AJAX, the following code demonstrates that AJAX has nothing to do with the problem.
Can you tell me what I'm missing here:
<html>
<head>
<STYLE type="text/css">
.highlighted { color: red; }
</STYLE>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<span id="errors">
</span>
<label for="mytextfield">First, type something in this textfield</>
<input type="text" id="mytextfield" name="mytextfield"/>
<p>Second, click on one of these radio buttons</>
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="Y" >Yes</>
<INPUT TYPE="radio" NAME="binaryquestion" VALUE="N" >No</>
<script type="text/javascript">
$(document).ready(function() {
//$("#mytextfield").change(validateTextField);
$("#mytextfield").change(spliceInTheValidationResultMessage);
});
function validateTextField() {
$.ajax({
url: 'http://www.google.com',
success: function(data) {
spliceInTheValidationResultMessage();
}
});
}
function spliceInTheValidationResultMessage() {
$("#errors").append("<p>Thank you for your input!</p>").addClass("highlighted");
alert("I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!");
};
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
抱歉，我在遵循您尝试做的事情时遇到了一些麻烦，但是您正在尝试做这样的事情吗？
我只是简单地将 id 属性添加到单选按钮输入中，并在它们上使用 jQuery bind() 方法。您可能想要更改 validateTextField() 函数，以便它获取文本字段中的文本。
I'm sorry, I had a bit of trouble following what you are trying to do, but are you trying to do something like this?
I just simply added id attributes to your radio button inputs and used the jQuery bind() method on them. You'll probably want to change the validateTextField() function so that it grabs the text in the text field.