Question

我完全 JQuery和JavaScript的新手，所以我提前为任何明显的误解道歉。目前，我正在寻找一种向用户显示两个文本框的方法，一旦填写完毕，剩余的许多文本框会显示在它们下面。

我已经对动态验证进行了一些调查，但我无法弄清楚如何整合它。

我的环境是Visual Studio 2013，采用MVC项目/ ASP.NET方法。

Here is a JSFiddle我发现有点与我试图做的事情有关。

HTML：

<p>Show textboxes <input type="radio" name="radio1" id="r1" value="Show" onClick="getResults()">Do nothing <input type="radio" name="radio1" id="r2" value="Nothing"> </p>Wonderful textboxes: <div class="text"> <p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"> </p> </div> <div class="text"> <p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"> </p> </div>

的JavaScript

$(document).ready(function () { $(".text").hide(); $("#r1").click(function () { $(".text").show(); }); $("#r2").click(function () { $(".text").hide(); }); });

我发现上面的代码就像我说的那样，类似于我想要完成的代码，但是我试图让它成为单选按钮是文本框，一旦它们被填满（不是空的），它显示了之前隐藏的其他文本框（可能还有3或4个）。我正在做的事情非常简单明了，但正如我所说，我对此很陌生。

关于解决方案的任何想法？即使是有关该主题的资源也会受到赞赏。

谢谢！

编辑：很棒的答案，都很有帮助。不幸的是，我无法对任何答案进行投票，因为我太新了。谢谢大家！

Answer 1

您可以使用：

$('#textboxIDA,#textboxIDB').on('input', function() {
    if($('#textboxIDA').val().trim != '' && $('#textboxIDB').val().trim != ''){
        $('#DIVWithTextboxes').show();
    }
});

简而言之，它会监视两个文本框的更改。完成后，您可以显示所有剩余的文本字段..在此示例中，我假设您只有一个DIV，最初隐藏..包含您要向用户显示的所有剩余元素。

“textboxIDA”将引用第一个文本框中的ID 运行时，IDB将是另一个文本框。

Answer 2

您正在使用文本框中的类来显示和隐藏show和hide jquery函数。

我建议您将事件附加到每个文本框上的change事件，在其他文本框可见之前必须填充该事件。每次文本更改时，都应运行一个函数来检查是否填充了所有必需的文本框。如果是，则显示其他文本框。否则，它们就被隐藏了。

如果您希望在用户输入时显示和隐藏文本框，则可以使用keypress事件代替change事件。

Answer 3

您必须使用blur事件，并检查两个文本框是否都为空，显示其他文本框还隐藏它们。

你需要这样的事情：

$(document).ready(function () {
    $(".text").hide();
    $("#r1").click(function () {
        $(".text").show();
    });
    $("#r2").click(function () {
        $(".text").hide();
    });
});
var flag = false;
$(".text input:text").on('blur', function () {

    $(".text input:text").each(function () {

        if ($(this).val() != "") {
            flag = true;
        } else {
            flag = false;
        }
    })

    if (flag) $(".remaining").show();
    else $(".remaining").hide();


})

FIDDLE DEMO

Answer 4

HTML：

<p>Show textboxes
    <input type="text" name="text1" id="r1" value="Show" onClick="getResults()">Do nothing
    <input type="text" name="text2" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
    <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30">
    </p>
</div>
<div class="text">
    <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30">
    </p>
</div>

的JavaScript

function ShowHideText(){
    if($("#r1").val().length > 0 && $("#r1").val().length > 0){
        $(".text").show();
    }

    if($("#r1").val().length == 0 || $("#r1").val().length == 0){
        $(".text").hide();
    }
}  

$(function () {
    $(".text").hide();
    $("#r1").on( "change", ShowHideText);
    $("#r2").on( "change", ShowHideText);
});

更新JS部分

Answer 5

您应该使用textfiled的keyup或keydown个事件。就像在您的示例中一样，将jQuery更改为以下内容，它将显示并隐藏用户输入。

$(document).ready(function () {
$(".text").hide();
$("#r1").keyup(function () {
    if($(this).val() != '')
        $(".text").show();
    else
        $(".text").hide();
  });

});

请务必将示例中的单选按钮更改为textfileds，然后尝试使用此代码。

Answer 6

CSS：

.text{display:none;}

JavaScript的：

function getResults(){
   if($('#t1').val().trim() != '' && $('#t2').val().trim() != ''){
      $('.text').show();
   }
   else{
      $('.text').show();
   }
}

HTML：

<p>Show textboxes
    <input type="text" name="t1" id="t1" onkeyup="getResults()">
    <input type="text" name="t2" id="t2" onkeyup="getResults()">
</p>
Wonderful textboxes:
<div class="text">
    <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30">
    </p>
</div>
<div class="text">
    <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30">
    </p>
</div>

根据要填充的先前文本框隐藏和显示文本框

6 个答案: