I just started working with JS again (it's been awhile) so I'm a bit rusty! I'm trying to make an input come into focus when a button is pressed. Can anyone explain why this works in the snippet but not in my document?
document.getElementById('Search_Button').addEventListener('click', function ()
{
document.getElementById('Search_Input').focus();
});
<input type="checkbox" id="Search_Button" />
<label for="Search_Button"><div id="Search_Bar_Dismiss_Box"></div></label>
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button"><img src="SVG/Back_Arrow.svg" id="Cancel_Search"></label>
</div>
Here is my entire document:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.getElementById('Search_Button').addEventListener('click', function()
{
document.getElementById('Search_Input').focus();
});
</script>
</head>
<body>
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<label for="Search_Button"><div id="Search_Bar_Dismiss_Box"></div></label>
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button"><img src="SVG/Back_Arrow.svg" id="Cancel_Search"></label>
</div>
</body>
</html>
Working Code: Add script in footer section
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<!-- SEARCH BAR -->
<label for="Search_Button">
<div id="Search_Bar_Dismiss_Box">
</div> <!-- Search Bar Dismiss Box -->
</label> <!-- Dismisses the search bar -->
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button">
<img src="SVG/Back_Arrow.svg" id="Cancel_Search">
</label>
</div> <!-- Search Box -->
<script type="text/javascript">
document.getElementById('Search_Button').addEventListener('click', function (){
document.getElementById('Search_Input').focus();
});
</script>
</body>
</html>
Put your code on window.onload function
window.onload = function()
{
document.getElementById('Search_Button').addEventListener('click', function ()
{
document.getElementById('Search_Input').focus();
});
};
hope it helps
Related
I am new to Five9. I want to make a Script where there is some Fields where the agents can write some text, and after pressing a button, the text from the Field will go to the List updating the current record. Is there any possibility to realize this without using any CRM or something. Like there is any API request which can do this thing?
Thank you for your help!
<html>
<head>
<title> Script </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<div class="nav_bar">
<button onClick="toggle('target', 'replace_target','replace_target2')">Adatlap</button>
<button onClick="toggle('replace_target', 'target','replace_target2')">Sugo</button>
<button onClick="toggle('replace_target2', 'target', 'replace_target')">Script</button>
</div>
<div>
<span id="target">Test</span>
<p> This is Test</p>
</div>
<div style="display:none" class="Sugo">
<span id="replace_target">Test2</span>
</div>
<div style="display:none" class="script">
<span id="replace_target2">SCript</span>
<p> This is SCript</p>
<div class="page1">
</div>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<script>
function toggle(target, source, source2) {
this[target].parentNode.style.display = 'block'
this[source].parentNode.style.display = 'none'
this[source2].parentNode.style.display = 'none'
}
</script>
</body>
</html>
How would one display an incorrect or correct words beside a form in any colour beside the field box when typing? I'm trying to make it so it gives me a real time correct and incorrect when I type in values that match the JS rule.
It should give a real time correct or incorrect beside the box and if it matches the rule then it displays correct
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Form Example </title>
<meta charset="utf-8">
<link href="keyupform.css" rel="stylesheet">
<script src="prototype.js"></script>
<script src="formkeyup.js"></script>
</head>
<body>
<div class="box" >
<form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
<!-- user id -->
<h2> Enter Info </h2>
<p> <span class="fieldName">UserID: </span>
<input type="text" id="userid" name="userid" class="input">
<span class="message"></span></p>
<!-- -->
<p style="text-align:center" class="types"> Enter Code: EECS, ESSE, MUTH, HIST, CHAP, BIO </p>
<p> <span class="fieldName"> Codes </span>
<input type="text" id="code" name="code" class="input">
<span class="message"></span></p>
<!-- Number -->
<p> <span class="fieldName"> Course Num (XXXX): </span>
<input style="width: 4em;" id="number" type="text" name="number" class="input">
<span class="message"></span></p>
<hr>
<p style="text-align:center;"> <button id="submitButton" type="button" onclick="submitbtn"> Submit </button> <input id="clear" type="reset" value="Clear"> </p>
<p style="text-align:center;" id="formError"> <p>
</form>
</div>
</body>
</html>
JS:
window.onload = function() {
$("userid").observe("keyup", enforceID);
$("code").observe("keyup", enforcecode);
$("number").observe("keyup", enforcenumbers);
$("submitButton").observe("click", submitbtn);
}
function enforceID() {
// fucntion must start with a letter and can be any number or letter after
var re = /^[A-Z][A-Z][0-9]+/i;
}
function enforcecode() {
// Only can use these Codes
var codes = ["EECS", "ESSE", "MUTH", "HIST", "CHAP", "BIO"];
var codeType = $("codeType").value;
codeType = codeType.toUpperCase();
}
function enforcenumbers() {
//Only 4 numbers allowed
var re = /^[0 -9][0 -9][0 -9][0 -9]$/
}
You can trigger the form validation on keydown event.
const form = document.getElementById('form');
document.getElementById('userid').addEventListener('keydown', event => {
form.reportValidity();
}, false);
document.getElementById('code').addEventListener('keydown', event => {
form.reportValidity();
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<form id="form">
<label for="userid">User ID:</label>
<input type="text" id="userid" name="userid" pattern="[A-Z]{2}\d+">
<br />
<label for="code">Code:</label>
<input type="text" id="code" pattern="EECS|ESSE|MUTH|HIST|CHAP|BIO" />
</form>
</body>
</html>
Trying to make an animation when clicking on a button, using semantic ui, a framework.
Tried the first code listed in this link => https://semantic-ui.com/modules/transition.html
But it doesn't work
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/transition.css">
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username"></input>
<input class="textForm" name="password" type="password" placeholder="Password"></input>
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="submit" value="Confirm"></input>
<input class="button" type="button" value="Cancel"></input>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/form.js"></script>
</body>
(function(){
var bouttonConfirmer = document.querySelector(".button");
bouttonConfirmer.addEventListener("click",function(event){
var objet = document.querySelector(".textForm");
objet.transition('scale');
alert("oki");
});
})();
The first problem is that semantic-ui requires jquery (see docs) so I included jquery js and semantic-ui css/js.
The second problem is that button[type=submit] will submit the form and cause a page load. So you won't be able to see the transition. I changed the type=button to prevent this.
Lastly I made your <input /> elements self closing.
$("#confirm").on("click", function() {
$('.textForm').transition('scale');
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username" />
<input class="textForm" name="password" type="password" placeholder="Password" />
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="button" value="Confirm" id="confirm" />
<input class="button" type="button" value="Cancel" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</body>
</html>
im currently working on how to change the background image of my html document when the user selects a speficifc group from the dropdown menu from chatrooms. But im currently stuck I cant seem to get my jQuery to work any help you could offer would be great thank you :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soc Talk</title>
<script src="resource/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="resource/css/bootstrap.min.css" />
<link rel="stylesheet" href="resource/css/style.css" />
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('bg.png','url(resource/GamingSoc.jpg)');
});
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>SocTalk</h1>
</div>
</div>
<div class="container chat-signin">
<form class="form-signin">
<h2>Chat Login</h2>
<label for="nickname">Nickname</label> <input type="text" placeholder="Nickname" id="nickname">
<div>
<label for="chatroom" class="chatroom">Chatroom</label> <select size="1" id="chatroom">
<option>Select Room</option>
<option>Gaming Soc</option>
<option>Pokemon Soc</option>
</select>
</div>
<button type="submit" id="enterRoom">Sign in</button>
</form>
</div>
<!-- /container -->
<div class="container chat-wrapper">
<form id="do-chat">
<h2></h2>
<h4></h4>
<table id="response" ></table>
<fieldset>
<legend>Enter your message..</legend>
<div>
<input type="text" placeholder="Your message..." id="message" style="height:60px"/>
<input type="submit" value="Send message" />
<button type="button" id="Exit-room">Exit Room</button>
</div>
</fieldset>
</form>
</div>
<div class="alt1">
<div class="container">
</div>
</div>
<div class="alt2">
<div class="container">
<footer>
<p>Passive Aggressive Liberals</p>
</footer>
</div>
</div>
</body>
</html>
Use background-image property to change or set background image.
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('background-image','url(resource/GamingSoc.jpg)');
});
Possible duplicate of Setting background-image using jQuery CSS property
$('body').css('background', 'url(resource/GamingSoc.jpg)')
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.