Javascript Check User Input without Change - javascript

I am using javascript and I want to change an html code based on what is in the text box. But I have values that are passed from the previous page and put into the inputs. But the html code does not trigger because it uses a .keyup function and I want to know if it was possible to execute javascript without a keyup function and without altering the text.
My code
<div>
<label>Name</label><br />
<input type="text" id="name" name="name" onChange="NameCheck();"/>
<span class="error" id="namecheck"></span>
</div>
$(document).ready(function () {
$("#name").keyup(NameCheck);
});
function NameCheck() {
var password = $("#name").val();
if (password == ""){
$("#namecheck").html("Name is Blank");
$("#namecheck").css('color', 'red');
return false;
}else{
$("#namecheck").html("Name Is Valid");
$("#namecheck").css('color', 'green');
return true;
}
}

Check this jsfiddle, it is a working example of what you want! note that you don't need the onchange method, because your using jquery's keyup
so your code should be like this:
JS:
$(document).ready(function () {
$("#name").keyup(function () {
NameCheck();
});
NameCheck();
});
function NameCheck() {
var password = $("#name").val();
if (password == "") {
$("#namecheck").html("Name is Blank");
$("#namecheck").css('color', 'red');
} else {
$("#namecheck").html("Name Is Valid");
$("#namecheck").css('color', 'green');
}
}
HTML:
<div>
<label>Name</label>
<br />
<input type="text" id="name" name="name" />
<span class="error" id="namecheck"></span>
</div>

Though you should really restructure your code to not use globals, if you want to call NameCheck() on page load just call it after your event binding, like:
$(document).ready(function () {
$("#name").keyup(NameCheck);
NameCheck();
});

Related

How can I make a pop up window (alertbox) if the input isn't valid? [duplicate]

