我有一个PHP表单，我试图在输入框txt1，txt1和txt3之后显示星号（如果它们为空）。它会在按下提交按钮后显示星号，但如果字段已经填满，我希望能够在按下按钮后删除星号。下面的代码似乎没有做到最后一点。
//variable declaration
var a = $("#txt1").val(),
b = $('#txt2').val(),
c = $("#txt3").val();
function asterisks() {
if (a == ""){
document.getElementById("err_txt1").innerHTML = "*";
}
else if (a != ""){
document.getElementById("err_txt1").innerHTML = "";
}
if (b == ""){
document.getElementById("err_txt2").innerHTML = "*";
}
else if (b != ""){
document.getElementById("err_txt2").innerHTML = "";
}
if (c == ""){
document.getElementById("err_txt3").innerHTML = "*";
}
else if (c != ""){
document.getElementById("err_txt3").innerHTML = "";
}
}
我错过了什么？有更好的方法吗？只要字段填满而不必按下按钮，是否可以删除星号？如果是，怎么样？
示例字段HTML
<style>
.err {
color: #FF0000;
}
</style>
<td><h3>Subject</h3></td>
<td><b id="err_txt1" class="err"></b><input type="text" id="txt1" name="txt1" placeholder="Subject" >
</td>
提交表单
$("#form1").submit(function(e){
e.preventDefault();
asterisks();
}
答案 0 :(得分：1)
你可以这么简单：
function asterisks() {
$("input[id^=txt]").each(function() {
var id = $(this).attr("id").replace("txt", "");
$("#err_txt" + id).text(($(this).val() ? "*" : ""))
});
};
让我们分解input[id^=txt]：
input =很清楚，输入元素的选择器。
id^=txt这意味着我们将选择id开头的所有元素（^=）txt
<强>演示
function asterisks() {
$("input[id^=txt]").each(function() {
var id = $(this).attr("id").replace("txt", "");
$("#err_txt" + id).text(($(this).val() ? "*" : ""))
});
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt1" value="*" /><label id="err_txt1"></label>
<input id="txt2" value="" /><label id="err_txt2"></label>
<input id="txt3" value="*" /><label id="err_txt3"></label>
<input type='submit' onclick='asterisks()' id="btnsub" name="btnsub" value="Submit">
演示2
$("#form1").submit(function(e) {
e.preventDefault();
asterisks();
})
function asterisks() {
$("input[id^=txt]").each(function() {
var id = $(this).attr("id").replace("txt", "");
$("#err_txt" + id).html(($(this).val().length == 0 ? "*" : ""))
});
};.err {
color: #FF0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<table>
<tr>
<td>
<h3>Subject</h3>
</td>
<td><b id="err_txt1" class="err"></b><input type="text" id="txt1" name="txt1" placeholder="Subject">
</td>
</tr>
<tr>
<td>
<h3>Subject</h3>
</td>
<td><b id="err_txt2" class="err"></b><input type="text" id="txt2" name="txt1" placeholder="Subject">
</td>
</tr>
<tr>
<td>
<h3>Subject</h3>
</td>
<td><b id="err_txt3" class="err"></b><input type="text" id="txt3" name="txt1" placeholder="Subject">
</td>
</tr>
</table>
<input type='submit' id="btnsub" name="btnsub" value="Submit">
</form>
答案 1 :(得分：0)
您已准备好代码，但没有执行。由于您已经要求更好的方法来执行此操作，请考虑使用以下代码：
（我看到你使用了jQuery，所以为什么不一直使用它）
$('input.text').blur(function() {
if ($(this).val() == '') {
$('.err_text').empty().append('*');
} else {
$('.err_text').empty();
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="text">
<input type="text" class="text">
<input type="text" class="text">
<span class="err_text"></span>
答案 2 :(得分：0)
似乎您正在使用jquery，您可以使用onkeyup事件来检查是否有任何值。例如
$('#txt1').on('keyup', function(){
if(this.val().length)
{
$('#err_txt1').val('');
}
else
{
$('#err_txt1').val('*');
}
});
并让您的表单ID为form1然后写入检查表单的提交。
$('#form1').submit(function(event){
if(!$("#txt1").val().length)
{
$('#err_txt1').val('*');
return false;
}
if(!$("#txt2").val().length)
{
$('#err_txt2').val('*');
return false;
}
if(!$("#txt3").val().length)
{
$('#err_txt3').val('*');
return false;
}
});
答案 3 :(得分：0)
您可以通过多种方式解决此问题。
由于您可能需要即时反馈，我建议您使用输入事件，因为它会在输入或删除时更新星号。
一种方法是通过oninput将事件附加到输入：
function checkEmpty(sender) {
if ($(sender).val() == "") {
$(sender).prev().html("*");
} else {
$(sender).prev().html("");
}
}.err {
color: #FF0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<h3>Subject 1</h3>
</td>
<td>
<b id="err_txt1" class="err">*</b>
<input type="text" id="txt1" name="txt1" placeholder="Subject 1" oninput="checkEmpty(this);">
</td>
<td>
<h3>Subject 2</h3>
</td>
<td>
<b id="err_txt2" class="err">*</b>
<input type="text" id="txt2" name="txt2" placeholder="Subject 2" oninput="checkEmpty(this);">
</td>
<td>
<h3>Subject 3</h3>
</td>
<td>
<b id="err_txt3" class="err">*</b>
<input type="text" id="txt3" name="txt3" placeholder="Subject 3" oninput="checkEmpty(this);">
</td>
另一种方法是使用jQuery on附加事件：
$(function() {
$("input").on("input", function() {
if ($(this).val() == "") {
$(this).prev().html("*");
} else {
$(this).prev().html("");
}
});
});.err {
color: #FF0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<h3>Subject 1</h3>
</td>
<td>
<b id="err_txt1" class="err">*</b>
<input type="text" id="txt1" name="txt1" placeholder="Subject 1">
</td>
<td>
<h3>Subject 2</h3>
</td>
<td>
<b id="err_txt2" class="err">*</b>
<input type="text" id="txt2" name="txt2" placeholder="Subject 2">
</td>
<td>
<h3>Subject 3</h3>
</td>
<td>
<b id="err_txt3" class="err">*</b>
<input type="text" id="txt3" name="txt3" placeholder="Subject 3">
</td>
答案 4 :(得分：0)
这适用于具有该html结构的表单中的任何输入
$(document).ready(function () {
$('#myForm input').on('input', function (e) {
var inputValue = $(this).val();
var $asterisk = $(this).parent().find('.asterisk');
inputValue ? $asterisk.addClass('hide') : $asterisk.removeClass('hide');
});
}); .hide {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id='myForm'>
<div>
<span class='asterisk hide'>*</span>
<label> Name</label>
<input type='text' name='name' value='' />
</div>
</form>