Styling up hidden input - html

I'm trying to style up a hidden input field, but I'm not getting it quite right.
It may sound strange trying to style up an input box that's hidden - reason being is that the text in those fields are shown upon clicking the submit button, and I'd like to change the font and colour so it matches the rest of the page.
Code below (I have just removed the company details in URLs)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/base-asbestos.css">
<link rel="stylesheet" href="css/responsive-widths.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive-layout-asbestos.css">
<script language="JavaScript">
function updateAuthor(theForm) {
if (theForm.extensionField_Name) {
if (theForm.extensionField_Name.value != "") {
theForm.author.value = theForm.extensionField_Name.value;
theForm.extensionField_Name.name = 'extensionField_h_Name';
return (true);
}
}
if (theForm.extensionField_Email) {
if (theForm.extensionField_Email.value != "") {
theForm.author.value = theForm.extensionField_Email.value;
theForm.extensionField_Email.name = 'extensionField_h_Email';
return (true);
}
}
return (true);
}
</script>
<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.chat {
color: #404040;
font-weight: 700;
font-size: 1.2em;
font-family: 'Signika', sans-serif;
}
input[type=submit] {
color: #404040;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
chat2 {
color: #25ab9a;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
</style>
</head>
<body class="intenal standard_colours" style="position: relative; top: 0;">
<div class="chat">
<form action="https://test.uk/ccp/chat/form/100000" method="post" onsubmit="return updateAuthor(this)">
<style type="text/css">
span {
display: inline-block;
width: 120px;
}
</style>
<span>Name:</span><input type="text" name="extensionField_Name" /><br /><br>
<span>Email:</span><input type="text" name="extensionField_Email" /><br /> <br>
<span>Phone number:</span><input type="text" name="extensionField_PhoneNumber" /><br /><br>
<span>Category:</span>
<select name="extensionField_ccxqueuetag">
<br />
<option value="Chat_Csq7">General</option>
</select><br><br />
<input type="submit" value="Submit" /><input type="hidden" name="author" value="Customer" /><br />
<input type="hidden" name="title" value="ccx chat" /><br />
<input type="hidden" name="extensionField_h_widgetName" value="ChatGeneral" /><br />
<!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
<input type="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg"><br />
<input type="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
<input type="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
<input type="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
</div>
</form>
</body>
</html>

you can use this class:
.Hidden{
display:none;
}
and you can call this class for all objects that you need to hide.

1) Add a class to those hidden inputs (let's call it "hiddenField")
2) Add whatever styles like this
.hiddenField{
font-color:red;
font-size:12px;
}
3) Call something this to make them visible
if(document.getElementById(id).getAttribute('type') == 'hidden') {
document.getElementById(id).setAttribute('type', 'text');
}