This question already has answers here:
A simple jQuery form validation script [closed]
(2 answers)
Closed 5 years ago.
Basically what i'm trying to do is that when i hit a button, it will check if something has been written, if it hasn't I would like an alert box to appear. Is this possible? Down below is what I have so far, any tips? (#inputvalue is the id of the values when writing. I created a new function for the process called validateForm. Is this possible to do in Jquery? I supose that what I wrote is more Javascript, because that's mostly what i'm used to...). //Nathalie!
function validateForm() {
var x = document.forms["#inputValue"].value;
if ("#inputValue" == "") {
alert("Name must be filled out");
return false;
}
}
Provided that you use jQuery (as you have tagged your question) you could try something like this:
$(function(){
function validateForm(){
var ele = $("#inputValue");
if(!ele.val()){
alert("Name must be filled out")
}
}
$("#btnId").on("click", validateForm);
});
$(function(){
function validateForm(){
var ele = $("#inputValue");
if(!ele.val()){
alert("Name must be filled out")
}
}
$("#btnId").on("click", validateForm);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="inputValue"/>
<input type="button" id="btnId" value="submit"/>
Sure, using the code you provided, you just need to target #inputValue properly and use that value in your test.
function validateForm() {
var x = document.getElementById('inputValue').value;
if (x.trim() == "") {
alert("Name must be filled out");
return false;
}
}
<form onsubmit="validateForm()">
<input id="inputValue" type="text">
<input type="submit">
</form>
Using jquery, it's basically the same thing. Here's an example using a submit handler in jquery instead of an onsubmit attribute in html, and using jquery selectors.
$('form').on('submit',function(e) {
var x = $('#inputValue').val();
if (x.trim() == "") {
alert("Name must be filled out");
return false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="inputValue" type="text">
<input type="submit">
</form>
In addition to what Michael Coker said, it would be better if you attach an event listener by script to the form tag:
document.addEventListener("DOMContentLoaded", function() {
document.getElementsByName("form")[0].addEventListener("submit", function() {
var value = document.getElementById("inputValue").value;
if (value == "")
{
window.alert("Name must be filled out!");
}
});
});
Here is a solution using jQuery. Unlike some of the answers above, I did not use a form.
//Listen for the click of the button
$(document).on("click", "#enterButton", function(e) {
//Get the value of the input box
var F_Name = $('[name="FirstNameInput"]').val();
//If it is empty, alert.
if (!F_Name.trim()) {
alert('Empty');
}else{
//DO SOMETHING WITH THE INPUT, AJAX?
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="FirstNameInput">
<button type="button" id='enterButton'>Enter</button>

Javascript - enabling button when input is filled

I want to enable my button, when input is filled. I want to do it in pure Javascript.
My code example in HTML:
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
<button type="submit" class="button button-dark" id="send">Send message</button>
</form>
And Javascript:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
function myFunction() {
var nameInput = document.getElementById('name').value;
if (!nameInput === "") {
document.getElementById('send').disabled = "false";
}
}
});
I don't know why my button is not changing to enable state after filling something in input. I have tried diffrent ways to do it, but it's still not working.
Please help.
An input element in HTML is enabled only when the disabled attribute is not present.
In your case disabled is always present in your element, it's just that it has a "false" or a "true" value - but this is meaningless according to the specs (http://www.w3schools.com/tags/att_input_disabled.asp)
So you need to remove it altogether:
document.getElementById('send').removeAttribute('disabled')
The problem with your code is that myFunction() isn't available because you defined it in the eventlistener for click.
Complete refactored code answer:
HTML
<form action="sent.php" method="post" name="frm">
<input type="text" name="name_input" id="name">
<br>
<button type="submit" class="button button-dark" id="send" disabled>Send message</button>
</form>
JS
document.getElementById("name").addEventListener("keyup", function() {
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
document.getElementById('send').removeAttribute("disabled");
} else {
document.getElementById('send').setAttribute("disabled", null);
}
});
Try this one it will work for you
function myFunction() {
document.getElementById('send').disabled = true;
var nameInput = document.getElementById('name').value;
if (nameInput != "") {
alert("Empty");
document.getElementById('send').disabled = false;
}
}
if you want to check the input should not be contain number then we can use isNaN() function, it will return true if number is not number otherwise return false
Your code is almost correct but you have defined myFunction inside a block, so input is not able to find myFunction() inside onkeyup="myFunction()"
so just keep the same outside of DOMContentLoaded event
see working demo
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('send').disabled = "true";
});
function myFunction() {
var nameInput = document.getElementById('name').value;
console.log(nameInput);
if (nameInput === "") {
document.getElementById('send').disabled = true;
} else {
document.getElementById('send').disabled = false;
}
}

validation in form not working

I don't know what im doing wrong, i have a form and using this function to check if the input is empty...what Iam trying to do is to highlight the field by adding a class to the text field...but if i add this line
name.addClass("empty");
to the function, the function dont work
function register()
{
if(document.myForma.userid.value == '')
{
name = $("#userid");
document.myForma.userid.focus();
$("#empty").html("This field is required")
name.addClass("empty");
return false;
}
}
Declare your name variable as local, or use a different name for it, - global window.name already exists and is not changeable.
console.log(name);
function register() {
if (document.myForma.userid.value == '') {
var name = $("#userid");
document.myForma.userid.focus();
$("#empty").html("This field is required");
name.addClass("empty");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForma" name="myForma" onsubmit="return register();">
<input id="userid" type="text" />
<div id="empty"></div>
<input type="submit" />
</form>

jQuery .ready is not working

Can anyone tell me why this code wouldn't work? I have an input and I'm trying to check weather or not the input is "start". So I do... how ever nothing is working - not even the .ready but I'm new so I have no idea what the problem is.
HTML
<form id="inputForm" onsubmit="return false;">
<input id="input" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
</form>
JS:
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input").val().toUpperCase();
if (input === "START") {
alert("worked");
}
$("#command_input").val("");
})
});
I suspect that you haven't included jQuery in your webpage. You can import it by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Before the script tag for your code. (https://code.jquery.com/jquery has more jQuery CDNs too)
You really don't need jQuery to do this though. Here's the plain JS equivalent code working here:
var input = "";
document.body.onload = function() {
document.getElementById("inputForm").addEventListener("submit", function() {
input = document.getElementById("input").value.toUpperCase();
if (input === "START") {
alert("worked");
}
document.getElementById("command_input").value = "";
});
};
After looking at the code here: https://jsfiddle.net/cu7tn64o/1/
It seems to work fine! As the other commenters have mentioned, this is likely because you have not included jQuery in your html file like so:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
https://code.jquery.com/
First include the jquery file using script tag in your html file.
Submit the form using jquery or in the below case I have submitted using a button. Onsubmit the value is taken from the input field and compared.
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input-value").val().toUpperCase();
if (input === "START") {
alert("worked");
}
else
{
alert("sorry");
}
$("#command_input").val("");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="inputForm" onsubmit="return false;">
<input id="input-value" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
<input type="submit" name="submit" value="submit" />
</form>
If you return false from the event handler, things ought to work.
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input-value").val().toUpperCase();
if (input === "START") {
alert("worked");
} else {
alert("sorry");
}
$("#command_input").val("");
// You have to return false HERE to prevent the default action of a
// form -- send a request to a server, that is
return false;
});
});

