$(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.
Related
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.
This question already has answers here:
How to remove "disabled" attribute using jQuery?
(11 answers)
Closed 2 years ago.
I have tried following code given in JSFIDDLE...
But it is not working...
I want to Enable submit button only after filling all input fields....
JSFIDDLE
code tried :
<script>
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>
What you're looking for is:
$('#register').prop('disabled', true); //makes it disabled
$('#register').prop('disabled', false); //makes it enabled
First of all, listen input event instead of keyup, The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed(including paste using right-click etc.)
You are updating empty value for every element. If last element is having valid value, variable will be false. use the same variable as flag in .each loop and prevent loop for next occurrences if value is false
(function() {
$('form input').on('input', function() {
var empty = false;
$('form input').each(function() {
if (!empty && $(this).val() == '') {
empty = true;
}
});
$('#register').prop('disabled', empty);
});
})()
.link-button-blue {
font: bold 14px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #002633;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: pointer;
}
.link-button-blue:disabled {
font: bold 14px Arial;
text-decoration: none;
background-color: #333;
color: #ccc;
padding: 10px 16px 10px 16px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
cursor: no-drop;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<div class="form-field-input">
<input type="submit" value="Go To Step 2" id="register" class="link-button-blue" disabled="disabled">
</div>
<div class="form-field-label">Full Name :</div>
<div class="form-field-input">
<input type="text" value="" name="fname" id="fname" required>
</div>
<div class="form-field-label">Address :</div>
<div class="form-field-input">
<textarea value="" name="address" id="address" rows="4" pattern=".{15,}" required title="15 characters minimum" required></textarea>
</div>
<br>
<div class="form-field-label">Email :</div>
<div class="form-field-input">
<input type="text" value="" name="email" id="email" required>
</div>
<br>
<div class="form-field-label">Mobile :</div>
<div class="form-field-input">
<input type="text" value="" maxlength="12" minlength="10" name="mobile" id="mobile" onkeypress="return isNumber(event)" required>
</div>
<br>
<div class="form-field-label">Phone :</div>
<div class="form-field-input">
<input type="text" value="" name="phone" id="phone" onkeypress="return isNumber(event)" required>
</div>
<div class="form-field-label">Fax :</div>
<div class="form-field-input">
<input type="text" value="" name="fax" id="fax" onkeypress="return isNumber(event)">
</div>
<div class="form-field-label">Birthdate :</div>
<div class="form-field-input">
<input type="text" name="birthdate" id="birthdate" placeholder="Click To Open Calendar" required>
</div>
<br>
<div class="form-field-label">Age :</div>
<div class="form-field-input">
<input type="text" value="" name="age" id="age" placeholder="Select Birthdate" required>
</div>
<br>
<div class="form-field-label">Select Questionnaire Catagary :</div>
<div class="form-field-input">
<label class="checkbox">
<input id="select_question_category-0" type="checkbox" name="select_question_category[]" value="General" />General</label>
<br>
<label class="checkbox">
<input id="select_question_category-1" type="checkbox" name="select_question_category[]" value="Stressfull Life Like - IT/BPO/Management" />Stressfull Life Like - IT/BPO/Management</label>
<br>
<label class="checkbox">
<input id="select_question_category-2" type="checkbox" name="select_question_category[]" value="Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer" />Heredity of Cancer/Presently Suffering from Cancer/Suffered from Cancer</label>
<br>
<label class="checkbox">
<input id="select_question_category-3" type="checkbox" name="select_question_category[]" value="Heredity of Diabetes/Presently Suffering from Diabetes" />Heredity of Diabetes/Presently Suffering from Diabetes</label>
<br>
<label class="checkbox">
<input id="select_question_category-4" type="checkbox" name="select_question_category[]" value="Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack" />Heredity of Heart Disease/Detected IHD/Suffered from Heart Attack</label>
<br>
</div>
<br>
<div class="form-field-label">Gender :</div>
<div class="form-field-input">
<select name="gender" id="gender" required>
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<br>
<div class="form-field-label"></div>
</form>
Fiddle demo
$(document).ready(function() {
$('.input-field').change(function() {
var empty = false;
$('.input-field').each(function() {
$('#btn').addClass('disabled');
if($(this).val() == ''){
empty = false;
return false; //u need to break out from each
}
empty = true; //then u need to set value when it's out from each
});
if(empty == true) {
$('#btn').removeClass('disabled');
}
});
});
u need to break out from each,then u need to set value when it's out from each
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 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");
});
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"];?>">
...