How would I fix,"Expected End Of Statement" in the code below?
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
}
</script>
It keeps telling me line 57 which is this line:
<input type="submit" value="Click Me" onClick="substitute();">
Here is the complete HTA link:
http://pastebin.com/fMg5e4RN
Use <form onsubmit="return substitute()" and return true or false depending on validation. Remove type="javascript" or fix it as text/javascript
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return false;
}
// not sure what the following two lines are for
var myTitle = document.getElementById('title');
myTitle.innerHTML = myValue;
return true; // allow submit
}
</script>
and use
<form action="some action" onsubmit="return substitute();">
<input type="text" id="myTextBox"/>
<input type="submit" value="Click Me" />
</form>
Related
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;
}
}
I am doing some form validation in JSP, on click on submit button "validate_access()" function is not called or not working. Sometimes this function displays a alret box and then stop doing any thing . Please tell what is wrong with this piece of code.Here is a piece of code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data management system</title>
<script language="JavaScript" type="text/javascript">
function validate_access()
{
var a = document.forms["myForm1"]["MISDN"].value;
var b = document.forms["myForm1"]["Issue"].value;
var c = document.forms["myForm1"]["SR"].value;
var d = document.forms["myForm1"]["date"].value;
var numbers = /^[0-9]+$/;
var alpha= /^[a-zA-Z]+$/;
var Datee= /^\d{1, 2}\/\d{1, 2}\/\d{4}$/;
if(document.myform1.MISDN.value=="" && document.myform1.Issue.value=="" && document.myform1.SR.value=="" && document.myform1.date.value=="")
{
alert("Manadotry fields should not left blank");
document.myform1.MISDN.focus();
document.myform1.Issue.focus();
document.myform1.SR.focus();
document.myform1.date.focus();
return false;
}
else if(!a.value.match(numbers))
{
alert('Please input numeric characters only');
document.myform1.MISDN.focus();
return false;
}
else if(!(b.value.match(numbers) && b.value.match(alpha)))
{
alert('Please input numeric and alphabets only');
document.myform1.Issue.focus();
return false;
}
else if(!c.value.match(numbers))
{
alert('Please input numeric characters only');
document.myform1.SR.focus();
return false;
}
else if(!d.value.match(Datee))
{
alert('Please input correct date');
document.myform1.date.focus();
return false;
}
else
return true;
}
</script>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="continer">
<div class="myform1" style="height:200px; width:300px; float:left;">
<h2>1344 Access</h2>
<form name="myform1" action="access.jsp" method="get" onsubmit="return validate_access()">
<br/>MSISDN:<input type="text" name="MISDN" maxlength="11">
<br/>Issue:<input type="text" name="Issue" maxlength="13">
<br/>SR:<input type="text" name="SR">
<br/>Date:<input type="text" name="date" value="dd/mm/yy">
<br/><input type="submit" value="Submit">
<br/><input type="reset" name="Reset">
</form>
</div>
<div class="myform2" style="float:left;height:200px; width:300px;">
<h2>O.C.S</h2>
<form name="myform2" action="ocs.jsp" method="post" onsubmit="return validate_ocs()">
<br/>MSISDN:<input type="text" name="MISDN" maxlength="11">
<br/>SR:<input type="text" name="SR">
<br/>REASON:<input type="text" name="reason">
<br/><input type="submit" value="Submit">
<br/><input type="reset" name="Reset">
</form>
</div>
</div>
</div>
</body>
Problems in your javascript are:
the first if condition check is wrong you mean || in place of &&.
then next when you call match method on empty string a error probably raise like:
Uncaught TypeError: Cannot read property 'match' of undefined
you calling .focus() continuously that doesn't making any sense, call once with a condition check.
There is something wrong in this line:var a = document.forms["myForm1"]["MISDN"].value;
Look at your source code, your form name is "myform1" not "myForm1".
JavaScript is case sensitive.
http://en.wikipedia.org/wiki/JavaScript_syntax
in your js:
document.forms["myForm1"]
but in your form(html) it is:
<form name="myform1"
Try this:
function validate_access()
{
var a = document.forms["myForm1"]["MISDN"].value;
var b = document.forms["myForm1"]["Issue"].value;
var c = document.forms["myForm1"]["SR"].value;
var d = document.forms["myForm1"]["date"].value;
var numbers = /^[0-9]+$/;
var alpha= /^[a-zA-Z]+$/;
var Datee= /^\d{1, 2}\/\d{1, 2}\/\d{4}$/;
if(a == "" && b == "" && c == "" && d == "")
{ //as you have default value for d (date field), this condition will never match;
//either you can remove default value or provide different logic
alert("Manadotry fields should not left blank");
document.myForm1.MISDN.focus();
document.myForm1.Issue.focus();
document.myForm1.SR.focus();
document.myForm1.date.focus();
return false;
}
else if(a == "" && !a.match(numbers))
{
alert('Please input numeric characters only');
document.myForm1.MISDN.focus();
return false;
}
else if(!(b.match(numbers) && b.match(alpha)))
{
alert('Please input numeric and alphabets only');
document.myForm1.Issue.focus();
return false;
}
else if(!c.match(numbers))
{
alert('Please input numeric characters only');
document.myForm1.SR.focus();
return false;
}
else if(!d.match(Datee))
{
alert('Please input correct date');
document.myForm1.date.focus();
return false;
}
else
return true;
}
Your mistakes:
(i) form name spelling mistake (caseSensitive)
(ii) you used HTMLElement.value.value to check (in if conditions)
For example:
var a = document.forms["myForm1"]["MISDN"].value;
a.value.match(numbers); // it simply means HTMLElement.value.value (which will never work)
i need to make an html page when you put a password to. whenever the user insert the correct password he will be sent out to a website. if the user won't insert the correct password he will get a an error.(i need to do it with only javaScript.no jquery and stuff like that) this is what i did -
<form>
Write the password here:
<input type="text" id="putPass" name="go2" /> <br />
<input type="button" value="click here" id="press" onclick="pass()" />
</form>
<script type="text/javascript">
var password = ["1234","abcd","0000","1111","4321"]
function pass()
document.getElementById("putPass").value. //it says it has a syntax error and i dont know why...
if (this == password[])
{
document.write("good job!");
}
else
{
alert("try again!");
}
</script>
thank you.
You can try to do that using this code.
http://jsfiddle.net/VAK3N/
<form>
<input type="text" id="putPass" name="go2" />
<br />
<input type="button" value="click here" id="press" />
</form>
<script type="text/javascript">
var password = ["1234", "abcd", "0000", "1111", "4321"];
document.getElementById('press').onclick = function () {
var p = document.getElementById("putPass").value;
if (password.indexOf(p) > -1) {
alert("good job!");
} else {
alert("try again!");
}
}
</script>
Try this
<script type="text/javascript">
var password = ["1234","abcd","0000","1111","4321"];
function pass(){
var userPass = document.getElementById("putPass").value;
if (in_array(userPass, password)){
document.write("good job!");
}
else {
alert("try again!");
}
}
function in_array(needle, haystack){
for(var key in haystack)
{
if(needle === haystack[key])
{
return true;
}
}
return false;
}
</script>
var pass = document.getElementById("putPass").value;
var correct = false;
for (var i=0;i<password[].length;i++){
if (password[i] == pass){
correct = true;
break;
}
}
if (correct){
document.write("good job!");
} else {
alert("try again!");
}
Not sure if that exact code will work, but I think that you need to check each password individually in a for loop, you can't compare strings with entire arrays.
I didn't see first that you dont want to use jQuery. So then here is the working code for you.
JS:
var password = ["1234","abcd","0000","1111","4321"]
function pass(){
var input = document.getElementById('putPass').value;
var accepted= false;
for(var pass in password){
if(password[pass] == input ){
accepted= true;
}
}
if(accepted){
alert('good job!');
}else{
alert('try again!');
}
}
HTML:
<form>
<input type="text" id="putPass" name="go2" /> <br />
<input type="button" value="click here" onClick="pass();" id="passSender"/>
</form>
Here is my code:
<input type="text" id="fname">
<input type="button" onclick = "b();" value="change" />
<script>
function b(){
var fanme = document.getElementById('fname');
if(fname.value){
fname.value="";
}else{
fname.value="ffff";
}
</script>
I tried this, but the fname's value sometimes changed when I click the button twice. What's the matter?
On other browsers is OK
Try this : instead of Elements use Element and also close function with }.
function b(){
var fanme = document.getElementById('fname');
if(fname.value){
fname.value="";
}else{
fname.value="ffff";
}
}
Try this,
<input type="text" id="fname">
<input type="button" onclick = "b();" value="change" />
<script>
function b(){
var fanme = document.getElementById('fname').value;
if(fname == "" || fname == null || fname == "null"){
fanme = "Set the value as you want";
}else{
//proceed
}
</script>
i have this code which validates fields using regex expressions. at this moment it makes a popup in case something is wrong. i'd like to let go of this and to show a message maybe next to the field or above it. any help please?
here is the code:
<script>
function validate(form) {
var pwd = form.elements.pasa.value;
var eml = form.elements.pasa2.value;
if(5 > pwd.length || pwd.length > 25){
alert("error");
return false;
}
var rgx = /[a-zA-Z]|\d+/;
if(!rgx.test(pwd)){
alert("error");
return false;
}
rgx = /\s/;
if(rgx.test(pwd)){
alert("error");
return false;
}
if(8 > eml.length || eml.length > 40){
alert("error");
return false;
}
var rgx = /^\s*[a-z\d_]+(\.[a-z\d_]+)*#[a-z\d\-]{1,255}\.[a-z]{2,6}\s*$/;
if(!rgx.test(eml)){
alert("error");
return false;
}
rgx = /\s/;
if(rgx.test(eml)){
alert("error");
return false;
}
return true;
}
</script>
and the form:
<form name="Form1" method="post" action="action1.php" language="javascript" onSubmit="return validate(this);" id="Form1">
<input name="pasa" class="field" type="text">
<input name="pasa2" class="field" type="text">
<input type="submit">
</form>
thanks
Replace alert() calls with code that puts a message in the right place. Things like createElement, appendChild and other fundamental DOM methods might be useful.