Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.
Currently, the form fades even when no value is entered? I feel I'm missing something really simple here!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<meta charset="utf-8"-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="sidebarf">
<form id="sidebarform" name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
</div>
<script>
$("#sidebarformsubmit").click( function(){
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() )
});
});
</script>
</body>
</html>
Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the following:
HTML:
<div id="sidebarf">
<form id="sidebarform" name="myForm" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" />
<input type="submit" id="sidebarformsubmit" value="Submit" />
</form>
JS:
$(document).ready(function() {
$('#sidebarform').on('submit', function() {
if ($('#sidebarusername').val() == '') {
alert('First name must be filled out');
return false;
}
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() );
});
return false;
});
});
Working example:
http://jsfiddle.net/3z5x8/
Your validation is bound to the submit event. The click event will always be fullfilled.
Bind your handler to the submit event also
$("#sidebarformsubmit").submit( function(){.....
Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work
Related
could you please help me find out what's wrong? After login, it is supposed to redirect you to another page, but nothing happens. The user name is: Joshua and the password is: Joshua#123.
<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Joshua" && password == "Joshua#123") {
alert("Login successfully");
location.replace("www.youtube.com"); // Redirecting to other page.
} else {
attempt--; // Decrementing by one.
alert("You have " + attempt + " attempt left;");
// Disabling fields after 3 attempts.
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
</script>
<script src="js/login.js"></script>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password" />
<button type="submit" value="Login" id="submit" onclick="validate()" />
</form>
<b><i>Submit</i></b>
</div>
</div>
</body>
</html>
Try this:
window.location.replace("https://www.youtube.com")
You can move code inside window.addEventListener('load' or you can move script after dom at the end
Suggestion: use the entire URL with HTTP or HTTPS.
location.replace("https://www.youtube.com");
<script type="text/javascript">
window.addEventListener('load', (event) => {
var attempt = 3; // Variable to count number of attempts.
/// code here
});
</script>
As leonardofmed mentioned, better place your script just befor </body> closing tag,
because you need to load html first, so script can see elements, otherwise at it's start there is no elements yet, so this will cause error, as for redirecting you can use:
// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";
// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");
use <form><button type="button" ... instead
<form><button type="submit" ... has its own logic ("magic"), which is doing the problem.
use protocol in url location.replace("https://www.youtube.com"), otherwise it's relative path
BTW never validate password on client!!!
Suppose a function trigger on Click button
<!DOCTYPE HTML>
<html lang="en">
<!--getElementsByTagName.html-->
<head>
<title>getElementsByTagName.html</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="getElementsByTagName.css"/>
<script type="text/javascript">
//<![CDATA[
function getData(){
inputTag=document.getElementsByTagName("input");
divOutput=document.getElementById("output");
alert(inputTag.length);//length of input Tag
for(i=0;i<inputTag.length-1;i++){
if((inputTag[i].value=="") || (inputTag[i+1].value=="")){
alert("Please Enter Value");
}else{
a=inputTag[i].value;
b=inputTag[i+1].value;
}
}
$("#output").css("display","block");
divOutput.innerHTML="<strong>"+a+"<\/strong>";
divOutput.innerHTML+="<br\/>"+"<strong>"+b+"<\/strong>";
}//end function
//]]>
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Example getElementsByTagName</legend>
<label>Name</label>
<input type="text" id="txtName"/>
<label for="txtName">Password</label>
<input type="password" id="txtPassword"/>
<button type="button" onclick="getData()">
Submit
</button>
</fieldset>
<div id="output">
</div>
</form>
</body>
</html>
Is this right?? $("#output").css("display","block");
This code not working i.e. after click on submit button it doesn't show the output div?
Add this code:
$( "#output" ).on( "click", function() {
this.css("display", "block");
});
This question already has an answer here:
Javascript not working on submit
(1 answer)
Closed 5 years ago.
I recently started doing form validation and I am trying to understand something. I have yet to find this anywhere else on SE.
When I have onsubmit="return validateForm()" or onsubmit="validateForm()" in the <form> element, the form does not do anything. However, when I remove onsbumit from the form tag and instead do document.forms["favorite"].onsubmit = function validateForm() in the JS file, it works fine.
I got it working, but I am trying to understand why the "normal" method of onsubmit in the html isn't working.
For reference, here is my code as it works now:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="form.js"></script>
<title>Form</title>
</head>
<body>
<form name="favorite" action="#" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>
JS:
window.onload = function(){
document.forms["favorite"].onsubmit = function validateForm(){
var input = document.forms["favorite"]["car"].value;
if(input == ""){
alert("You missed an entry");
return false;
}
}
}
First of all we define a function and then we call that function. and you are calling that function before defining as you are using window.load.You need to define the validation function before window.load as you are using. Sorry for my poor English.
<script>
window.onload = function () {
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
}
</script>
define validateForm() function before window.load you do not need to write this function inside the window.load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<script>
function validateForm() {
var input = document.forms["favorite"]["car"].value;
if (input == "") {
alert("You missed an entry");
return false;
}
}
</script>
</head>
<body>
<form name="favorite" action="#" onsubmit="return validateForm();" method="post">
Favorite Car Brand: <input type="text" name="car">
<input type="submit" value="Submit">
</form>
</body>
</html>
I'm trying to get a search box that when it takes an input it sends the user to a specific page. But for some reason that, I cannot figure out, it doesn't do anything when an input is given. My code is the following:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
var input = document.getElementById("search");
function sendToPage(){
if (input.value == "happy"){
location.href="suggestion_happy.html";
}
else if (input.value == "sad"){
location.href="suggestion_sad.html";
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<form onsubmit="sendToPage()">
<input type="text" method="put" id="search" placeholder="Search" value="">
</form>
</div>
</body>
</html>
Please help I'm still kind of new to javascript :)
you don't need to create a form to do this
check out this code
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
location.href = "suggestion_happy.html";
return false;
}
else if (input == "sad"){
location.href = "suggestion_sad.html";
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<input type="text" method="put" id="search" placeholder="Search" value="">
<input type='submit' onclick="sendToPage();" />
</div>
</body>
</html>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
//location.href="suggestion_happy.html";
location.replace("suggestion_happy.html");
return false;
}
else if (input == "sad"){
location.replace("suggestion_sad.html");
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
<div>
<form action="" onsubmit="return sendToPage()" method="post">
<input type="text" id="search" placeholder="Search" value="">
</form>
</div>
I have edited my asnwer plz try this
there are two problems here:
submitting a form will always refresh the page. So onsubmit is
killing your app
by putting the js in the <head> your
document.getElementById call fails because that element doesn't
exist yet. Javascript belongs at the end of the page, just before
the closing </body> tag
I'm trying to get text from a text input, append it to a URL, and go to that URL, using Javascript. But when I submit, it appears to just reload the page.
http://jsfiddle.net/E3vv6/
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
}
</script>
</head>
<body>
<form onsubmit="loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>
You need to use event.preventDefault() in the submit function.
Live Demo (click).
Further, inline js (onsubmit in your html) is bad practice for a lot of reasons. Here are some: https://www.google.com/search?q=Why+is+inline+js+bad%3F
If would be better to get a reference to the form with javascript and attach the event listener.
<form id="myForm">
<input type="submit" value="Submit">
</form>
JavaScript:
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e) {
myFunction();
e.preventDefault();
});
function myFunction() {
console.log('submitted!');
}
You need to prevent the default behaviour of the onsubmit.
You could use return false:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
return false;
}
</script>
</head>
<body>
<form onsubmit="return loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>