CODEWITHSUNDEEP
jqueryasp.net-mvcvisual-studio
NeatoBandito
NeatoBandito

Reputation: 110

Hide and show text boxes, based on previous text boxes being filled

I'm completely new to JQuery and JavaScript so I apologize in advance for any obvious misconceptions. Currently, I'm looking for a way to have two text boxes shown to the user, and once they are filled out, the remaining however-many text boxes show up below them.

I've looked into dynamic validation a bit, but I couldn't quite figure out how to integrate it.

My environment is Visual Studio 2013, in an MVC project/ASP.NET approach.

Here is a JSFiddle I found that's somewhat related to what I'm trying to do.

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();
    });
});

The code above that I found is, as I said, similar to what I'm trying to accomplish, but I'm trying to make it so that the radio buttons are textboxes, and once they are filled (not empty), it reveals the other textboxes (maybe 3 or 4 more) under it, that were previously hidden. What I'm doing is pretty simple and straightforward, but as I said, I'm brand new to this.

Any ideas on a solution? Even resources on the subject would be appreciated.

Thanks!

EDIT: Great answers, all helpful. Unfortunately I can't vote up any answers because I'm too new.. Thank you all though!

Upvotes: 0

Views: 3010

Answers (6)

Vladyslav Kurkotov
Vladyslav Kurkotov

Reputation: 505

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);
});

UPDATED JS PART

Upvotes: 1

Nawed Khan
Nawed Khan

Reputation: 4401

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>

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You have to use blur event and check if both textboxes are not empty show other textboxes else hide them.

You need to so something like this:

$(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

Upvotes: 1

Think Different
Think Different

Reputation: 2815

You should use the keyup or keydown events of the textfiled. Like in your example change the jQuery to the following and it will show and hide upon the user input.

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

});

Make sure to change the radio button to textfileds in your example and try with this code.

Upvotes: 0

Vivian River
Vivian River

Reputation: 32390

You're on the right track to be using a class on the textboxes to show and hide along with the show and hide jquery functions.

I would suggest that you attach an event to the change event on each textbox that must be filled before the others become visible. Each time the text changes, a function should run to check if all the requisite textboxes are filled. If they are, the other textboxes are shown. Otherwise, they are hidden.

If you want the textboxes to show and hide as the user is typing, you can use the keypress event instead of the change event.

Upvotes: 1

ewitkows
ewitkows

Reputation: 3618

You can use:

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

In short, this monitors both textboxes for changes. When done, you can show all remaining text fields.. in this example, I assume that you would have just one DIV, initially hidden.. containing all the remaining elements you want to show to the user.

"textboxIDA" would refer to the ID at runtime of your first textbox, IDB would be the other textbox.

Upvotes: 1

Related Questions