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 :)
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" />
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('');
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.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
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>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>
Related
I'm making a website for fun, and there's a little easter egg I want to put in it where you input a password to see a hidden page on the site.
I know how to make a login form with html and I get the "input" tag for putting in the password, but I'm not sure what the "output" should be..? I also want it to display a div or span only when the correct text is entered.
It would be cool if I could have both a username and password be required to match, but I don't know how that'd work at all.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>
Well, you need javascript for this and just an easy onclicklistener.
For example:
<button onclick="checkHidden()">Login</button>
<script>
function checkHidden()
{
if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
{
window.location.href = "andereSeite.html";
}
}
</script>
But obviously everyone can see the username & password.
They just need to let them show the source.
If you wanna use this secretly you need to use PHP :)
There are many tutorials out there for form + PHP.
Well, here is a simple example. Use onkeyup="" attribute to run the javascript function check_password(this) (this refers to the input-tag) after every entered character. If the password is right the div will appear with display: block/none;.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>
Edit: |SOLVED| user Jaromanda X's solution worked perfectly. Thank you
My goal is to have the user enter a bit of text into the textbox and submit it. I want to check and see if the textbox is empty and, if so, it should alert the user that a name needs to be entered. If it is not empty I want it to display the text they had entered.
The issue is this: Every time I hit submit it takes the value of the textbox - empty or not - and displays it without ever alerting the user of an empty text field. I feel like I'm missing something very basic. Thank you for your help!
HTML File
<body>
<div id="statusBar">
<h1 id="playerName"></h1>
<h2 id="playerHP"></h2>
</div>
<div id="gameWindow">
Player Name: <input id="inputName" type="text" name="Player Name">
<br>
<input type="button" value="submit" onclick="getStats()";>
</div>
<script src="script.js"></script>
</body>
JS File
function getStats(){
if(document.getElementById("inputName").len === " "){
alert('You must enter a name!');
} else {
var playerHP = 10;
var playerName = document.getElementById('inputName').value;
//Display player name on screen
document.getElementById('playerName').innerHTML = playerName;
//remove the value placed in the text box
document.getElementById('inputName').value = "";
//Display the player's HP
document.getElementById('playerHP').innerHTML = playerHP;
}
};
Change your if statement to:
if (document.getElementById("inputName").value.length === 0) {
Right now you're trying to get a property len of your <input> element, which doesn't exist. You should first be getting the value of the input, and checking if its length is zero. Hence, .value.length.
It should be:
if (document.getElementById("inputName").value === "") {
// do something
}
You're not using the right conditional.
Replace the
document.getElementById("inputName").len
with
document.getElementById("inputName").value.length === 0.
If you have a form, type some text into it, and press the Enter key, whenever revisiting that form you can double-click on the input box and see the past text submissions.
I have a site that when you press Enter OR click a button, it should take whatever is in the text box and use it for data processing.
This works totally fine when not surrounded by a form but when surrounded by a form an you press the Enter key, it does not act as an enter button push, I believe it's being overridden by the form.
My goal is to have the user be able to press the Enter key as well as click the button to submit the data, but to also remember the text values that were in the text box regardless of which way you submitted the data.
What I have:
<input type="text" id="username-field" class="form-control" placeholder="username">
<input class="btn btn-default" type="button" id="get-name" value="Get Name">
Javascript
$("#get-name").click(function() {
var name = $("#username-field").val();
// ... call other function with name ...
});
$("#get-name").keydown(function(e) {
if (e.which == 13) {
var name = $("#username-field").val();
// ... call other function with name ...
}
");
What I would like to use:
<form>
<input type="text" id="username-field" class="form-control" placeholder="username">
</form>
I tried doing e.preventDefault() when the Enter key is pressed, but this does not remember the text in the input field.
I also considered doing a small cache type thing but am unsure of how I'd go about this.
Any help would be much appreciated!
Thanks!
Doesn't use form at all. Just, why you added it, if you don't use it as intended?
You either mistyped provided code copy-paste, or have errors in yours script (the $("#get-name").val() mistake).
If you want to prevent form from submission, you should e.preventDefault()-it in submission handler, and return false from it:
$('#form-id').submit(function (e) {
e.preventDefault();
// do smth. else here
...
return false;
})
Saving/retriving data with localStorage for HTML5-supporting browsers:
$(function () {
$('form input[type=text]').doubleclick(function () {
var id = $(this).attr("id");
value = localStorage.getItem("form_xxx_" + id);
// do smth. with cached value, ie:
if (value != "")
$(this).val(value); // put in textfield
});
});
$('form').submit(function (e) {
$('form input[type=text]').each(function () {
var id = $(this).attr("id");
localStorage.setItem("form_xxx_" + id, $(this).val());
});
...
// all other work
});
Note: make sure you don't put some user's personal data in browser's local storage -_-
I have a textbox and button. I want to show an alert when I click the button. But I have a condition; the innput text value must be X1. If user write X1 in to textbox, show an alert GOOD otherwise alert NOT GOOD.
How can I do that with using jQuery? Here are my html codes.
<input type="text" id="couponInput" class="couponInput" placeholder="Input Code" />
<button type="button" id="couponApply" class="couponApply">APPLY</button>
In case you want specific jquery answer. Here it is ....
$(document).ready(function(){ // Document ready event -- most important
$('#couponApply').click(function(event){
var couponInputval = $('#couponInput').val(); // Getting the input value
couponInputval = couponInputval.toUpperCase(); // Changing to upper case
if(couponInputval == 'X1') {
alert("GOOD");
}
else{
alert("NOT GOOD");
}
event.preventDefault(); // To restrict button to push request to the server
});
});
Hope it helps ......
Add this javascript
//This detect the onClick event on your button
$("#couponApply").click(function(){
//here you retrieve the value of your input
var inputValue = $("#couponInput").val();
//And now, you test it
if(inputValue == "X1")
alert("GOOD");
else
alert("NotGOOD");
});
You can test it here
You don't need jQuery for that, but try this
<button type="button" id="couponApply" class="couponApply" onclick="if($('#couponInput').val() == 'X1'){alert('GOOD');} else {alert('NOT GOOD');}">APPLY</button>
Also if you are trying to verify coupons than this is not a good way to do that - your code will be easy to read in source of your website - you should do it on the server side
I have a form that I need to do some validation on, my jquery seems to be working except when a user just enters the page and submits without making any entry into a text box. Here is my HTML:
...
<% while (rs.next()) { %>
<input type="text" name="name" />
<% } %>
<input type="text" id="fafsaNbrFam" name="fafsaNbrFam" value="<%=nbrFam%>" class="hidden" />
....
and my script:
$("#submit").click(function(e) {
var numEntries = 0;
var fafsaNbr = 0;
$("input[name^='name_']").each(function() {
if (this.value) {
numEntries++;
}
});
fafsaNbr = parseInt($("input[name='fafsaNbrFam']").val());
if (fafsaNbr > numEntries && !confirm("WARNING, numbers don't match.")) {
e.preventDefault();
}
});
So basically if their number of text boxes filled with names isn't >= the hidden input value then the kick back happens, and it works except when the user never enters anything into the text box. What event could I use instead of
$("input[name^='name_']").each(function() {
to accomplish this?
According to me it wont work because when textbox is empty then
$("input[name^='name_']").each(function()
parseInt($("input[name='fafsaNbrFam']").val());
.each() and val() return null. Due to this your control did not run ahead.
One thing you can do:
document.getElementById("fafsaNbrFam")==null
using this you can check the value as true or false. Because in case of empty textbox when you write the document.getElementById("fafsaNbrFam") or $("#fafsaNbrFam") it return value null.
And, null.val() or null.each() gives error.