CODEWITHSUNDEEP
javascriptjquery
laurajs
laurajs

Reputation: 923

How to set text box to appear blank after .click function

So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"

After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?

$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();  
$("#loginbtn").click(function(event){

    $.getJSON('result.json', function(jd) {
        var id = $('#userName').val();
        var name = $('#userName2').val();
        var valid = false;


        for (var i=0; i<jd.user.length; i++) {
            if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
                valid=true;
                $('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');      
          //show the alert after loading the information  
                $("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
                $('#invalid').hide();
                $('#btnhide').on('click', function(e){
                    //console.log('here');
                    e.preventDefault();
                    $('#loginalert').hide();
                });

            }
        }
        if (!valid) {
            $('#invalid').fadeIn('slow');
            $('#loginalert').hide();

        }
    });
}); });

username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.

thanks guys hope someone can help :)

Upvotes: 3

Views: 1780

Answers (5)

Sagir Musa Umar
Sagir Musa Umar

Reputation: 96

Using querySelector:

<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
    function click() {
        document.querySelector('#inputId').value="";
    }
</script>

Upvotes: 0

Sagir Musa Umar
Sagir Musa Umar

Reputation: 96

Another Method:

You can also add the script directly inside the button without using/creating a function.

<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>

Upvotes: 0

tash
tash

Reputation: 189

document.getElementById("#myTextbox").value="";

This should get your textbox and set the value of it to "", which is blank.

Edit: JSFiddle

Upvotes: 1

rahul
rahul

Reputation: 187070

  1. is there any way to get user name 2 to display in stars ****** when the user enters the password

You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.

<input type="password" id="txtPassword" />

  1. text box to appear blank after .click function

You can set the .val() property of the jQuery objects of two those two textboxes.

$('#userName, #username2').val('');

Upvotes: 2

BenC
BenC

Reputation: 451

Use <input type="password"> to show typing as stars.

Clear inputs by setting their value to be empty: $('#userName').val('');

And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.

Upvotes: 2

Related Questions