Hey guys taking a stab at my first Javascript validation but getting stuck pretty early on. I am calling a JS function from onkeyup="" but I receive the error:
Object is not a function
Code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h3> My Sign Up Form</h3>
<form name="signup">
<label>First Name<input type="text" name="fname" onkeyup="fname()"/></label><div id="fnameVal"></div><br>
<label>Last Name<input type="text" name="lastname" onkeyup="fourchars();"/></label><div id="lnameVal"></div><br>
<!--<label>Email<input type="text" name="email"/></label><div id="email"></div><br>
<label>Password<input type="password" name="password"/><div id="password"></div></label><br>
<label>ConfirmPassword<input type="password" name="confirmpassword"/><div id="confirmpassword"></div></label><br>-->
<label><input type="submit" value="Submit"/></label>
</form>
</body>
<script>
function fname(){
alert('jjjj');
}
</script>
</html>
you can't have your function name same as your control name. i.e. fname & fname()
<label>First Name<input type="text" name="fname" onkeyup="validateFname()"/></label><div id="fname"></div>
OK, Try something like this.
replace your onkeyup to this. I know it is the same code but sometimes it works when you relace you code by the same code form an other site. BTW it works fine if I test is on a site.
onkeyup="fname()"
Raname your function to be different from the input name.
e.g.
<script>
function valname(){
alert('jjjj');
}
</script>
</head>
<body>
<h3> My Sign Up Form</h3>
<form name="signup">
<label>First Name<input type="text" name="fname" onkeyup="valname()"/></label><div id="fnameVal"></div><br>
It seems as fname is a reference to your element in your form. Try changing the name of the function or the name of element.
function fnameFunc() {
alert('jjjj');
}
And the HTML
<input type="text" name="fname" onkeyup="fnameFunc()"/>
You can use jquery on keyup
$(document).ready(function() {
$('body').on("keyup", "input[name=fname]", function() {
alert($(this).val());
// do your stuff
});
});
JSFIDDLE DEMO
Related
So, I have tried a number of solutions but none of them have worked and I am exhausted in terms of reading documentation at this point. This is my first post on StackOverflow. Please, be gentle.
I am trying to create a random search string query engine. Every time you type in a search form, it selects from an array that has been randomized to use a different search engine string. I can't figure out what I am doing incorrectly.
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script>
var randomlinks=new Array()
randomlinks[0]="https://duckduckgo.com/?q="
randomlinks[1]="https://www.startpage.com/do/dsearch?query="
randomlinks[2]="https://dogpile.com/serp?q="
randomlinks[3]="https://google.com/search?q="
function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}
</script>
</head>
<body>
<div class="search-wrapper ">
<div class="input-holder ">
<form id="bar" role="search" method="get" class="search-form" action="randomlink()">
<input type="text" class="search-input"/>
</form>
</div>
</div>
</html>
Thank you in advance for your time!
I think this is what you're trying to do (I tried and it works).
In the form action add javascript to refer to the function then you can get the value from the input using getElementById and pass it as a parameter to your function :
<!DOCTYPE html>
<html>
<head>
<script>
var randomlinks=new Array()
randomlinks[0]="https://duckduckgo.com/?q="
randomlinks[1]="https://www.startpage.com/do/dsearch?query="
randomlinks[2]="https://dogpile.com/serp?q="
randomlinks[3]="https://google.com/search?q="
function randomlink(link){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]+link;
}
</script>
</head>
<body>
<div class="search-wrapper ">
<div class="input-holder ">
<form id="bar" role="search" method="GET" class="search-form" action="javascript:randomlink(document.getElementById('abc').value)">
<input type="text" class="search-input" id="abc"/>
<input type="submit"/>
</form>
</div>
</div>
</html>
form.html
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br/><br/>
<input type="submit" />
</form>
</body>
</html>
Output: undefined
After typing my name in input box it is showing undefined.
The Problem is on your input. you should change t he name=="name" to name="name". Then change your validate function to us getElementsByName. See the code below:
<html>
<head>
<script>
function validate(){
var name=document.getElementsByName('name')[0].value;
document.write(name);
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name"><br><br>
<input type="submit" />
</form>
</body>
</html>
dont make use of name attribute it old way of W3C standard, from long time they are suggesting make use of id attribute.
you code needs to be like this
<input type="text" id="txtname"/><br><br>
and javascript like
var name=document.getElementById("txtname").value;
You just have to fix your name=="name". In HTML we use = to assign attribute values/
function validate() {
var name = document.Myform.name.value;
document.write(name);
}
<html>
<head>
<script src="validations.js"></script>
</head>
<body>
<form name="Myform" onsubmit="return validate()">
Enter name: <input type="text" name="name" /><br><br>
<input type="submit" />
</form>
</body>
</html>
the validate function doesn't return anything as would usually be the case for this type of event hander ~ it will instead simply write the name ~ is that the desired result?
<html>
<head>
<title>form validation</title>
<script src="validations.js"></script>
<script>
function validate(e){
e.preventDefault();
var name=e.target.querySelector('input[ name="name" ]').value;
document.write( name );
return true;
}
</script>
</head>
<body>
<form name="Myform" onsubmit="return validate(event)">
Enter name: <input type="text" name="name"/><br><br>
<input type="submit" />
</form>
</body>
</html>
The onSubmit tag does not seem to be working. I am trying to call the submit() javascript function when the submit button is clicked on the webpage. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="login.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.serializeJSON.min.js"></script>
</head>
<body>
<script type="text/javascript">
function submit() {
.......
}
</script>
<div class="login-container">
<div class="title">Login Form</div>
<div class="form-fields">
<form name="login-form" id="login-form" onSubmit="return submit()">
<input type="text" name="username" id="username" placeholder="Username" required></input>
<input type="password" name="password" id="password" placeholder="Password" required></input>
<input type="submit" value="Log in" id="submit-button"></input>
</form>
</div>
</div>
</body>
There is a naming conflict.
The form has a native built in function which can be seen with
<form id="x" onsubmit="console.log(submit);"><input type="submit"/></form>
When you look at the console you will see
function submit() { [native code] }
So when you call submit() you are calling that native submit function aka document.getElementById("login-form").submit(); and not yours. To get around it, change the name.
Change the function name to something other than submit.
function xSubmit(){
}
and
<form name="login-form" id="login-form" onSubmit="return xSubmit()">
You can not use "submit" as the function name. Submit is a JavaScript keyword. Simply rename your function to something else.
function submitForm() {
console.log('I work now');
}
<form name="login-form" id="login-form" onSubmit="return submitForm()">
It should be a lowercase s.
<form name="login-form" id="login-form" onsubmit="return submit()">
check out http://www.w3schools.com/jsref/event_onsubmit.asp for more info.
EDIT:
Sorry, I did some testing and found out that it was the name submit.
Take a look at this fiddle http://jsfiddle.net/9z95chze/.
You also shouldn't need to say return
I am trying to highlight an input field in my form when a particular radio buttons is selected. While I have accomplished this, I do not understand why my particular solution works.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<meta charset="UTF-8">
<script type="text/javascript" src="script.js"></script>
<title>Testing jQuery on Forms</title>
</head>
<body>
<div id="form">
<h3>The form</h3>
<form name="main_form">
<fieldset style="width: 300px;">
<legend>General Information</legend>
<p>Do you have a name?</p>
<input style="float: left" name="name_or" id="name_or_yes" type="radio" value="yes">
<legend for="name_or_yes">Yes</legend>
<input style="float: left" name="name_or" id="name_or_no" type="radio" value="no" checked="checked">
<legend for="name_or_no">No</legend>
<br/>
Name: <input type="text" name="name" id="#name_field">
</fieldset>
</form>
<button id="submit_form">Submit</button>
</div>
<div id="results"></div>
</body>
</html>
Here is the JS:
$(document).ready(function() {
$('#name_or_yes').click(function() {
$('input[name=name]').focus();
});
$('#submit_form').click(function() {
var toAdd = $("input[name=name]").val();
$('#results').append("<p>"+toAdd+"</p>");
});
});
I don't understand why focus() does not work on the name input field when I use it's id (#name_field'). It only works when i use the input[name=name] method. This is doubly confusing because the following works perfectly well:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#txtfocus").focus();
});
</script>
</head>
<body>
<input type="text" id="txtfocus2"><br/>
This text box is set focused: <input type="text" id="txtfocus">
</body>
</html>
Any help or advice is appreciated!
Look at the id here:
<input type="text" name="name" id="#name_field">
Try it like this:
<input type="text" name="name" id="name_field">
The # is the id selector, but should not appear in the HTML.
Thank you both!
These are the kind of mistakes which happen when you spend too much time looking at the same piece of code!
I would like to upvote you however, I do not have sufficient reputation points to do so. :(
input's ID should be "name_field" instead of "#name_field":
<input type="text" name="name" id="name_field">
I looked and didn't find the case I have here -- a lot of the prior answers said 'wait for the 'onload' to call getElementById' but that's what I started with and it doesn't work -- getElementById returns null in this code in my index.php file:
<html>
<script type="text/javascript">
function checkPwd()
{
var thePwd = document.getElementById("theUsersPassword");
alert("the var thePwd is: " + thePwd);
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Beta:</title>
</head>
<body onload="checkPwd()">
<form method="post" action="index.php">
Beta: <input name="theUsersPassword" type="password"><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
getElementById get an element by ID not by name. You must change
<input name="theUsersPassword" type="password">
to
<input name="theUsersPassword" id="theUsersPassword" type="password" />
You are mixing up name and id
Edit:
In other words, you need to change
<input name="theUsersPassword" type="password">
to
<input name="theUsersPassword" id="theUsersPassword" type="password">
You can use the code below. getElementById returned an object not a value.
JavaScript
function checkPwd()
{
var thePwd = document.getElementById("theUsersPassword").value;
alert("the var thePwd is: " + thePwd);
}
Html
<input name="theUsersPassword" id="theUsersPassword" type="password">