Instead use normal text box with class "hidden" having style display: none. This will hide the text box.
You can make it visible by setting display back to initial using JavaScript like
document.getElementsByName('author')[0].style.display = 'initial';
Snippet:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/base-asbestos.css">
<link rel="stylesheet" href="css/responsive-widths.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/responsive-layout-asbestos.css">
<script language="JavaScript">
function updateAuthor(theForm) {
/* Use this code to display the element */
document.getElementsByName('author')[0].style.display = 'initial';
if (theForm.extensionField_Name) {
if (theForm.extensionField_Name.value != "") {
theForm.author.value = theForm.extensionField_Name.value;
theForm.extensionField_Name.name = 'extensionField_h_Name';
return (true);
}
}
if (theForm.extensionField_Email) {
if (theForm.extensionField_Email.value != "") {
theForm.author.value = theForm.extensionField_Email.value;
theForm.extensionField_Email.name = 'extensionField_h_Email';
return (true);
}
}
return (true);
}
</script>
<link href='//fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
<style type="text/css">
.chat {
color: #404040;
font-weight: 700;
font-size: 1.2em;
font-family: 'Signika', sans-serif;
}
input[type=submit] {
color: #404040;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
chat2 {
color: #25ab9a;
font-weight: 700;
font-size: 0.95em;
font-family: 'Signika', sans-serif;
}
/* Use this to hide the input text box */
.hidden {
display: none;
}
</style>
</head>
<body class="intenal standard_colours" style="position: relative; top: 0;">
<div class="chat">
<form action="https://test.uk/ccp/chat/form/100000" method="post" onSubmit="return updateAuthor(this)">
<style type="text/css">
span {
display: inline-block;
width: 120px;
}
</style>
<span>Name:</span>
<input type="text" name="extensionField_Name" />
<br/>
<br>
<span>Email:</span>
<input type="text" name="extensionField_Email" />
<br/>
<br>
<span>Phone number:</span>
<input type="text" name="extensionField_PhoneNumber" />
<br/>
<br>
<span>Category:</span>
<select name="extensionField_ccxqueuetag">
<br/>
<option value="Chat_Csq7">General</option>
</select>
<br>
<br/>
<input type="submit" value="Submit" />
<input type="text" class="hidden" name="author" value="Customer" />
<br/>
<input type="text" class="hidden" name="title" value="ccx chat" />
<br/>
<input type="text" class="hidden" name="extensionField_h_widgetName" value="ChatGeneral" />
<br/>
<!-- The following optional, hidden fields are available in order to customize the Customer Chat user interface.
Unlike other extension fields, these are not added to the social contact, and therefore do not display in the Agent Chat user interface.-->
<input type="text" class="hidden" name="extensionField_chatLogo" value="https://tes.t/blank.jpg">
<br/>
<input type="text" class="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
<input type="text" class="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
<input type="text" class="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
</div>
</form>
</body>
</html>

Related

How to display multiple data from local storage

I'm trying to keep the data saved on the submit.html page. The data is being stored on localstorage, i want the entered data to be in the table for always whenever i visit that page. Currently it is visible on the time of submit event only. when i go back to submit.html page with another entry, the previous data was gone.
Here's the code:
1, index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="form.css" />
<title>Save Later</title>
</head>
<body>
<div class="alert"></div>
<form id="save-later-form" action="result.html" onsubmit="callme()" method="POST">
<h3>Simple Save Later Form</h3>
<label for="email"><b>Email</b></label>
<input type="text" id="Email" placeholder="Enter Email" name="email" required>
<div class="inline" style="display: flex; ">
<div style="display: flex; flex-direction: column;">
<label for="First name"><b>First name</b></label>
<input id="Firstname" type="text" placeholder="First name" name="First name" required>
</div>
<div style="display: flex; flex-direction: column; margin-left:320px;">
<label for="Last name"><b>Last name</b></label>
<input id="Lastname" type="text" placeholder="Last name" name="Last name" required>
</div>
</div>
<label for="Business"><b>Business</b></label>
<select id="Business" name="Business">
<option value="Food & Beverage">Food & Beverage</option>
<option value="Restaurants">Restaurants</option>
<option value="Pet Shops">Pet Shops</option>
<option value="Fashion Boutique">Fashion Boutique</option>
</select>
<label for="Description">Description</label>
<textarea name="Description" id="Description" placeholder="Describe yourself in 100 words"></textarea>
<button type="submit" id="submit">SUBMIT</button>
<button type="submit" id="save">SAVE</button>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
2, Index.JS
function getData() {
return JSON.parse(localStorage.getItem('data') || "[]");
}
function callme() {
const data = getData();
const obj = Object.assign(...["Email", "Firstname", "Business"].map(prop =>
({
[prop]: document.getElementById(prop).value
})));
localStorage.setItem('data', JSON.stringify(data.concat(obj)));
}
3, Result.html
<!DOCTYPE html>
<html>
<head>
<title>Detail Page</title>
</head>
<body>
<h1>User Detail Page</h1>
<div id="result-table">
<table border="1">
<tr>
<th>Email</td>
<th>Firstname</td>
<th>Lastname</th>
<th>Business</td>
<th>Description</td>
</tr>
<tr>
<td id="first"></td>
<td id="second"></td>
<td id="third"></td>
<td id="fourth"></td>
<td id="fifth"></td>
</tr>
</table>
<br>
</div>
<script>
window.onload = function() {
document.getElementById('first').innerText = localStorage.getItem('Email');
document.getElementById('second').innerText = localStorage.getItem('Firstname');
document.getElementById('third').innerText = localStorage.getItem('Lastname');
document.getElementById('fourth').innerText = localStorage.getItem('Business');
document.getElementById('fifth').innerText = localStorage.getItem('Description');
};
</script>
<form action="/index.html">
<button>Go Back</button>
</form>
</body>
</html>
I managed to save data to local storage as JSON, but cannot parse multiple data to Result page, currently if resubmitted, data would be overwritten rather than adding new to table. Please any help is appreciated
Result page:
You need to put everything in only one page, as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> your title </title>
<style>
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
}
body.onForm table,
body.onTable form { display: none }
label {
display : block;
margin-bottom : .2rem;
}
label b {
display : block;
font-size : .8rem;
}
label textarea {
width : 20rem;
height : 5rem;
}
table {
background-color: darkslategrey;
border-collapse : separate;
border-spacing : 1px;
margin : 1rem;
}
table caption {
padding : .4rem;
caption-side : bottom;
text-align : right;
}
th {
background-color : #7cc0e7;
padding : .2rem .3rem;
}
td {
background-color : white;
padding : .2rem .3rem;
}
</style>
</head>
<body class="onForm">
<form name="save-later-form">
<label>
<b>Email</b>
<input type="text" name="Email" placeholder="Enter Email"required value="">
</label>
<label>
<b>First name</b>
<input type="text" name="Firstname" placeholder="First name" required value="">
</label>
<label>
<b>Last name</b>
<input type="text" name="Lastname" placeholder="Last name" required value="">
</label>
<label>
<b>Business</b>
<select name="Business">
<option value="Food & Beverage" > Food & Beverage </option>
<option value="Restaurants" > Restaurants </option>
<option value="Pet Shops" > Pet Shops </option>
<option value="Fashion Boutique"> Fashion Boutique </option>
</select>
</label>
<label>
<b>Description</b>
<textarea name="Description" placeholder="Describe yourself in 100 words"></textarea>
</label>
<button type="reset" > reset </button>
<button type="submit"> Submit </button>
<button type="button" id="go-Table-Btn"> go 2 table </button>
</form>
<table id="t-business">
<caption><button id="go-form-Btn"> go 2 form</button></caption>
<thead>
<tr><th>Email</th><th>Firstname</th><th>Lastname</th><th>Business</th><th>Description</th></tr>
</thead>
<tbody></tbody>
</table>
</table>
<script>
const
saveLaterForm = document.forms['save-later-form']
, goTableBtn = document.querySelector('#go-Table-Btn')
, goFormBtn = document.querySelector('#go-form-Btn')
, ElmsOrder = ['Email','Firstname','Lastname','Business','Description']
, ls_business = JSON.parse( localStorage.getItem('ls_business') || '[]')
, tBusinessB = document.querySelector('#t-business tbody')
;
saveLaterForm.onsubmit = e =>
{
e.preventDefault()
let formInputs = Object.fromEntries( new FormData(saveLaterForm).entries() )
ls_business.push(formInputs)
addRow( formInputs )
localStorage.setItem('ls_business',JSON.stringify(ls_business))
document.body.classList.replace('onForm','onTable')
saveLaterForm.reset()
}
for (let lsRow of ls_business) addRow( lsRow )
function addRow( elms )
{
let row = tBusinessB.insertRow()
for (let elName of ElmsOrder) row.insertCell().textContent = elms[elName]
}
goTableBtn.onclick =_=> document.body.classList.replace('onForm','onTable')
goFormBtn.onclick =_=> document.body.classList.replace('onTable','onForm')
</script>
</body>
</html>

