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.
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 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>
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 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"];?>">
...