So I've got a submit button with a class of search, when clicked and the value of the input with a class of searchBar is empty then searchBar display:block and doesn't submit the form. However i want to be able to close searchBar if the value is still empty but the submit (search) is clicked again.
$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
$('.searchBar').css('display', 'block');
return false;
} else {
return true;
}
});
HTML:
<form id="form" action="">
<input value="" type="text" placeholder="Product name or ID" name="search" class="searchBar" />
<input type="submit" readonly="readonly" class="search" />
</form>
CSS:
#form .searchBar {
display: none;
}
If my understanding of question is correct, You can toggle the display of the searchbox to achieve what you need
$('.searchBar').css('display', 'block'); // instead of this
$('.searchBar').toggle(); // put this
Based on your code i have done something like this
$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
$('.searchBar').show();
return false;
} else {
return true;
}
});
#form #search {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form" action="" method="post">
<input value="" type="text" placeholder="Product name or ID" name="search" id="search" value="testValue" class="searchBar" />
<input type="submit" readonly="readonly" class="search" />
</form>
You can check this example if you like
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
#form #search {
display: none;
}
</style>
</head>
<body>
<form id="form" action="" method="post">
<input value="" type="text" placeholder="Product name or ID" name="search" id="search" value="testValue" class="searchBar" />
<input type="submit" readonly="readonly" class="search" />
</form>
<script>
$('#form').submit(function() {
if ($.trim($(".searchBar").val()) === "") {
$('.searchBar').show();
return false;
} else {
return true;
}
});
</script>
</body>
</html>
If I've understand right you can try this piece of code:
var countClick=0;
$('#form').submit(function() {
countClick++;
if ($.trim($(".searchBar").val()) === "")
{
if(countClick==1)
{
$('.searchBar').css('display', 'block');
return false;
}
else
{
$('.searchBar').css('display', 'none');
return false;
}
}
else
{
return true;
}
});
Related
While creating login form to welcome page in HTML, CSS, js the problem faced is the return statement is not working.
create code for HTML inbuilt javascript.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loginbox">
<img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
<h1>Login Here</h1><br>
<form action="loginbox.html" method="post" onsubmit="return validate()">
<div>
<p>user name</p>
<input type="text" name="" placeholder="Enter User name" id="user name">
</div><br>
<div>
<p>password</p>
<input type="password" name="" placeholder="Enter password" id="password">
</div><br>
<input type="submit" name="" value="login"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
<script type="text/javascript">
var attempt = 3;
function validate()
{
var user name= document.getElementById("user name").value;
var password= document.getElementById("password").Value;
if(user name.value=="dr" && password.value=="8428")
{
return true;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// 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>
</body>
</html>
Using return false statement it should stop entering into welcome page, but in this code it's not working, it goes to next page.
Tried that onsubmit="return false; validate();" while using this code entire block gets stop & won't enter to welcome page.
You are using spaces in your id attribute which is incorrect, the id attribute must not have anykind of spaces. Plus, you are missing id="submit" on the submit button. In your code the JS is unable to execute this line
document.getElementById("submit").disabled = true;
Because the submit button doesn't have any ID.
Below has the errors fixed. This should work
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loginbox">
<img src="C:\Users\Hp\Pictures\Camera Roll\avatar2.png" class="avatar">
<h1>Login Here</h1><br>
<form action="loginbox.html" method="post" onsubmit="return validate()">
<div>
<p>user name</p>
<input type="text" name="" placeholder="Enter User name" id="username">
</div><br>
<div>
<p>password</p>
<input type="password" name="" placeholder="Enter password" id="password">
</div><br>
<input type="submit" name="" value="login" id="submit"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
<script type="text/javascript">
var attempt = 3;
function validate()
{
var username= document.getElementById("username").value;
var password= document.getElementById("password").Value;
if(username == "dr" && password == "8428")
{
return true;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// 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>
</body>
</html>
The problem was that id was missing in submit, you have to declare id in the input that has type submit. Secondly, the logic was incorrect when you validate the form, return statement was missing in the else part when the attempt was not equal to zero.
<!DOCTYPE html>
<html>
<head>
<title>LOGIN FORM</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var attempt =3;
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "dr" && password == "8428") {
return true;
} else {
attempt--;// Decrementing by one.
alert("You have left " + attempt + " attempt!");
// 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;
}
return false;
}
}
</script>
</head>
<body>
<div class="loginbox">
<h1>Login Here</h1><br>
<form action="/loginbox.html" name="myForm" onsubmit="return validateForm()">
<div>
<p>user name</p>
<input type="text" name="userName" placeholder="Enter User name" id="username">
</div><br>
<div>
<p>password</p>
<input type="password" name="password" placeholder="Enter password" id="password">
</div><br>
<input type="submit" id="submit" value="login"><br>
Lost your pasword??<br>
don't have an account??
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form name="login"> <input type="text" placeholder="user name" name="userid"><br> <input type="password" placeholder="password" name="pswrd"><br><br> <input type="button" onclick "check(this.form)" value="Login" /> </form>
<script>
function check(form) {
if (form.userid.value == "name" && form.pswrd.value == "password") {
window.open('https://www.youtube.com')
} else {
alert("wrong")
}
}
</script>
</body>
</html>
its not working... every time I try it it does not read the code.
You have missed = operator after onclick
<input type = "button" onclick "check(this.form)" value ="Login"/>
^
I think I'm close to getting this right but I can't figure out how to change the colour of my submit button when the user hovers over it, I'm very new too javascript so any help would be greatly appreciated
here is my code:
<html>
<head>
<title>JavaScript</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function getName(){
var name;
name = window.prompt("Enter your name", "");
greeting = "User Information for " + name;
var txt= document.getElementById('txtWelcome');
txt.innerHTML=greeting;
}
function over() {
document.getElementById("Submit").style.background = 'Blue';
}
function out() {
document.getElementById("Submit").style.background = 'Yellow';
}
</script>
</head>
<body onload="getName()">
<form class="basic_form">
<h1 id="txtWelcome"></h1>
<p>Please input your login details</p>
<fieldset>
<label class="form_labels">Username:</label>
<input class="form_fields" type="text" name="username"><br>
<label class="form_labels">E-Mail:</label>
<input class="form_fields" type="email" name="email"><br>
<label class="form_labels">Password:</label>
<input class="form_fields" type="password" name="password">
<input class="form_buttons" type="Submit" value="Submit"><br>
</fieldset>
</form>
</body>
Here's the javascript solution:
var submitButton = document.getElementById('submit');
submitButton.addEventListener('mouseover', function() {
this.style.backgroundColor='blue';
});
submitButton.addEventListener('mouseout', function() {
this.style.backgroundColor='yellow';
});
https://jsfiddle.net/hsxdkkp6/
But why not just use css?
input[type=submit]:hover {
background-color: red;
}
https://jsfiddle.net/jkkj8dvt/
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
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