I have tried all codes avaliable but nothing worked.
Here is the Code :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
var text1 = document.getElementById("inhouse");
var text2 = document.getElementById("sahodaya");
function showsum() {
var first_number = parseFloat(text1.value);
if (isNaN(first_number)) first_number = 0;
var second_number = parseFloat(text2.value);
if (isNaN(second_number)) second_number = 0;
var result = first_number + second_number;
document.getElementById("total").value = result;
}
</script>
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class = "container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name = "inhouse" required oninput="showsum()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name = "sahodaya" oninput="showsum()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name = "total" value="0"><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
But this Code is Not Wokring I tried all Solutions Available on Stack Overflow that I seen till now but nothing helped much So i m posting this if somebody can help.
I want to add the value in inhouse and sahodaya and show it in total input field.
But when I m running this it's not wokring. How can i fix this Error.
Try the below code. It should fix the issue.
Full working code snippet:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
function add_number() {
var first_number = parseFloat(document.getElementById("inhouse").value);
if (isNaN(first_number)) first_number = 0;
var second_number = parseFloat(document.getElementById("sahodaya").value);
if (isNaN(second_number)) second_number = 0;
var result = first_number + second_number;
document.getElementById("total").value = result;
}
</script>
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class="container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name="name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name="email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name="inhouse" required onkeyup="add_number()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name="sahodaya" onkeyup="add_number()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name="total" value="0"><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
You should wrap the document.getElementById call inside the function or should move the script block below your form.
Your document will be rendered line by line by the browser. Since you've your script tag before the form element. the elements were not available when you call the document.getElementById("inhouse") so the var first_number gets undefined and when the form is rendered the element will be available. But still your var is undefined. That's why your code is not getting executed.
I've also refactored your function to arrow function and removed few unnecessary methods.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class = "container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name = "inhouse" required oninput="showSum()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name = "sahodaya" oninput="showSum()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name = "total" value="0" disabled><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
var text1 = document.getElementById("inhouse");
var text2 = document.getElementById("sahodaya");
var resultField = document.getElementById("total");
const showSum = () => {
resultField.value = Number(text1.value) + Number(text2.value);
}
</script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Related
Hi i am a beginner starting to trying out bootstrap now i am trying to do form validation, i tried to follow the guide
on https://getbootstrap.com/docs/5.0/forms/validation/ and when i run the exact form validation code, it seem bootstrap doesn't load in my chrome and not vaildating.
I had included the bootstrap css and js cdn link in my code.
Any helps will be greatly appreciated.
my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
</head>
<body>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Add the script tag just above closing </body> tag. It seems you got the script tag on between the <head/> tag which is causing the problem
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
Updated Codeenter image description here
If i remove
Its show reuried filed notoifcation in input filed however if i add the jquery it's allowing me to submit the data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>
Form Input Field Required attribute is not working in Google app script HTML web app
Using materialize CSS in my web app -In both the input filed have added Required attribute however on click submit button not getting any notification in input filed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>
I'm trying to create a login system. I want the system to take me to another page "page3.htm" when I press the login button. I have been trying to test my system in jquery, but the code below does not seem to work. Why is that?
The "login.js" file contains:
window.onload =function() {
var loginBtn = document.getElementById('go');
loginBtn.addEventListener('click',function(){
document.location.href = './page3.html';
});
}
The "index.html" file contains:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!--Jquery -->
<script>window.$ = window.jQuery = require('./jquery-3.3.1.min.js');</script>
<!--Jquery end -->
<!--login css -->
<link rel="stylesheet" type="text/css" href="/bootstrap/css/login.css">
<!--login css ends here -->
<!--Database link -->
<script src='dbcon.js'></script>
<!--database link ends -->
<!--login link -->
<script src='login.js'></script>
<!--login link ends -->
<style>
</style>
</head>
<body>
<form>
<h1>Fashion World</h1>
<div class="inset">
<p>
<label for="username">Username</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">PASSWORD</label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me for 14 days</label>
</p>
</div>
<p class="p-container">
<span>Forgot password ?</span>
<input type="submit" name="go" id="go" value="Log in">
</p>
</form>
</body>
</html>
When I press the submit button for my form, it calls JQuery to stop the page from refreshing, but it says that the function is not found (load).
I get multiple errors in the console, here is a screenshot: https://gyazo.com/ed25b9f8c1c8b0a6ecafedbad4d4e9ef
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<title>TheTawk | Sign up</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').submit(function (event){
event.preventDefault();
var firstName = $("#firstName").val();
var lastName = $("#lastName").val();
var email = $("#email").val();
var username = $("#username").val();
var password = $("#password").val();
var signUp = $("#signUp").val();
$(".form-message").load("classes/register",{
firstName: firstName,
lastName: lastName,
email: email,
username: username,
password: password,
signUp: signUp
});
});
});
</script>
</head>
<body>
<?php include 'includes/header.php'; ?> <br><br>
<div class="container">
<div class='row justify-content-md-center'>
<div class='col-md-auto'>
<form autocomplete="off" action="" ="classes/register" method="post">
<input type="text" class="form-control" name="firstName" id="firstName" autofocus="on" placeholder="First name"><br>
<input type="text" class="form-control" name="lastName" id="lastName" placeholder="Last name"><br>
<input type="text" class="form-control" name="email" id="email" placeholder="Email"><br>
<input type="text" class="form-control" name="username" id="username" placeholder="Username"><br>
<input type="password" class="form-control" name="password" id="password" placeholder="Password"><br>
<button type="submit" class="btn btn-primary" name="signUp" name="signUp" style="width: 100%;">Sign up</button>
<p class="form-message"></p>
</form>
</div>
</div>
</div>
<?php include 'includes/footer.php'; ?>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>
Thanks,
Ethan!
i am trying to get the Bootstrap Datepicker to work on my website but the button seems to be disabled and doesn't do anything when i click on it or the input form box here is my test code I am not sure what i am doing wrong here. i am using bootstrap 3.3.5
<!DOCTYPE html><html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('datepicker').datepicker({
format: 'mm-dd-yyyy'
});
});
</script>
</head>
<body>
<center>
<h1>BootStrap Datepicker</h1>
<form>
<div class="form-group">
<div class="input-group date" id='datepicker'>
<input type="text" class="form-control" placeholder="Birthdate yyyy/mm/dd">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</form>
</center>
</body>
</html>
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<legend>Bootstrap-datepicker set date sample</legend>
<div class="form-group">
<label for="exampleInputDate">Some special date</label>
<input type="text" class="form-control" id="exampleInputDate">
</div>
</fieldset>
</div>
</div>
</div>
here is the javascript file
var firstDayOfMonth = function() {
// your special logic...
return 5;
};
var d = new Date();
var currMonth = d.getMonth();
var currYear = d.getFullYear();
var startDate = new Date(currYear,currMonth,firstDayOfMonth());
$('#exampleInputDate').datepicker('setDate',startDate);
This should work perfectly
here is the plunker