here's a little code I try to run on Firefox:
<html>
<head>
<title>Ex4: My Sequence Finder</title>
<script type="text/javascript">
function action() {
alert("action");
if (formValidation() == false)
return;
}
function searchInput() {
alert("searchInput");
return;
}
</script>
</head>
<body>
<font face="arial" size="5" color="blue">Input section</font> <br/>
<p>Query Sequence</p>
<form name="form">
<textarea id="input" rows="8" cols="60"></textarea><br/>
<textarea id="enhancers" rows="4" cols="30"></textarea><br/>
<textarea id="silencers" rows="4" cols="30"></textarea><br/>
<input type="button" value="button1" onclick="action()" />
<input type="button" value="button2" onclick="searchInput()" />
<div id="results"></div>
</form>
</body>
</html>
As you can see one of the button calls searchInput() and that works fine, the other
is supposed to call action(), but I get "action() is not a function". Btw they both just call alert() at this point, so I know it got in the function.
I have no idea as to why this happens, any help would be great.
Thanks!
Form elements have an action attribute (specifying the URI that should process the form data).
This attribute name "overrides" the javascript function name, causing the error you see.
Rename your function to something else and it will work.
You can solve this by using
var function1 =new function(){
var action=new function() {
alert("action");
if (formValidation() == false)
return;
}
}
<input type="button" value="button1" onclick="function1.action()" />
action calls formValidation which doesn't seem to be a function. Maybe the parser took this error and chose not te register action as a function because of it.
Related
In HTML5, returning false in a form gives the red line, indicating there is an error, even though I am able to achieve my expected output. Is there any way to fix this line and have a bug free code as it is triggering my OCD.
Also, I am a big beginner with my code so please try to keep it as simple as possible. i do not understand JQUERY at all.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<form action="#" method="get" onsubmit="userRegister1(event)">
<input type="text" name="name" />
<button type="submit">Click me</button>
</form>
</body>
</html>
<script>
function userRegister1(event) {
event.preventDefault();
return false;
}
</script>
<form action="#" method="get">
<input type="text" name="name">
<button type="submit" onclick="
// you can code javascript code here, this's same how you code in <script>.....</script>
function userRegister1(){
console.log('your code in userRegister1 function');
}
userRegister1();
// so you return false that's wrong syntax
//onsubmit='userRegister1(); return false;'
// return must be use in function, in this case you can use in function userRegister1()
// BUT i don't suggest use this way
">Click me</button>
</form>
I'm making an if statement but it doesn't seem to work. I think it has to do with the :focus (jquery is implemented)
I tried using $("input:focus") but when I pressed enter anywhere, (focused or not) it shows the alert.
<script type="text/javascript" src="script.js"></script>
<body style="background-color: #90EE90;">
<center>
Sample text
<br><br><br><br>
<input type="text" name="user-input" placeholder="insert name">
<br><br>
</center>
<script>
var input = $('#user-input').val();
$(document).ready(function () {
$(document).keypress(function (key) {
if (key.which === 13 && $('#user-input').is(':focus')) {
alert("hello");
}
})
})
</script>
</body>
When I press enter while user-input is highlighted, it should've gave the Hello alert, but instead, nothing happens.
change name="user-input" to id="user-input"
I have been trying to implement some JavaScript that would disable a submit button until all fields were filled. I found a great here: Disabling submit button until all fields have values. Hristo provided a link that does exactly what I need here: http://jsfiddle.net/qKG5F/641/.
My problem is that when I try to put together a full "minimum working example" I am completely stumped. I'm sure there's some minor aspect that I'm missing but here's what I've come up with:
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
} else {
$('#register').removeAttr('disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
});
})()
</script>
</head>
<body>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<div id="test">
</div>
</body>
I simply copied/pasted and added in what I thought would be necessary to make the page work but my submit button remains permanently disabled. What simple part am I missing to make this work??
Thanks!
You have to surround it with an onload function:
$(window).load(function(){
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
});
If you look at the source of the jsFiddle, you'll see it got wrapped the same way.
I tested this on my system, works with your own version of jquery, as well as code with a little change and wrapping javascript in document.ready().
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
} else {
$('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
}
});
});
</script>
</head>
<body>
<form>
Username<br />
<input type="text" id="user_input" name="username" /><br />
Password<br />
<input type="text" id="pass_input" name="password" /><br />
Confirm Password<br />
<input type="text" id="v_pass_input" name="v_password" /><br />
Email<br />
<input type="text" id="email" name="email" /><br />
<input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<div id="test">
</div>
</body>
</html>
Your original js is an immediately-invoked function expression. Here's a link explaining that pattern:
http://benalman.com/news/2010/11/immediately-invoked-function-expression/
You defined an anonymous function and then immediately called it. By the time your html page had loaded, the script had already run. As others correctly answered, you need to instead wait for all the DOM elements to load before executing the script.
While
$(window).load(function(){};
works, you should probably use the jQuery version of this:
$(document).ready(function(){ };
For one, it's the jQuery idiom, and for another, $(window).load fires at a later time, where as $(document).ready() fires as soon as all DOM elements are available; not as soon as all assets (possibly large) are loaded.
Source: window.onload vs $(document).ready()
If you place the JavaScript (the entire script element) at the end of the page, right before the closing body tag, it should work. This is because the JavaScript needs to be run after the DOM is built. By placing your script after the page is loaded (and then immediately invoking it as you are doing), the document will be ready and it should work.
Working example: http://jsfiddle.net/NgEHg/
I am looking to create a button at the bottom of a form that will create an alert box that will show the form data entered. Form includes:
First Name
Last Name
Address 1
Address 2
City
State
Zip
Phone
Fax
Once the form is completed, the button is clicked and an alert box pops up showing the form data entered.
Does anyone know how to accomplish without the form actually being submitted or validated? There is no database for the form data to be submitted to, so there is no database to pull the information from.
Any help would be greatly appreciated.
I have not included the form code due to its length, but the current code I am working with for the Alert Box looks like this:
<script>
function display_alert()
{
alert("");
}
</script>
<body>
<input type="button" onclick="display_alert()" value="Display alert box">
</body>
If I get it right you need something like this:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById('send').onclick = function(e){
alert(document.getElementById("name").value);
return false;
}
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="name" id="name" />
<input type="submit" name="send" id="send" value="send" />
</form>
</body>
</html>
I don't really get what you mean with a database to pull the information from, but the example uses a click event to get the data from the form field and shows it in an alert without a submit.
html code:
<html>
<SCRIPT SRC="PR8_4.JS"></SCRIPT>
<body>
<form name=details>
<table>
<tr><td>ENTER FRIST NAME:<input type=text name=fname></td></tr>
<tr><td>ENTER LAST NAME:<input type=text name=lname></td></tr>
<tr><td>ENTER PHONE NUM :<input type=text name=phnum></td></tr>
</table>
<input type="button" value="Click Me" onclick="display();">
</form>
</body>
</html>
javascript code:
function display()
{
var x=document.details.fname.value;
var y=document.details.lname.value;
var z=document.details.phnum.value;
alert("FIRST NAME:"+x+" "+"LAST NAME:"+y+" "+"PHONE NUMBER:"+z);
}
To stop a form submitting you can create an onsubmit event within the tag and return false - e.g. ...form elements.... This has the benefit of working when someone submits the form by pressing the enter key as well as pressing the submit button.
Thus, to achieve what you desire you could create a function (lets call it formAlert) and call it from the onsubmit event e.g. ...form elements...
The formAlert function would look something like:
function formAlert() {
alert_string = '';
alert_string = alert_string + document.getElementById('first_name').value;
alert_string = alert_string + ' ';
alert_string = alert_string + document.getElementById('last_name').value;
alert(alert_string);
}
and this would correspond to a form looking like:
<form id="foo" onsubmit="formAlert(); return false;">
<p><label for="first_name">First Name<label><input type="text" id="first_name" value="fred" /></p>
<p><label for="last_name">Last Name<label><input type="text" id="last_name" value="blogs" /></p>
<p><input type="submit" value="click me" /></p>
</form>
Note1, this won't be a pretty modal box - it'll simply display "fred blogs" in a Javascript alert box.
Note2, if there is a Javascript error your form will still submit (although in the example here it'll submit to itself).
Here is a JS Fiddle demonstrating the above code: http://jsfiddle.net/D59su/
I think this might be what you're looking for:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="javascriptform.css">
</head>
<body>
<form name= "details"><div class="box1"><div id="a"><input type="text" name="lastname" placeholder="LAST NAME"></div><br>
<div id="b"><input type="text" name="firstname" placeholder="FIRST NAME"></div><br>
<div id="c"><input type="e-mail" name="email" placeholder="E-MAIL"></div><br>
<div id="d"><input type="password" name="password" placeholder="PASSWORD"></div><br>
<div id="sub-button"><button onclick="getdetails();">submit</button></div></form>
</div>
<script>
function getdetails()
{
var a = document.forms["details"]["lastname"].value;
var b = document.forms["details"]["firstname"].value;
var c= document.forms["details"]["email"].value;
alert("Your name is "+a+" "+b+". Your e-mail is "+c);
}
</script>
</body>
</html>
It Is Very Simple
Using .value will help.
HTML:
<form onsubmit="return myFunction()>
<input type="text" id="name>
<input type="submit" value="SEND">
Use return before your function
Javascript:
function myFunction () {var name = document.getElementById("name").value; alert("Hi " + name)}
After Submitting It Will Show As (If I Write Alex and Submit It)
Hi Alex
Hope it will work
i am sure this is quite a numb question to ask and most probably the most basic one. i am just a starter for JS.
i am trying to access the value of input field by document.getElementById and it is returning null to me i am not sure why here is the code.
<html>
<head>
<script type="text/javascript">
var name = document.getElementById("e_name");
alert(name);
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
</body>
</html>
the following code prints the value null in alert box. what is wrong?
Update :
When i use the following code.
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById('name').value;
alert(name);
</script>
</body>
</html>
it prints Enter your Name but if i change the value it does not print the changed value. i would want to perform the following for validation purpose
a) holds the value of e_name in a javascript variable in the head tag
b) so that i should be able to process it for validation.
how do i do it?
Because you're calling that line of script even before document object is ready!
Try this
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById("e_name").value;
alert(name);
</script>
</body>
Or this in your head tag.
<script type="text/javascript">
window.onload = function() {
var name = document.getElementById("e_name");
alert(name);
}
</script>
The Javascript code is executing before that HTML has loaded. The element with id="e_name" doesn't actually exist in the document yet.
function validate()
{
var nam=name.value;
alert("name"+nam);
}