I think that Im missing some pieces for this. Im somewhat new to JavaScript and JQuery, and someone tried to help before, but their solution doesnt work either.
I need a sort-of drop down navigation effect similar as to what is on this site:
professional-painters.com then click "Quick Contact"
For some reason the Contact isnt toggling.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DaVincisApp1.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="~/Styles/StyleSheet1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<%--<script type="text/javascript" src="Scripts/motion.js"></script>--%>
<script type="text/javascript">
$(document).ready(function(){ /* make sure the contact form is hidden when the page loads: */ $('div#contact-form').hide(); $('a#contact-button').toggle(function(){ /* slides the contact form down and shows it */ $('div#contact-form').slideDown(); }, function () { /* hides it again */ $('div#contact-form').slideUp(); } }
);</script>
</head>
<body>
<div id="nav">
<div id="navigation-primary">
<ul>
<li>Menu 1</li>
<li>item 2</li>
<li>Menuitem 3</li>
<li><a id="contact-button" href="#">Contact</a></li>
</ul>
<div id="contact-form">
<form action="#" method="post">
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="20" />
<input type="hidden" name="URI" value="index" />
<input type="hidden" name="XID" value="1c46d517779f90c9f5a13bac8338968a3c2b9d16" />
<input type="hidden" name="status" value="open" />
<input type="hidden" name="return" value="consultation/thank_you" />
<input type="hidden" name="redirect_on_duplicate" value="" />
<input type="hidden" name="RET" value="http://professional-painters.com/" />
<input type="hidden" name="form_name" value="Quick" />
<input type="hidden" name="id" value="freeform" />
<input type="hidden" name="params_id" value="136390" />
<input type="hidden" name="site_id" value="1" />
</div>
<fieldset style="padding: 7px;">
<table id="quickcontact-in">
<tr>
<td>
<input tabindex="1" class="field" type="text" name="name" value="Name" onfocus="if (this.value == 'Name') this.value = '';"
onblur="if (this.value == '') this.value = 'Name';" />
</td>
</tr>
<tr>
<td>
<input tabindex="2" class="field" type="text" name="email" value="Email address"
onfocus="if (this.value == 'Email address') this.value = '';" onblur="if (this.value == '') this.value = 'Email address';" />
</td>
</tr>
<tr>
<td>
<input tabindex="3" class="field" type="text" name="phone1" value="Phone (optional)"
onfocus="if (this.value == 'Phone (optional)') this.value = '';" onblur="if (this.value == '') this.value = 'Phone';" />
</td>
</tr>
<tr>
<td>
<textarea tabindex="4" class="txtField" cols="4" rows="4" name="comments">Questions or Comments</textarea>
</td>
</tr>
<tr>
<td>
<div id="submit">
<input tabindex="6" type="submit" name="submit" value="Send Request" />
</div>
<p class="tiny" align="right">
Close</p>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
#navigation-primary {
/*background: url("/img/nav_back.gif") repeat-x scroll 0 0 #61533F;*/
background-color: Red;
left: 0;
position: absolute;
top: 46px;
z-index: 1;
}
#nav {
height: 34px;
width: 878px;
}
#contact-button a {
/*background: url("/img/nav_contact.gif") no-repeat scroll 0 0 transparent;*/
background-color: Green;
width: 109px;
}
#quickcontact {
background: none repeat scroll 0 0 #666449;
border-left: 2px solid #3D352B;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0;
text-align: left;
top: 75px;
width: 245px;
z-index: 1000;
}
#quickcontact-in a {
color: #FFFFFF;
}
#quickcontact fieldset {
border: medium none;
}
#quickcontact-in .field {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
padding: 2px;
width: 190px;
}
#quickcontact-in .txtField {
background: none repeat scroll 0 0 #FEFBD5;
border: 2px solid #FFF1BD;
color: #666666;
display: block;
float: left;
font: 1em "Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
height: 90px;
margin: 5px 0 7px;
outline: medium none;
padding: 2px;
width: 190px;
}
A quick mashup example here. I think you can use slideToggle(). Look here for more examples.
Try adding this to the footer:
$('#contact-button a').click(function(){
$('#contact-form').slideToggle("fast");
});
Related
$(document).ready(function(){
$("#first_form").submit(feedtable);
function feedtable(e){
e.preventDefault();
var task = $("#fname").val(),
male = $("input[type='radio']:checked").val(),
//female = $("#female:checked").val(),
desc = $("#age").val(),
type = $("#city").val();
console.log(male);
console.log(task);
console.log(type);
$('#content').append(
"<tr><td>"+task+"</td>"+
"<td>"+male+"</td>"+
"<td>"+desc+"</td>"+
"<td>"+type+"</td>"+
"<td>"+"uyt"+"</td></tr>"
);
}
});
I am using #first_form named form and want to insert values in #content named table
Every output is showing in console but values are not inserting in table
HTML code is bit of messy
here i want to insert values from form to the table
it is not giving any error every value i enter in form i displayed in console but value is not adding in table.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.6.0.min.js"></script>
<script src="./one.js"></script>
<title>Document</title>
<style>
body{background-color: rgb(175, 166, 166);}
#tablee{border: 2px solid rgb(13, 13, 14);
margin-top: 0px;
width:fit-content;}
.content{border-collapse: collapse;
margin: 5px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}
#inp {margin-left: 500px;
border: 2px solid rgb(13, 13, 14);
width:fit-content;height:fit-content;
}
#inp form{overflow: hidden;}
</style>
</head>
<body>
<div id="tablee">
<table class="content">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>City</th>
<th>Action</th>
</tr>
<tr>
<td>ahmad</td>
<td>hgg</td>
<td>34</td>
<td>fdf</td>
<td>rrgr</td>
</tr>
</table>
</div>
<div id="inp">
<form id=first_form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" placeholder="NAME"><br><br>
<input type="radio" name="gender" class="male" value="male">
<label for="Male">Male</label><br>
<input type="radio" name="gender" class="male" value="female">
<label for="female">Female</label><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" placeholder="Age" value="0" max="999" min="1"><br><br>
<label for="city">Choose a city:</label>
<select name="city" id="city" placeholder="Select CIty">
<option value="lahore">lahore</option>
<option value="karachi">karachi</option>
<option value="multan">Multan</option>
<option value="islamabad">Islamabad</option>
</select>
<br>
<input type="submit" onclick="" value="submit" button class="button">
</form>
</div>
</body>
</html>
Just a hunch. Replace the variable name "type" with something else. As you can see, it is rendered as keyword. Might mean something.
I have tried inserting my data to my SharePoint list to no avail, kindly assist with what could be wrong with my code..am new to SharePoint.
When you click submit, nothing appears, instead, it adds a # at the end of the url. Under Requester details, it should pick automatically when the person is logged in ofiice365.
Under Department head, it should pick my department heads based where I work i.e. if am in Engineering, only my boss should appear, else if sales, only my sales boss, else if security, only my boss should appear.
<script type="text/javascript">
function save() {
var siteUrl = 'https://mysite.sharepoint.com/sites/';
//receiving inputs
var pcv = document.getElementById('pcv').value;
var amountFigures = document.getElementById('amountFigures').value;
var amountWords = document.getElementById('amountWords').value;
var reason = document.getElementById('reason').value;
var requester = document.getElementById('requester').value;
var phone = document.getElementById('phone').value;
var approver = document.getElementById('approver').value;
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('myListName');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
//Field list Sharepoint
oListItem.set_item('pcv', Title);
oListItem.set_item('amountFigures', amountFigures);
oListItem.set_item('amountWords', amountWords);
oListItem.set_item('reason', reason);
oListItem.set_item('requester', requester);
oListItem.set_item('phone', phone);
oListItem.set_item('approver', approver);
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded() {
alert('The record was created successfully');
}
function onQueryFailed(sender, args) {
alert('Request failed.');
}
function randomNumber(len) {
var randomNumber;
var n = '';
for(var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
document.getElementById("pcv").value = randomNumber(9);
</script>
[data-list-name]{
min-height: 100px;
overflow: hidden;
clear: both;
background_color: red;
}
[data-list-name] input[type="file"] {
border:none;
box-shadow:none;
padding-left: 0;
padding-right: 0;
}
[data-list-name].loading{
background:url('spinner.gif') no-repeat center center #fff;
}
[data-list-name] .error-msg,
[data-list-name] .success-message {
background: #f9d3d3;
margin-bottom: 12px;
padding: 10px 12px;
border: 1px solid #dfabab;
border-radius: 4px;
font-size: 12px;
font-style: italic;
color: #5f5f5f;
margin-bottom: 20px;
margin-top: 5px;
}
[data-list-name] .success-message {
background: #dff8e6;
border: 1px solid #b9eac6;
}
[data-list-name] .error {
color: #ef0000;
margin-top: 5px;
margin-bottom: 5px;
font-size: 12px;
}
[data-list-name] .btn-submit {
background-color: #5cb85c;
border-color: #4cae4c;
padding: 7px 10px;
clear: both;
display: block;
width: 72px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
[data-list-name] .btn-submit:hover {
color: #fff;
background-color: #449d44;
border-color: #398439;
text-decoration: none;
cursor: pointer;
}
[data-list-name] h5 {
margin-bottom: 15px;
font-weight: 700;
}
::-webkit-input-placeholder {
color: #ababab !important;
font-size: 12px !important;
}
:-moz-placeholder { /* Firefox 18- */
color: #ababab !important;
font-size: 12px !important;
}
::-moz-placeholder {
color: #ababab !important;
font-size: 12px !important;
}
:-ms-input-placeholder {
color: #ababab!important;
font-size: 12px !important;
}
input:focus::-webkit-input-placeholder { color:transparent !important; }
input:focus:-moz-placeholder { color:transparent !important; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent !important; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent !important; } /* IE 10+ */
.btn-submit {
color:#fff !important;
clear:both;
}
#h3{
text-align: center;
background-color: #272940;
color: red;
height: 100px;
padding-top: 30px;
}
#id{
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery.SPServices-0.7.2.js "></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src=http://ajax.aspnetcdn.com/ajax/jquery-2.1.1.js> </script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
<!--CHANGE THE SRC AND HREF OF THE JS AND CSS HERE!!!-->
<script src=http://ajax.aspnetcdn.com/ajax/jquery-2.1.1.js> </script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
<div class="container" style="border: 2px solid black">
<!--ENTER YOUR LIST NAME HERE!!! INSIDE data-list-name-->
<div class="row" data-list-name="Petty Cash" id="form">
<h3 id="h3">PETTY CASH VOUCHER</h3> <br><br>
<div class="col-sm-6">
<table id="tableData" class="tableData" type="hidden">
<tr><thead>
<th>Account</th>
<th>Cost Centre</th>
<th>Amount</th></thead>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12" value="Total"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="9.5"></td>
</tr>
<tr>
<td><input type="text" name="" size="12"></td>
<td><input type="text" name="" size="12"></td>
<td><input type="submit" name="" size="9.5" value="Submit"></td>
</tr>
</table>
</div>
<div class="col-sm-6" id="col2">
<div class="success-message" style="display:none;">
Thank you for your submission. Click Here to another.
</div>
<div class="form-group">
<label for="countries">VOUCHER No:</label>
<input name="pcv" class="form-control input-sm" id="pcv" " data-rules="required|email" autocomplete="off" maxlength="16" readonly/>
</div>
<div class="form-group">
<label for="countries">CASH Received</label>
<input name="amountFigures" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/>
</div>
<div class="form-group">
<label for="countries">AMOUNT IN WORDS</label>
<textarea name="amountWords" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/></textarea>
</div>
<div class="form-group">
<label for="countries">Reason for Request</label>
<textarea name="reason" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/></textarea>
</div>
<div class="form-group">
<label for="countries">Requested By</label>
<input name="requester" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/>
<!--PICKS YOUR NAME WHEN YOU ARE LOGGED IN-->
</div>
<div class="form-group">
<!--START OF A CHECKBOX-->
<label for="countries">Phone Number</label>
<input name="phone" class="form-control input-sm" placeholder="Enter here..." data-rules="required|email" autocomplete="off"/>
</div>
<div class="form-group">
<label for="countries">Who is your approver </label>
<select class="form-control input-sm" name="approver" data-rules="required">
<option value="">-Your department head-</option>
<!--PICK FROM THE ACTIVE DIRECTORY, LIST OF ALL MANAGERS-->
</select>
</div>
<input type="submit" name="submit" class="submit" onclick="save()" id="submit"> <br><br>
</div>
</div>
</div>
I checked your code and I see there are many references to jquery library which are not required and needs to be removed. Just one reference to jquery library is enough.
I see you are using jquery SPServices library. If you are new to SharePoint then I would recommend you to go through article at https://www.c-sharpcorner.com/blogs/crud-operation-on-list-in-sharepoint-using-jquery-and-spservices
This would help you to implement CRUD operations with ease than to use JSOM script. Also you can refer that article to see how it has used jquery and SPServices library references.
Hope this helps you.
I try to change the color of a button if the two checkboxes are checked. But I can't figure out how to do this. I understand that I need javascript, but have no experience at all with javascript.
I copied some lines from internet but this doesnot change the color of the button. So if the checkboxes are checked there should be another style selected for the button.
this is my code sofar:
<!DOCTYPE html>
<html>
<head>
<style>
.button1 {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color: red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
</style>
<script type="text/javascript">
function checkbox_checked {
if (input.getAttribute('type') == 'checkbox' && input.checked)
n++;
checkbox_checked.elements.boxes_checked.value = n;
if n = 2 button.className = "button2";
}
</script>
</head>
<body style="background-color:#E3CEF6;">
<button class="button1">General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;">
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td><label class="container"> <input type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td><label class="container"> <input type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
</body>
</html>
Attach onchange() to the check boxes. Then simply check both check boxes to change the class accordingly. Try the following:
function checkbox_checked(){
var chk = document.querySelectorAll('input[name^=cb_General_]')
if(chk[0].checked && chk[1].checked)
button.className = "button2";
else button.className = "button1";
}
.button1 {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:#E3CEF6;" >
<button id = "button" class="button1" >General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
</body>
</html>
You need to set the attribute onchange for the checkbox inputs, and also there are some errors in your javascript code. You can achieve the result like this:
.button1 {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
<script>
var n = 0;
function checkbox_checked(e) {
if(e.checked) {
n++;
}
else {
n--;
}
document.getElementsByTagName("button")[0].className = (n == 2) ? "button2" : "button1";
}
</script>
<button class="button1" >General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
You are right that you need JavaScript but if you do not call the function it will do nothing. However, there is a better way of doing it, called eventListener. This always 'listens' to your code and fires up when something changes.
Event Listener Example
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="checkbox" id="check1">
<input type="checkbox" id="check2">
<button id="button">Watch me change</button>
</div>
</body>
</html>
<script>
document.getElementById("check1").addEventListener("change", function(){
if(document.getElementById("check1").checked && document.getElementById("check2").checked){
document.getElementById("button").style.backgroundColor = "red";
}
});
</script>
Explanation
In the HTML body part there are two checkboxes both with a unique ID (check1 and check2) and a button whose backgroundColor will change if the two checkboxes are checked. Then an eventListener is added to check1 with the addEventListener function. Inside it, it checks that both (&&) checkboxes are checked with the checked attribute. If both are true, it changes the backgroundColor of the given button.
Reference and further reading
Article about the addEventListener function
Try this
var i = 0;
function checkbox_checked(e) {
if(e.checked) {
i++;
}
else {
i--;
}
document.getElementsByTagName("button")[0].className = (i == 2) ? "button2" : "button1";
}
button {
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1{
background-color: #FF0000;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
<button class="button-css button1" >General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
Maybe this one would help you to have an idea. It's just a simple code with html and javascript.
function myFunction() {
var checkBox = document.getElementById("myCheck");
var button = document.getElementById("myButton");
if (checkBox.checked == true){
button.style.backgroundColor = "green";
} else {
button.style.backgroundColor = "red";
}
}
<input id="myCheck" type="checkbox" onclick="myFunction()">Click Me<br>
<button id="myButton" style="background-color: red; color: white">Button</button>
I have a html page which takes hour and minute inputs for exams.
- In another html or css document I would like to essentially run a countdown timer of HH:MM. i.e. if input was 1 hour and 10 min it would countdown from 01:10 to 00:00. I am assuming there is some way of calling the input values from one module to another.
- I would also like to make this countdown start when a start button is pressed
- The display module (Exam Display) is split into 4 quarters such that 4 exam timers can run concurrently. (I am hoping that in the case that there is no input value, when the start button is pressed nothing will happen with that particular timer)
I am attaching both jsfiddle and the code.
For ExamSetup.html & ExamSetup.css
-https://jsfiddle.net/vf113tux/1/
OR
ExamSetup.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" type="text/css" href="ExamSetup.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="Exam 1">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 1</legend>
<label for="Exam Name">Name</label>
<input id="Name1" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing1H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing1M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 2">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 2</legend>
<label for="Exam Name">Name</label>
<input id="Name2" type="text" placeholder="Name"
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing2H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing2M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 3">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 3</legend>
<label for="Exam Name">Name</label>
<input id="Name3" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing3H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing3M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 4">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 4</legend>
<label for="Exam Name">Name</label>
<input id="Name4" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing4H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing4M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
<div class ="span7 text-center">
<a href="Display.html"><button type="submit" button id="button" class="btn btn-lg btn-primary">Next</button>
</div>
</div>
</body>
</html>
ExamSetup.css:
#charset "utf-8";
/* CSS Document */
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
button {
text-align: center;
}
For ExamDisplay.html & ExamDisplay.css
- https://jsfiddle.net/890e2dmq/ (Note for backgrounds are there simply to show the quarter partitions)
OR
ExamDisplay.html:
Untitled Document
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<button id="button" class="btn btn-lg btn-success">Start</button>
</body>
</html>
ExamDisplay.css:
#charset "utf-8";
/* CSS Document */
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }
Thank you very much! And I have checked through quite extensively for the last day but have found it rather difficult to find a proper simple countdown that I require. Many of the developed programs out are mainly for dates or they are for DD:HH:MM:SS and I was unable to edit the code to incorporate only HH:MM.
Ok, now the improoved version with 4 timers (CSS is up to you).
JSFIDDLE (full version)
$(document).ready(function(){
function start1(){
var h1 = $('input:text[name=h1]').val();
var m1 = $('input:text[name=m1]').val();
$('.counter1').html(h1+' : '+m1);
var inter1 = setInterval(function(){
m1--;
if(m1 == 0 && h1 != 0){
m1 = 59;
h1--;
}else{
if(h1 == 0 && m1 == 0){
clearInterval(inter1);
}
}
$('.counter1').html(h1+' : '+m1);
},60000)
}
$('#sub1').click(function(){
start1();
})
});
body{
position: relative;
}
.counter1{
width: 50%;
height: 50px;
background-color: rgba(255,0,0,0.5);
left: 0%;
top: 0px;
}
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src ="yourPathToYourJavascript.js"></script>
<div class="counter1"></div>
<input type="text" name="h1" value="Hours"></input><br>
<input type="text" name="m1" value="Minutes"></input><br>
<input type="submit" id="sub1" value="Couter #1"></input><br>
I've got a webpage that validates as XHTML 1.0 Strict. I'm using YUI3 and I'm using the seed-file-based instantiation. In several places in my javascript code, I'm doing something like:
YUI().use("node", function(Y){
var node = Y.one("#my_element_id");
});
It works great, cross-platform, cross-browser, etc. in almost every case. However, I was testing yesterday, and I came across one time it didn't work. It made no sense to me, the element I was trying to grab was:
<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...
</form>
I know for sure it is well-formed markup, so that's not the issue. If I do:
YUI().use("node", function(Y){
var node1 = Y.one("#component_form");
var node2 = document.getElementById("component_form");
var node3 = Y.one(document.getElementById("component_form"));
});
node1 is null, and node2 is the element I was looking for, and so is node3.
Anyone have a similar experience, or know if this is a YUI3 bug, or what?
Here is a full markup example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<!-- metadata -->
<title>Inventory Management System</title>
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script src="./util.js" type="text/javascript"></script>
<style type="text/css">
td{
vertical-align:text-top;
}
legend{
border: 2px #D4D0C8 groove;
padding: 2px;
font-weight: bolder;
}
fieldset{
border: 2px #D4D0C8 groove;
padding-bottom: 12px;
padding-left: 10px;
padding-right: 10px;
}
label{
font-weight: bold;
}
#err_container{
color: red;
display: none;
visibility: hidden;
margin: 10px;
}
#status_container{
color: green;
display: none;
visibility: hidden;
margin: 10px;
}
</style>
</head>
<body>
<div id="canvas">
<form id="st_frm" method="post" action="" style="display:none; visibility: hidden;">
<fieldset style="border:none; margin:0; padding:0;">
<input type="hidden" name="state" id="st" value=""/>
</fieldset>
</form>
<div id="navbar">
home
| components | products
</div>
<h1 id="main_h1">
Update Component
</h1>
<form id="component_form" method="post" action="/inventory/index.php">
<fieldset>
<legend id="component_form_legend">Component Information</legend>
<input type="hidden" id="component_form_id" name="id" value="8"/>
<input type="hidden" name="state" value="1"/>
<table>
<tr>
<td><label for="manufacturer_name_id">Manufacturer:</label></td>
<td><input type="text" id="manufacturer_name_id" name="manufacturer_name" value="Vishay"/></td>
</tr>
<tr>
<td><label for="manufacturer_part_number_id">Part Number:</label></td>
<td><input type="text" id="manufacturer_part_number_id" name="manufacturer_part_number" value="1123114123"/></td>
</tr>
<tr>
<td><label for="ct_id">Component Type:</label></td>
<td>
<select id="ct_id" name="component_type">
<option value="0">New Type</option>
<option value="5" >sfkd</option>
<option value="6" >qwrqew</option>
<option value="7" selected="selected" >Resistor</option>
</select>
<input id="nct_id" type="text" name="new_component_type" size="10" style="visibility:hidden; display: none;" />
</td>
</tr>
<tr>
<td><label for="description_id">Description:</label></td>
<td>
<textarea id="description_id" name="description" rows="3" cols="25">limits the flow of current...</textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input id="component_form_submit_button" type="button" value="Update Component"/>
<span id="component_form_hide_when_new" >
<input id="component_form_delete_button" type="button" value="Delete Component"/>
<input id="component_form_new_button" type="button" value="New Component"/>
</span>
<input id="component_form_delete" name="delete" type="hidden" value="0"/>
</td>
</tr>
<tr>
<td colspan="2">
<div id="error_container"> </div>
<div id="status_container"> </div>
</td>
</tr>
</table>
</fieldset>
</form>
<ul id="component_form_list">
<li>
Vishay 1123114123
</li>
</ul>
</div>
</body>
</html>
EDIT
IE 8 crashes on the var s = ... line because frm is null.
function submitForm(frmId){
YUI().use("node", function(Y){
var frm = Y.one("#" + frmId);
var s = typeof frm.submit;
if(s === 'function'){
frm.submit();
}
});
}
but....
function submitForm(frmId){
YUI().use("node", function(Y){
var frm = Y.one(document.getElementById(frmId));
var s = typeof frm.submit;
if(s === 'function'){
frm.submit();
}
});
}
works in both...
Did you miss one double quote?
<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...