So like I want to make an input field required when a checkbox is checked an 'not required' when it is unchecked...I've tried the following code but it was not working ...please help...
<form action="#">
<input id='req'><input type="submit"></form><input type="checkbox" onclick="req()" id="check">
<script>
function req(){
var req = document.getElementById("req");
var checkBox = document.getElementById("check");
if (checkBox.checked == true){
alert("checked")
req.required==true
} else {
alert("uncheck")
req.required==false
}
}
</script>
Give this a try:
<!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.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="results">
<form name="test" id="test" action="#" method="GET">
<div class="input-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="cbox">
<label class="form-check-label" for="cbox">Make field required</label>
</div>
</div><br>
<div class="input-group">
<input type="text" id="tbox" class="form-control">
</div><br>
<button type="submit" id="sub" class="btn btn-primary">Submit</button><br>
<small><span class="status"></span></small>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
// On click of checkbox
$('#cbox').click(function() {
// Check if it's checked
if ($(this).prop('checked')) {
// Add the required attribute to the text input
$('#tbox').attr('required', '');
// log our results and display a small indicator span status
console.log('input is now required');
$('.status').text('input is now required');
} else {
// If it isn't checked, remove the required attribute
$('#tbox').removeAttr('required');
// log our results and display a small indicator span status
console.log('input is no longer required');
$('.status').text('input is no longer required');
}
});
});
</script>
</body>
</html>
Related
I am trying to figure out how to make Javascript error messages be displayed in the DOM and stay there until valid information is added into the form inputs. Right now they appear for a brief moment and then disappear. On top of that, I have to use Bootstrap 5 to stylize the JavaScript Error messages. I've been trying to figure this out all day and I haven't had any luck.
I have my HTML and Javascript down below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Form</title>
<link rel="stylesheet" href="login/login.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<main>
<h1 class="text-primary">Login</h1>
<form id="login_form" name="login_form" method="get">
<div>
<label for="email1">Email:</label>
<input name="email" type="email" autocomplete="email" id="email" class="form-control">
<span class="text-danger">*</span>
<span id="errorName"></span>
</div>
<div>
<label for="password">Password:</label>
<input name="password" type="password" autocomplete="password" id="password" class="form-control">
<span class="text-danger">*</span>
<span id="errorName"></span>
</div>
<div>
<label> </label>
<button type="submit" class="btn btn-primary" id="login">Login
</div>
</form>
</main>
</main>
<script defer src="login/login.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
const $ = selector => document.querySelector(selector);
document.addEventListener("DOMContentLoaded", () => {
$("#login").addEventListener("click", () => {
// get values user entered in textboxes
const email = $("#email");
const password = $("#password");
// create a Boolean variable to keep track of invalid entries
let isValid = true;
// check user entries - add text to error message if invalid
if (email.value == "" || password.value == "") {
email.nextElementSibling.textContent = "You seem to have forgotten your username and password.";
password.nextElementSibling.textContent = "You seem to have forgotten your username and password.";
return false;
} else {
email.nextElementSibling.textContent = "";
password.nextElementSibling.textContent = "";
}
if (email.value == "admin#example.com" && password.value == "password") {
document.writeln("Welcome back Admin!")
} else {
document.writeln("That email and password doesn't seem to be right. Try again.")
}
// submit the form if all entries are valid
if (isValid) {
$("#login_form").submit();
}
});
});
Please help me on sending specific data only 'Name' and 'ON' or 'OFF' to XML file from a HTML page.
Problem is I couldn't connect all these with each other to get a result like below
<name>RYAN</name>
<BREAKING>ON</BREAKING>
Here is my code below:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>BREAKING NEWS SWITCH</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h2 align="center">BREAKING NEWS SWITCH</h2><br /><br />
<form method="post" id="insert_data">
<div class="form-group">
<label>Enter Your Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Your Name Please....?"/>
</div>
<div class="form-group">
<label>BREAKING NEWS</label>
<div class="checkbox">
<input type="checkbox" name="BREAKING" id="BREAKING" unchecked />
</div>
</div>
<input type="hidden" name="hidden_BREAKING" id="hidden_BREAKING" value="OFF" />
<br />
<input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" />
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#BREAKING').bootstrapToggle({
on: 'ON',
off: 'OFF',
onstyle: 'success',
offstyle: 'danger'
});
$('#BREAKING').change(function(){
if($(this).prop('unchecked'))
{
$('#hidden_BREAKING').val('OFF');
}
else
{
$('#hidden_BREAKING').val('ON');
}
});
$('#insert_data').on('submit', function(event){
event.preventDefault();
if($('#name').val() == '')
{
alert("Please Enter Your Name");
return false;
}
else
{
var form_data = $(this).serialize();
$.ajax({
url:"file:///C:/Documents/MY%20Projects/PHP%20toggles/BREAKING%20NEWS/insert.PHP",
method:"POST",
data:form_data,
success:function(data){
if(data == 'done')
{
$('#insert_data')[0].reset();
$('#BREAKING').bootstrapToggle('off');
alert("Data Inserted");
}
}
});
}
});
});
</script>
Here the problem is I can't connect those with the PHP file below.
PHP:
<?php
if(isset($_REQUEST['insert']))
{
$xml = new DOMDocument("1.0", "UTF-8");
$xml->load("C:\Documents\MY Projects\PHP toggles\BREAKING NEWS\TEMPLATE.xml");
$rootTag = $xml->getElementsByTagName("XML")->item(0);
$nameTag = $xml->createElement("name",$_REQUEST['name']);
$BREAKINGTag = $xml->createElement("BREAKING",$_REQUEST['BREAKING']);
$xml->save("C:\Documents\MY Projects\PHP toggles\BREAKING NEWS\TEMPLATE.xml");
}
?>
And thus this xml file is not updating as expected.
XML:
<?xml version="1.0" encoding="UTF-8"?>
<XML>
<name>NAMES INSERTED SHOULD BE HERE</name>
<BREAKING>TOGGLE ON/OFF SHOULD BE HERE</BREAKING>
</XML>
Please help me on that.
I coded an HTML form where I tried to validate it using javascript, However, the validation doesn't work. It should work on click of submit button. Everything looks fine! could not find the error! Please Help.
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interst= document.myform.interst.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name = "myform" method="post"onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
<?php
if (!isset($amount7032)) { $amount7032 = ''; }
if (!isset($interest7032)) { $interest7032 = ''; }
if (!isset($years7032)) { $years7032 = ''; }
?>
You have written wrong form element name at below line
var interst= document.myform.interst.value;
it should be
var interest= document.myform.interest.value;
Basically because javascript was not able to find the form element and it was failing due to that.
I tried below code and its working:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interest= document.myform.interest.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name="myform" method="post" onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
I have the following problem:
I want to add textfields to my html form, send them to my script and than redirect back AND have the number of fields and their values shown.
Adding the fields via jQuery is working fine, but I can't store the values later on, because it's done via adding DIVs and they're having the same name.
Can someone point me to the right direction?
Here's the code in my index.php and in my action.php
index.php
<?php
session_start([
'cookie_lifetime' => 3600,
]);
?>
<html>
<head>
<!-- HTML5 -->
<meta charset='utf-8'>
<!-- HTML 4.x -->
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<link rel='stylesheet' href='https://unpkg.com/purecss#1.0.0/build/pure-min.css' integrity='sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w' crossorigin='anonymous'>
<link rel='stylesheet' href='style/style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>
myDrop2
</title>
<script src="scripts/jquery.js"></script>
</head>
<body>
<script>
function showLoadingMessage() {
document.getElementById('content').style.display = 'none';
var message = document.createElement('div');
message.innerHTML = '<center><h1>Wird gearbeitet, bitte warten!</h1></center>';
document.body.appendChild(message);
}
function checkRemove() {
if ($('div.d1_drops').length == 1) {
$('#remove').hide();
} else {
$('#remove').show();
}
};
$(document).ready(function() {
checkRemove()
$('#add').click(function() {
$('div.d1_drops:last').after($('div.d1_drops:first').clone());
$('div.d2_drops:last').after($('div.d2_drops:first').clone());
checkRemove();
});
$('#remove').click(function() {
$('div.d1_drops:last').remove();
$('div.d2_drops:last').remove();
checkRemove();
});
});
</script>
<center>
<div id='header'>
<b>myDrop2</b>
</div>
<br><br>
<div id='content'>
<br>
<button id='add'>[ + ]</button>
<button id='remove'>[ - ]</button>
<form action=scripts/action.php class='pure-form pure-form-aligned' onsubmit='showLoadingMessage();' method='post'>
<!-- <form action=scripts/action.php class='pure-form pure-form-aligned' onsubmit='showLoadingMessage();' method='post'> -->
<div id='settings1'>
<br>
Belichtung starten
<br><br>
<label>Warten (ms) <input name='firstwait' type='number'></label>
</div>
<div id='ventile'>
<div id='ventil1'>
<input type='radio' id='v1' name='ventile' value='1' checked='checked'>
<label for='v1'><h2>1 Ventil</h2></label>
<br><br>
<div class='d1_drops'>
<label>Tropfen 1 Dauer (ms) <input name='d1_drop[]' type='number'></label>
<br><br>
<label>Warten (ms) <input name='d1_wait[]' type='number'></label>
<br><br>
</div>
</div>
<div id='ventil2'>
<input type='radio' id='v2' name='ventile' value='2'>
<label for='v2'><h2>2 Ventile</h2></label>
<br><br>
<div class='d2_drops'>
<label>Tropfen 1 Dauer (ms) <input name='d2_drop[]' type='number'></label>
<br><br>
<label>Warten (ms) <input name='d2_wait[]' type='number'></label>
<br><br>
</div>
</div>
</div>
<div id='settings2'>
Blitzen
<br><br>
<label>Warten (ms) <input name='lastwait' type='number'></label>
<br><br>
Belichtung stoppen
<br><br>
</div>
<div id='run'>
<button type='submit'>ausführen</button>
<br>
<br>
</div>
</form>
</div>
</center>
</body>
</html>
action.php
<?php
session_start();
include ('../conf.php');
$d1_array_drop = $_POST['d1_drop'];
$d1_array_wait = $_POST['d1_wait'];
$d2_array_drop = $_POST['d2_drop'];
$d2_array_wait = $_POST['d2_wait'];
(...) do stuff with the data (..)
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>
You can use sessionstorage or localstorage to remember values,if you want to output values from php ,first store them in session|files|db after redirecting , you can just output the values to js
<?php
$data=$_SESSION["data"];
?><script>
var data=<?php echo json_encode($data);?>;
</script>
This is my simple html code. I included javascript inside this html file.I would like to perform validation on name like no empty field and data format validation but it is not working. Can some one please help me to get rid of this
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
if(nam == "")
{
alert("Name should be filled out");
document.getElementById("name").focus;
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font><br><br><br
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()" >
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
You have a mistake in your HTML code. You forgot to close a <br> tag before <form name='form'>
Also, "focus" is a method, not a property. I have added that as well
Here is the corrected code.
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate() {
var nam = document.forms[0].name.value;
if (nam == "") {
alert("Name should be filled out");
document.getElementById("name").focus();
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="bgr">
<div id="emal">
<font style="position:absolute;top:16px;left:100px;font-size:20px;">Welcome to Aptitude Quiz</font>
<br>
<br>
<br> <form name="form"> Name :
<input type="text" name="name" id="name">
<br>
<br>
<input name="Participate" type="button" value="Participate" onClick="validate()">
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>