this code returns "ReferenceError: work is not defined" when clicking the submit button and I haven't found why. (I'm also using CakePHP)
My idea is to create a validator object, create functions in it, and then instantiate and use it.
HTML:
<html>
<head>
<script>
<?php echo $this->Html->script('validate'); ?>
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<form name="form" action="mailtest.php" method="post">
name <input type="text" name="name">
mail <input type="text" name="mail">
comment <input type="text" name="comment">
<input type="button" name="button" value="click"
onClick="work(this.form)">
</form>
</body>
</html>
JavaScript:
var validator = function() {
var name;
name = form.name.value;
var mail;
mail = form.mail.value;
var comment;
comment = form.comment.value;
validate: function()
{
form.name.value = "NO!";
}
}
function work(form)
{
v = new validator();
v.validate();
}
If you change your validator function to the following the error disappears
var validator = function() {
var name;
name = form.name.value;
var mail;
mail = form.mail.value;
var comment;
comment = form.comment.value;
this.validate = function()
{
form.name.value = "NO!";
}
}
Firstly, check your syntax it is not valid. You cannot set properties to function like you do with validate: function() {...}.
Secondly, you don't path this.work to validator so it won't be defined inside it.
Thirdly, I am not sure this is a good idea to make new instance ob object every time you click the button. Why don't just use simple function call here?
<head>
<script>
function validate(form) {
var name = form.name.value,
mail = form.mail.value,
comment = form.comment.value;
form.name.value = "NO!";
};
function work(form) {
validate(form);
}
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<form name="form" action="mailtest.php" method="post">name
<input type="text" name="name">mail
<input type="text" name="mail">comment
<input type="text" name="comment">
<input type="button" name="button" value="click" onClick="work(this.form)">
</form>
</body>
Also, if want want to understand objects in JS (it can be tricky) and you them, I would recommend you read this two blog posts: JavaScript Objects in Detail and OOP In JavaScript: What You NEED to Know.
The problem was that in this case (weird) Cakephp didn't recognize the file by calling it with echo $this->HTML->script(validate); so I had to use validate.js .....
Related
I was wondering if it is possible to set user input as a variable..
My code is:
<input id="userBlank" type="text" value="Click" onclick="userInput();">
<div id="userInput"></div>
<script>
function userInput(){
userInput.innerHTML = userBlank.value
</script>
So basically, I want to how I can set userInput.value as a variable so I can use it to calculate other things. I tried putting var at the front but it didn't work..
Put you input inside of a form and get the value by using getElementById!
<form id="form" onsubmit="return false;">
<input id="userBlank" type="text" value="Click" onclick="userInput();">
</form>
<script>
function userInput(){
var userInput = document.getElementById("userBlank").value;
alert(userInput);
}
</script>
When you are using id in an element, use document.getElementById
<script>
function userInput(){
var myValue = document.getElementById('userBlank').value ;
document.getElementById('userInput').innerHTML = myValue ;
}
</script>
If you want to use function then you can do like this
<form id="form" onsubmit="return false;">
<input id="userBlank" type="text" value="Click" onclick="userInput();">
</form>
<script>
function userInput(){
var userInputVar = document.getElementById("userBlank").val();
console.log(userInputVar)
alert(userInputVar);
}
<script>
I am creating an application. The HTML file is like the following:
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script type="javascript">
function validateform(){
alert("Hello");
var firstnameErr="";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = "required";
valid = false;
} else if (!fname.value.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script type="javascript">
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
When I click on the submit button, it straightaway redirects to "ViewList.php" without seeming to run validatefom(). I added the alert() to check whether the function is executing or not. I want my form to submit only when it meets the validation requirements, not when valid is false.
Besides Typo errors, The main problem that I found is your script is not get executed and your validateform() method is not available. It happened because your script tag type attribute is not correct <script type="javascript">
To make it work you need to change it to this
<script type="text/javascript">
And please change your validation method validateform() as it has too may typo.
What is wrong with the code is that the OP is validating the old-fashioned way with an HTML5 form. Prior to HTML5, you had to use JavaScript for front-end validation; now things are much simpler and easier, too. Of course, the OP would replace the value of the action in the following example with the desired URL.
Note: there were errors in the OP's code, but if you get rid of the JavaScript and code the HTML making sure to add the following to the text input:
required pattern="[a-zA-Z]+"
then the form validates. In other words, you don't have to work so hard when you use HTML5 for form validation :)
<form id="myform" name="myform" method="POST" action="https://www.example.com">
<label for="fname">Firstname</label>: <input name="fname" placeholder="First name" maxlength="20" required pattern="[a-zA-Z]+">
<input type="submit" name="submit" value="Submit">
</form>
For those who prefer to do things the old-fashioned way, see this revision of the OP's code. Note: it uses a minimum of variables, employs short-cuts for less verbosity, and is organized with functions. Also, it is kind to the user's hands, too.
The way you have done you will never be able to use document.write to output anything, use this, working for me:
<!DOCTYPE html>
<script>
function validateform(){
alert("Hello");
var valid = true;
var fname = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (fname==null || fname=="") {
firstnameErr = 'required';
valid = false;
} else if (!fname.match(types)) {
firstnameErr = 'format error';
valid = false;
}
document.getElementById('msg').innerHTML = firstnameErr;
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">* <label id='msg'></label> </span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
It looks you have a series of typo in your code,
try this
<!DOCTYPE html>
<html>
<body style="background-color: #ccc">
<script>
function validateform() {
var firstnameErr = "";
var valid = true;
var name = document.myform.fname.value;
var types = /^[a-zA-Z]+$/;
if (name == null || name == "") {
firstnameErr = "required";
valid = false;
} else if (!name.match(types)) {
firstnameErr = "format error";
valid = false;
}
return valid;
}
</script>
<form name="myform" method="post" onsubmit="return validateform()" action="/Project/ViewList.php">
Firstname : <input type="text" name="fname" placeholder="First name" maxlength="20">
<span class="error">*
<script>
document.write(firstnameErr);
</script>
</span>
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>
<form action="formoneaction" method="post">
<input type="text" id="t1" />
<button type="sumbit" class="btn">Insert</button>
</form>
<form action="formtwoaction" method="post">
<input type="text" id="t2" />
<button type="sumbit" class="btn">Insert</button>
</form>
<script>
var t1 = document.getElementById('t1');
t1.onkeyup = t1.onchange = function() {
document.getElementById('t2').value = this.value;
};
</script>
How can I get the script to work when the two elements are in separate forms? The script works when none of them are in forms.
I've never learned JS before so I may not understand very well when someone explains a bunch of jargon. Sorry but I'll try my best!
Try out below Code, which copies data from textbox to TextArea:
$("#textArea").append("\n * " + $("#textBox").val());
Working Demo
I'm having allot of trouble with this and I've tried many different ways to do this and I just ran out of ideas.
Here's my code:
var user = document.Log.User;
var pass = document.Log.Pass;
function Login (){
if(user.value == "Admin"){
window.open();
}
}
Here Is the HTML side:
<form name="Log">
<input class="Log" type="text" name="User">
<input class="Log" type="password" name="Pass">
<input type="button" value="Login" name="But" onclick="Login()" style="width: 70px;position: relative;left: 150px;top: -25px;">
</form>
If your variable assignments are in Javascript that's loaded before the body, then the elements that they refer to don't exist yet, and you should be getting errors. There are a number of ways to fix this:
Put the Javascript in the body somewhere after the form.
Put the Javascript inside window.onload=function() { ... }.
Assign the variables inside the Login() function.
use id Selector an put your variable assignments inside Login function:
HTML :
<form name="Log">
<input id="User" class="Log" type="text" name="User">
<input id="Pass" class="Log" type="password" name="Pass">
<input type="button" value="Login" name="But" onclick="Login()" style="width: 70px;position: relative;left: 150px;top: -25px;">
</form>
JS:
function Login (){
var user = document.getElementById("User");
var pass = document.getElementById("Pass");
if(user.value == "Admin"){
window.open();
}
}
I don't know why you are doing this kind of login logic stuff with js, but, this would work:
function Login (){
var user = document.querySelector('form[name=Log] [name=User]');
var pass = document.querySelector('form[name=Log] [name=Pass]');
if(user.value == "Admin"){
window.open("yoururl.com");
}
}
Hope this helps. Cheers
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();
}