I am currently learning window.onload and document.onload as attributes on html. But i fail to use them properly. In my code i want to focus a specific text area named "emri", using the document.onload but without success. Some would say to use it as a script or smth, but i want to use it as an attribute inside the tag. What am i doing wrong?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
</head>
<body onload="document.my-form1.emri.focus();" >
<main class="my-form">
<div class="container">
<div class="row justify-content-flex-start">
<div class="col-md-6">
<div class="card">
<div class="card-header">Apliko</div>
<div class="card-body">
<form name="my-form1" onsubmit=" return formValidation();">
<div class="form-group row">
<label for="emri" class="col-md-3 col-form-label text-md-right">Emri juaj:</label>
<div class="col-md-6">
<input type="text" class="form-control" name="emri">
</div>
</div>
Here your updated html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="App.css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
</head>
<body onload="document.getElementById('emri').focus();">
<main class="my-form">
<div class="container">
<div class="row justify-content-flex-start">
<div class="col-md-6">
<div class="card">
<div class="card-header">Apliko</div>
<div class="card-body">
<form name="my-form1" onsubmit=" return formValidation();">
<div class="form-group row">
<label for="emri" class="col-md-3 col-form-label text-md-right">Emri
juaj:</label>
<div class="col-md-6">
<input type="text" class="form-control" name="emri" id="emri"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
You can just add the autofocus attribute to the input.
<input type="text" class="form-control" name="emri" autofocus>
There is nothing wrong how you use `window.onload´. It is the name of the form. Since there is a "-" character in the name, you should use it like this:
<body onload="document['my-form1'].elements.emri.focus();">
see: Example
You need to select like this
<body onload="document.getElementsByName('emri')[0].focus();">
If you are using HTML5, you can use like autofocus attribute in input.
Related
I have designed a program that takes user input number then outputs the qr code but the problem is that I want that input number to be in a syntax like this #14411*user number#. Could anyone help me, please
This the index.php file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<title>Send Email Example</title>
<style>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Générer Code QR</h5>
<form id="generateQrForm" class="form-signin">
<div class="form-label-group">
<label for="inputEmail">Numéro pour QR <span style="color: #FF0000">*</span></label>
<input type="text" name="qrText" id="qrText" class="form-control" required placeholder="Entrez votre
numéro pour générer QR code">
</div> <br/>
<div id="generatedQr text-center">
<img src="" id="generatedQrImg" class="center-block">
</div> <br/>
<button type="submit" name="generateQrBtn" id="generateQrBtn" class="btn btn-lg btn-primary btn-block
text-uppercase" >Générer QR</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="generate-qr-js.js"></script>
</body>
</html>
This is the generate-qr-script.php file
<?php
include "library/qrlib.php";
if (isset($_POST['generateQr']) == 'generateQr')
{
$qrText = $_POST['qrText']; // receive the text for QR
$directory = "generated-qr/"; // folder where to store QR
$fileName = 'QR-'.rand().'.png'; // generate random name of QR image
QRcode::png($qrText, $directory.$fileName, 'L', 4, 2); // library function to generate QR
echo "success^".$directory.$fileName; // returns the qr-image path
}
In your 'generate-qr-script.php' file, make the following change:
Change this:
$qrText = $_POST['qrText'];
To this:
$qrText = "#14411*" . $_POST['qrText'] . "#";
hi can someone help me with my code? it says the loginModule is not defined. can someone explain this to me. why can't define the function when i already call out on my html file?
and nothing reflects to the console but error.
pardon me because i'm a new learner of JavaScript. hope you help me thanks!
<!DOCTYPE html>
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Support Admin</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME CSS -->
<link href="assets/css/font-awesome.min.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Nova+Flat' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css' />
<!-- <link rel="stylesheet" href="bootstrap.css" type="text/css"> -->
<script scr="support-admin\assets\data\admin-data.js"></script>
<script src="support-admin\assets\js\index-admin.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="head">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<a href="index.html">
<img src="assets/img/corelogo.png" class="header-mid" />
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 text-center" >
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h4><span>Call:</span> +639351957952</h4>
<h4><span>E-mail:</span> michaelpelagio9830#gmail.com</h4>
</div>
</div>
</div>
</div>
<section >
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Admin Login </h3>
<form>
<div class="form-group">
<input id="userName" type="text" class="form-control" required="required" placeholder="Username / Email" />
</div>
<div class="form-group">
<input id="passWord" type="text" class="form-control" required="required" placeholder="Your Password" />
</div>
<div class="form-group">
<i class="btn btn-success" onClick="logInModule()">Click To Login</button>
</div>
Forgot Password ?
</form>
</div>
</div>
</div>
</section>
<!-- Jquery Core Script -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Core Bootstrap Script -->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
then this is my javascript index-admin.js
const logInModule = ()=>{
var username = document.getElementById('userName');
var password = document.getElementById('passWord');
console.log(username);
console.log(password);
}
whenever i click the button there's an error in console of my browser it says.
index-admin.html:80 Uncaught ReferenceError: logInModule is not defined
at HTMLElement.onclick (index-admin.html:80)
onclick # index-admin.html:80
I need to copy the .container element without using innerHTML.
here the index.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- Utilitats CSS i icones Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="js/test.js"></script>
</head>
<body>
<div class="text-center">
<div class="card-header bg-info row">
<div class="col-sm-4">
<img src="https://pbs.twimg.com/profile_images/1046722856929947649/hytXqKH0_400x400.jpg" height="80">
</div>
<div class="col-sm-4">
<h3 class="display-4">Agenda IOC</h3>
<h4 class="text-warning">Consulta tots els esdeveniments</h4>
</div>
<div class="col-sm-4">
<h5 class="card-title">Elegeix la data:</h5>
<input id="data" type="date">
<button id="cerca">Cerca</button>
</div>
</div>
<div class="container">
<div class="card">
<div class="card_image-container">
<img class="card-image" src="http://agenda.cultura.gencat.cat/content/dam/agenda/articles/2018/07/03/033/Esculturas.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Title</h3>
<p>Description</p>
Go
</div>
</div>
</div>
</div>
<!-- Utilitats js de Bootstrap CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Copy the element and show it when click in the button.
I need to create a function that I can change the values of each element created.
I can not get the values from an HTML page using document.getElementById ("ID"),is returning Null, in all the rest of the code everything works perfectly
Something so simple is driving me crazy, because in other parts of the code identically everything works perfectly
HTML:
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
JavaScript:
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
HTML INDEX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="notice.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/coments/coments.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/header/header.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../../components/footer/footer.css" media="screen" />
<!-- Bootstrap e Jquery -->
<link rel="stylesheet" type="text/css" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
</head>
<body>
<div class="col-md-12">
<?php include "../../components/header/header.html"; ?>
<div id="noticeFather"class=" col-md-12">
<div class="ads col-md-12 top">
</div>
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
</div>
<div class="row">
<div class="right col-md-3"></div>
<div class="midle col-md-6">
<p class="body"></p>
<span class="linkTitle"></span>
<a class="linkUrl"></a>
<!-- Coments -->
<div class="comentsDiv col-md-12">
</div>
</div>
<div class="left col-md-3"></div>
</div>
</div>
</div>
<div class="col-md-12">
<?php include "../../components/coments/coments.html" ?>
</div>
<?php include "../../components/footer/footer.html"; ?>
</div>
<!-- Scripts js -->
<script type="text/javascript" src="../../node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="../../node_modules/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../components/header/header.js"> </script>
<script type="text/javascript" src="../../service/esmiucado-service.js"></script>
<script type="text/javascript" src="../../repositorio/repositorio.js"> </script>
<!-- Requisição DataBase -->
<script>
postNotice()
getComents(noticeCod)
</script>
</body>
</html>
I already try:
$(document).ready(function() {
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
});
and:
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
and they did not work
OBS: the files javascript and html are in different directories
UPDATE:
When I call the function of another page everything works fine, so the problem is when I call this specific page, but I have not yet identified which problem
in document.ready function either remove the function inside it or call the function. First one is also working fine you just have to call the function. window.onload is working perfectly
function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
postNotice();
$(document).ready(function() {
console.log(document.getElementById('childTemplateNotice'))
});
window.onload = function postNotice(){
console.log(document.getElementById('childTemplateNotice'))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="childTemplateNotice" class="col-md-12">
<div class="headerNews col-md-12">
<h1 class="titleNotice"></h1>
<p class="subTitle"></p>
<div class="row">
<span class="date"></span>
</div>
The problem was happening simply because I was not calling the html element on the main page.
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="flags.min.css">
<link rel="stylesheet" type="text/css" href="css2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="google/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-right: 6%;padding-left: 6%;margin-right: auto;margin-left: auto;">
<div class="row" style="padding-bottom: 5%;">
<div class="col-lg-offset-1 col-lg-4">
<h3 style="color:#00B0F0;">Choose your phone numbers<h3>
</div>
</div>
<form action="deuxiemeBis.php" method="POST">
<div class="row">
<div class="col-lg-offset-1 col-lg-4">
<div class="form-group phone1">
<input type="tel" class="form-control" name ="phone1" id="phone1">
</div>
<div class="form-group phone2">
<input type="tel" class="form-control" name ="phone2" id="phone2">
</div>
<div class="form-group phone3">
<input type="tel" class="form-control" name ="phone3" id="phone3">
</div>
</div>
</div>
<div class="row">
<br><br>
<div class="col-lg-offset-1 col-lg-3">
<button data-toggle="collapse" data-target="#demo" style="background-color: transparent;border:none;color:#00B0F0;">+More infos</button>
</div>
</div>
<div class="row">
<br>
<div class="form-group col-lg-offset-1 col-lg-6">
<div id="demo" class="collapse">
<textarea rows="3" name="comment" class="form-control" form="usrform"></textarea>
</div>
</div>
</div>
<div class="col-lg-offset-9 col-lg-3"><br>
<div class="form-group">
<button type="submit" class="btn btn-primary" style="width: 50%;background-color: #00B0F0;">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.
So my question is: how do you specify that only the submit button will actually submit the form ?
That's because you didn't specify the type for that button and submit is the default type. Set the type='button' and it will no longer act as a submit.