Changing button background color when a certain condition has been met

I want the button to change its background color only when the input text length is 10, when I hover over it.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form class="details">
Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
</form>
<button id="button" onmouseover="hovar()">Register</button>
<script src="back_end.js" async></script>
</body>
</html>
css:
#button{
font-size:20px;
margin-left: 600px;
border-radius: 8px;
}
#button:hover{
background-color: lightsalmon;
color: aquamarine;
}
javascript:
function hovar(){
var phone=document.getElementById("ph_number").value;
var btn=document.getElementById("button");
if (phone.length!=10){
btn.onmouseover.style.backgroundColor="lightsalmon"
}
else{
btn.onmouseover.style.backgroundColor="chartreuse"
btn.onmouseover.style.color="black"
}
}
But I keep getting this error in the javascript:
**Uncaught TypeError: Cannot set property 'backgroundColor' of undefined**
What am I doing wrong here?
you want to apply a "style" property to an event (onmouseover)
function hovar()
{
var phone = document.getElementById("ph_number").value;
var btn = document.getElementById("button");
if (phone.length!=10)
{
btn.style.backgroundColor="lightsalmon" // remove onmouseover
}
else
{
btn.style.backgroundColor="chartreuse"
btn.style.color="black"
}
}
I think this is what you are looking for (?):
const phone = document.getElementById("ph_number")
, btn = document.getElementById("button")
;
phone.oninput = () =>
{
if (phone.value.length != 10)
{
btn.style.setProperty('--hoverBG', 'lightsalmon')
btn.style.setProperty('--hoberColor', 'aquamarine')
}
else
{
btn.style.setProperty('--hoverBG', 'chartreuse')
btn.style.setProperty('--hoberColor', 'black')
}
}
#button {
--hoverBG : lightsalmon;
--hoberColor : aquamarine;
font-size : 20px;
margin-left : 50px;
border-radius : 8px;
}
#button:hover{
background-color : var(--hoverBG);
color : var(--hoberColor);
}
input[type="checkbox"] + label + input {
visibility: hidden;
}
input[type="checkbox"]:checked + label + input {
visibility: visible;
}
<h2>Cafeteria registration</h2>
<form class="details">
Organization:
<div id="org">
<input type="checkbox" id="cb1">
<label for="cb1">ID no : </label>
<input type="number" id="org_number" >
<br><br>
<input type="checkbox" id="cb2">
<label for="cb2">Mobile No: </label>
<input type="tel" id="ph_number" placeholder="phone 10c">
</div>
<br><br>
</form>
<button id="button">Register</button>