Execute code when textboxes have data

I have a project which I have to calculate the coordenates between two points. The first coordenates are calculated once the user enters in three text boxes the street, province and city.
How can I execute the code I have in PHP once the user fills out all three boxes and not before?
<form name="form" action="" method="post">
<input type="text" name="provincia" id="provincia">
<input type="text" name="municipio" id="municipio">
<input type="text" name="calle" id="calle">
<input type="submit" value="¡Buscar!"/>
</form>
This is the form the user has to fill in. Once the user writes in all three (without mattering the order) I have php code which Im not sure if it can execute once these boxes have values.
What should I have to use to accomplish this? Ajax? Jquery? Javascript?
Not really sure,
thanks.
are you looking for this?
$(document).ready(function () {
var flag = false;
$("input[type=text]").change(function () {
flag = true;
$("input[type=text]").each(function () {
if ($(this).val().trim() == "") {
flag = false;
}
});
if (flag) {
alert("all have values");
$("input[type=submit]").trigger("click");
}
alert(values);
});
});
edit
<form name="form" action="" method="post">
<input type="text" class="tobeChecked" name="provincia" id="provincia">
<input type="text" class="tobeChecked" name="municipio" id="municipio">
<input type="text" class="tobeChecked" name="calle" id="calle">
<input type="submit" value="¡Buscar!"/>
</form>
$(document).ready(function () {
var flag = false;
$(".tobeChecked").change(function () {
var values = "";
flag = true;
$(".tobeChecked").each(function () {
values += $(this).val().trim() + "+";
if ($(this).val().trim() == "") {
flag = false;
}
});
if (flag) {
alert("all have values");
$("input[type=submit]").trigger("click");
}
});
});
Create a function to validate the required field for those three text boxes and once all are filled with values execute your script:
$('#provincia,#municipio,#calle').blur(function(){
if($('#provincia').val() !="" && $('#municipio').val() !="" && $('#calle').val() !=""){
// Do your process here
}
});
You can use jquery validate plugin to validate these 3 input fields on the client side itself, In that way, the user cannot submit the form until he completely fills the input fields.
Give your Button an ID like:
<input type="submit" id="button" value="¡Buscar!"/>
Then you can do this in JQuery:
$("#button").click(function(){
//Get the value of the fields
var textfield1 = document.getElementById("provincia").value;
var textfield2 = document.getElementById("municipio").value;
var textfield3 = document.getElementById("calle").value;
//Check if Values are filled
if ( !textfield1.match(/\S/) || !textfield2.match(/\S/) || !textfield3.match(/\S/))
{
//execute your script
}
I hope it helps.
use jquery .change() function
$( "#provincia" ).change(function() {
//you can do something here
alert( "Handler for .change() called." );
});

Categories