I'm trying to make some code that sends a form that first makes sure if it is filled correctly. When I click on the "enviar formulario" button, it doesn't call the javascript code and does not do anything.
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length() < 2){
alert("Error");
return 1;
}
else if(!document.getElementById("edad").value.isInteger()){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
There is nothing like document.getElementById("nombre").length()
If you are trying to read the length of input text do this
document.getElementById("nombre").value.length
EDIT 1:
There is no method as isInteger(). So use parseInt() instead
This will be your working code
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length < 2){
alert("Error");
return 1;
}
else if(!parseInt(document.getElementById("edad").value)){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
You're comparing the length of the whole input tag rather than the text in it.
if (document.getElementById("nombre").value.length < 2)
{
...
}
if (!document.getElementById("edad").value.isInteger())
{
...
}
and so on...
First, please check if your control is reaching the test method, use a debugger (I prefer chrome)
After that check your syntax in the console, while the code is at the breakpoint
You can share your findings here
Related
I want a simple program that shows an alert if a user updates a form and it's not more than 8 charterers long. I've tooled around trying to use the "onformchange" function and such, but I couldn't get it to work. I've heard about ajax but don't know how to integrate it into my problem. Any help would be great.
please,use the following guide to validate your form:
W3Schools
document.getElementById("submit").onclick = function() {
document.getElementById("output").innerHTML = "";
if (document.getElementById("input").value.length < 8) {
document.getElementById("output").innerHTML = "input too short";
}
}
document.getElementById("input").onkeydown = function() {
document.getElementById("output").innerHTML = "";
if (document.getElementById("input").value.length < 8) {
document.getElementById("output").innerHTML = "input too short";
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" placeholder="some text" id="input">
<input type="button" onclick="click()" value="submit" id="submit">
<p id="output"></p>
</body>
</html>
This will work, make sure to change the id's.
Hi I am very new to Javascript. In the code below, when I test I don't see any output. Can anybody tell me what is wrong?
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
}
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
This should work! The problem was the orientatiom of { after the else.
A few things:
<id="score"> <input type="number" name= "score"> is probably not what you mean. Maybe you mean <input type="number" name="score" id="score">.
document.write is a no-no, please don't ever use it. It allows you to modify the document "here and now", i.e. while it's loading. Use document.body.innerHTML += x, for example.
var score = document.getElementByID('score').value
The bracket after the else clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>enter code here
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
</html>
Change input type from submit to button else you wont be able to see the output, because the form will submit and reload the page.
Fix the syntax errors
<id="score">
Change } to { under else condition
Change document.write to alert or console.log
Try this:
<script>
function myFunction()
{
var x;
var score=document.getElementById("in_score").value;
if(score>30)
x="Expert";
else
x="Novice";
document.getElementById("score").value = x;
}
</script>
<body>
<form name="myscore">
Score: <input id="score" type="number" name= "score">
<input type="submit" id="in_score" onClick="myFunction()" value="submit">
</form>
</body>
</html>
So the main error in your code was the reverse bracket from the else statement. Also, to get/change values from an input, you need to use getElementById ( to select the element ), and .value statement, to change/get it.
OK so I have a form that I check to see if the user enters in a username in the username field. On top of that i also want to know what button what clicked, really im looking to see when the logout button is clicked. It seems to me that the addEventListener isn't registering the 'click' value when the form is submitted. both the buttons and the buttonLength have the right values when I run it with Firefox debugger. So my question is, how do I check the addEventListener value or if its getting passed? looking for some insight on what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<script>
function ValidateForm(frm){
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
if(this.id == "logout"){
alert(this.id);
}else {
alert("not logout:" + this.id);
};
};
if (!frm.UserName.value) {
alert("You must enter your username.");
frm.UserName.focus();
return false;
}
return true;
}
</script>
<form method="post" action="test.html" onsubmit="return ValidateForm(this)">
<input type="input" name="UserName" value="">
<input type="password" name="Password" value="">
<button name="adam" id="login">login</button>
<button name="adam" id="sendMe">send me my password</button>
<button name="adam" id="logout">logout</button>
<form>
</body>
Maybe I'm wrong but I think you try to do the following:
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<form method="post" name="formname" action="test.html">
<input type="input" id="username" name="userName" value="">
<input type="password" id="password" name="Password" value="">
<button type="button" name="adam" id="login">login</button>
<button type="button" name="adam" id="sendMe">send me my password</button>
<button type="button" name="adam" id="logout">logout</button>
<form>
<script>
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for(var i=0;i<buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
var u, p;
u=document.getElementById('username');
p=document.getElementById('password');
switch(this.id) {
case 'logout':
alert('Logout '+this.id);
break;
case 'login':
if(u.value.length==0 ||
p.value.length==0) {
alert("Please enter your unsername and password.");
if(u.length==0) {
u.focus();
} else {
p.focus();
}
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
case 'sendMe':
if(u.value.length==0) {
alert("Please enter your username.");
u.focus();
return false;
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
}
};
</script>
</body>
So, you need to assign listeners before click, then I guessed you want to capture click check button id (command to execute) and then check if user and pass are fullfilled depending the button clicked, if so then submit the form... I've changed your code but I think is what you're looking for.
Hope it helps!!!
Your code is a little messy and hard to understand exactly what you need.
That being said, you should use onclick attributes to bind the buttons to 3 separate functions.
Inside those functions you can get ahold of any dom nodes you need to preform login/logout/sendMe functionality.
Like so:
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<script>
function login(){
alert('login function');
// do what you need to here to login
var username = document.getElementsByName('input-username').value;
var password = document.getElementsByName('input-password').value;
if (!username){
alert("You must enter your username.");
}else if (!password){
alert("You must enter your password.");
}
}
function sendMe(){
alert('sendMe function');
// sendMe functionality here
}
function logout(){
alert('logout function');
// logout functionality here
}
</script>
<form method="post" action="test.html">
<input id='input-username' type="input" name="UserName" value="" />
<input id='input-password' type="password" name="Password" value="" />
<button id="login" onClick="login()">login</button>
<button id="sendMe" onClick="sendMe()">send me my password</button>
<button id="logout" onClick="logout()">logout</button>
<form>
</body>
my HTML code:
<form action="Generator.klx" method="post" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
my JavaScript:
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
But it just didnot work :(. Can anybody tell me where I was wrong?
Thank you
Your code as quoted should be working, and does in my tests with a variety of browsers. (I've tried it locally, with a POSTed form, but you can also try it here: http://jsbin.com/ehoro4/1 I've changed the method to GET so you can see the result in the URL.)
My guess is that you have something else on the page with the name or id "hiddenField", other than just the hidden field you've quoted. If you change the name of the field to "fluglehorn" or something else that's (um) unlikely to be elsewhere on your page, it may well work. That's because the namespace used by getElementById is (sadly) quite crowded.
Alternately, are you sure that genarate is appearing at global scope? (E.g., it's outside of all other functions.) Because your onsubmit attribute requires that genarate be global. So this works:
<form action="#" method="get" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
<script>
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
</script>
but for example this would not:
<form action="#" method="get" onsubmit="genarate('hiddenField')">
<input type="hidden" id="hiddenField" name="hidden" value=""/>
<input type="submit" name="submit"/>
</form>
<script>
(function() { // Begin scoping function to avoid global symbols (not uncommon)
function genarate(hiddenField){
var field = document.getElementById(hiddenField);
field.value = "new Value";
}
})();
</script>
Also recommend using a debugger (there's no excuse for not using client-side debuggers here in 2011) to set a breakpoint on the genarate function and walk through, to see what's going wrong.
crud.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="JavaScript.js"></script>
</head>
<body>
<input type="text" name="name" id="name" onfocus="opConfig.reloadPrice()">
<button type="button" onclick="myFun()">submit</button>
<button type="button" onclick="update()">update</button>
<br><br>
<p id="table"></p>
</body>
</html>
JavaScript.js
var arr = [];
var index;
function myFun()
{
var name = document.getElementById('name').value;
arr.push(name);
table();
}
function table(){
var text = "<table border=1><tr><th>username</th><th>action</th></tr>"
for (var i = 0; i < arr.length; i++) {
text+="<tr><td>"+arr[i]+"</td><td><button
onclick=myDELE("+i+");>delete</button><button
onclick=myEdit("+i+");>edit</button></td></tr>"
}
text+="</table>";
console.log(text);
document.getElementById('table').innerHTML = text;
tablehidden();
}
function myDELE(i)
{
var name = arr.splice(i,1);
// name.splice(i,1);
console.log(name);
table();
tablehidden();
}
function tablehidden(){
if (!arr.length) { document.getElementById('table').hidden=true; }
else{document.getElementById('table').hidden=false;}
}
function myEdit(i)
{
text = document.getElementById('name').value = arr[i];
index = i;
}
function update(){
arr[index]=document.getElementById('name').value ;
table();
tablehidden();
}
Should I use window.open() inside window.onload function in Javascript? If not how to use that in window.onload="url". Please show me some example. Here below is what am trying to do. The text validation is working fine. Once I enter run string its not going to open the `evovle.jsp (concern url)
e.g.:
<html>
<head>
<script type="text/javascript">
function validatetxtbox()
{ var txtfield;
txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
window.onload=function(){window.open('evolve.jsp''welcome' 'width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes');}
}
else { alert("Try again"); }
}
</script>
</head>
<body>
<input type="text" id="txtbox" maxlength="3">
<input type="button" id="btn" value="Send" onclick="validatetxtbox()">
</body>
</html>
<html>
<head>
<script ="text/javascript">
function check() {
var txtfield; txtfield =document.getElementById('txtbox').value;
if(txtfield == "run")
{ alert("you entered string right");
var newwin=window.open('evolve.jsp','welcome','width=500,height=500,menubar=yes,status=yes,location=yes,toolbar=yes');
newwin.focus();
}
else { alert("Try again"); }
}
</script>
</head>
<body>
Enter a Keayword
<input type="text" id="txtbox" onblur="check()" />
</body>
</html>
Use querystring and check in evolve.jsp
Ex evolve.jsp#alertme