Checkbox in codeigniter

Here i am using Bootstrap for checkbox ... While i am click checkbox it checked but in the bootstrap design it was not shown ...
my Code:
<label for="success" class="btn btn-success">Success <input type="checkbox" value="" id="success" class="badgebox"><span class="badge">&check;</span></label>
My css code:
<style>
/* Hiding the checkbox, but allowing it to be focused */
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}</style>
Controller
public function workout()
{
if($this->input->post())
{
echo "<pre>"; print_r($this->input->post());
exit();
}
$this->load->view('workout');
}
view file
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.sr-only {
opacity: 0;
float: right;
}
input[type='checkbox'].tags-checkbox:checked + label > i:first-of-type,
input[type='checkbox'].tags-checkbox + label > i:last-of-type{
display: none;
}
input[type='checkbox'].tags-checkbox:checked + label > i:last-of-type{
display: inline-block;
}
</style>
<form name="form" id="form" action="<?php echo base_url(); ?>welcome/workout" method="post" >
Vehicles you have.?
<br /><br />
<div><span class='label-content'> I have a car</span>
<input name="optionshaving[]" type='checkbox' id='checkbox-1' value="bike" class='tags-checkbox sr-only'/>
<label for='checkbox-1'>
<i >✗</i>
<i >&check;</i>
</label>
</div>
<div><span class='label-content'> I have a bike</span>
<input name="optionshaving[]" type='checkbox' value="car" id='checkbox-2' class='tags-checkbox sr-only'/>
<label for='checkbox-2'>
<i >✗</i>
<i >&check;</i>
</label>
</div>
<input type="submit" name="submit" id="submit" value="submit" />
</form>
</body>
</html>
output is
Array
(
[optionshaving] => Array
(
[0] => bike
[1] => car
)
[submit] => submit
)

Swapping the images to enable / disable DIV

I am just a beginner.
Is there a code to use two different images as buttons to disable and enable . Most examples use two separate buttons but I need to use a single button with two images: one for off and the other one for on.
$(function() {
$("#Enable").click(function(){
$(".div1 *").prop('disabled',true);
});
$("#Disable").click(function(){
$(".div1 *").prop('disabled',false);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="css/multitoggle.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="div1">
Name:<input type="text" id="fullname" value="name"/><br>
<br>
<input type="button" id="button1" value="Submit "/>
<div></div>
</div>
<input type="image" src="assets/trans_off.jpg" id="Enable" value="Enable"/>
<input type="image" src="assets/trans_on.jpg"id="Disable" value="Disable"/>
</body>
</html>
Use image sprite that contains two button images. Use background-position to set what part of image to show.
$(document).ready(function() {
var isDisabled = false;
$('.toggle').click(function() {
isDisabled = !isDisabled; // invert value
$('.div1 input').prop('disabled', isDisabled);
});
});
#button1 {
background: url('http://images.sixrevisions.com/2009/05/04-31_slick_clean_30.png') no-repeat -80px -14px;
width: 246px;
height: 48px;
border: none;
}
#button1:disabled {
background-position: -80px -63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
Name: <input type="text" id="fullname" value="name" /><br>
<br/>
<input type="button" id="button1"/>
<div></div>
</div>
<hr/>
<button class="toggle">Toggle inputs</button>

press enter to submit form

<HTML>
<HEAD>
<TITLE>Login</TITLE>
<script language="JavaScript" type="text/javascript">
<!--- PASSWORD PROTECTION SCRIPT
function TheLogin() {
var password = '123';
if (this.document.login.pass.value == password) {
top.location.href="correct.php";
}
else {
location.href="incorrect.html";
}
}
// End hiding --->
</script>
<style type="text/css">
BODY { COLOR: #0000FF; FONT: 16px verdana, arial, sans-serif; font-weight: normal }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</HEAD>
<BODY bgColor="#FFFFFF">
<br><br><br><br>
<center>
<p>please insert your password</p>
<form name="login" id="formid" style="margin: 0px">
<INPUT TYPE="text" NAME="pass" id="passid" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;" style="width: 152px; margin: 5px;"><br>
<input type="button" value="Click to Login" style="width : 150px; margin: 3px; left: 183px; top: 175px;" onClick="TheLogin(this.form)" >
</form>
</center>
<br><br><br>
</BODY>
</HTML>
How can I submit a form with just the Enter key on a text input field, with having submit button?
that i want protect some page that no one can access without password
it's working with button but with "enter button" not working
so please any hep with change my code
using jquery you can do it:
$('#textbox').bind('keypress', function(e) {
if (e.which == 13) {
$('#button').click();
}
});