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
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.
How can you add another name to the input names ?
var checked = document.querySelector("input[name = 'variable']:checked")
I have another input name called 'sub'. But I don't know how you can add this in the code.
(I am in the learning process of js)
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"> <h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span> </div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
and the script:
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "hjhjhjhjct";
break;
}
checked.parentNode.lastChild.innerHTML = answer;
}
there are some points to mention:
First.
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo" style="color:red"></span></div>
<div> </div> <-- this is will become your .lastChild so i think you not expect this <div> as .lastChild so delete that tag.
Second use querySelectorAll for multiple selection, so this is wrong:
var checked = document.querySelector("input[name=variable]:checked, input[name=sub]:checked")
Third multiple select returns mutiple result, i.e. array of result, so use array to result handling.
Below is edited code, so reedit it for your purpose:
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#demo, #demo2, #demo3, #demo4, #demo5, #demo6, #demo7, #demo8, #demo9 {
display: inline;
margin-right: 30%;
float:right;
width:50%;
}
input[type="submit"]
{
padding: 10px 15px 11px !important;
font-size: 18px !important;
background-color: #57d6c7;
font-weight: bold;
text-shadow: 1px 1px #57D6C7;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"><h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Octagon <span class="explanation" id="demo1" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="0" />
Leprosy <span class="explanation" id="demo2" style="color:red"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3" style="color:green"></span></div>
<div class="row"> <h3>Question 2</h3></div>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="demo4"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2 <span class="explanation" id="demo5"></span></div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3 <span class="explanation" id="demo6"></span></div>
<div class="row"><h3>Question 3</h3></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1 <span class="explanation" id="demo7"></span></div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2 <span class="explanation" id="demo8"></span></div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3 <span class="explanation" id="demo9"></span></div>
<p> <input type="submit" onclick="myFunction()" value="Check" /> </p>
</form>
</div>
<!-- close quizbox div -->
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelectorAll("input[name=variable]:checked, input[name=sub]:checked, input[name=con]:checked")
for(var answ = 0 ; answ < checked.length; answ++){
var value = checked[answ].parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
case 'demo4':
answer = "demo4";
break;
case 'demo5':
answer = "demo5";
break;
case 'demo6':
answer = "demo6";
break;
case 'demo7':
answer = "demo7";
break;
case 'demo8':
answer = "demo8";
break;
case 'demo9':
answer = "demo9";
break;
}
checked[answ].parentNode.lastChild.innerHTML = answer;
}
}
</script>
<div> </div>
I am trying to create a form in HTML, and also trying to ensure that any field is not left empty.
Here is the HTML for the form
<form role="form" id="companyDetails" name="companyDetails" method="post" action="saveCompanyDetails.jsp" onsubmit="return false;">
<div class="col-lg-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" id="cmpname" name="cmpname">
<p id="cmpnameError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" rows="3" id="desc" name="desc"></textarea>
<p id="descError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Url</label>
<input type="text" class="form-control" name="url" id="url">
<p id="urlError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Email Id</label>
<input type="text" class="form-control" name="emailid" id="emailid">
<p id="emailidError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" rows="3" id="address" name="address"></textarea>
<p id="addressError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<h1>All Links <i class="fa fa-link"></i></h1>
<div class="form-group">
<label>Facebook Link</label>
<input type="text" class="form-control" name="fblink" id="fblink">
<p id="fblinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Twitter Link</label>
<input type="text" class="form-control" name="twlink" id="twlink">
<p id="twlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Linkedin Link</label>
<input type="text" class="form-control" name="linkinlink" id="linkinlink">
<p id="linkinlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Download Link</label>
<input type="text" class="form-control" name="downlink" id="downlink">
<p id="downlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Live Help Link</label>
<input type="text" class="form-control" name="livehelplink" id="livehelplink">
<p id="livehelpError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Terms & Condition Link</label>
<input type="text" class="form-control" name="tclink" id="tclink">
<p id="tclinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Promotion Link</label>
<input type="text" class="form-control" name="prolink" id="prolink">
<p id="prolinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Sign Up Link</label>
<input type="text" class="form-control" name="signuplink" id="signuplink">
<p id="signuplinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Affiliate Link</label>
<input type="text" class="form-control" name="affiliatelink" id="affiliatelink">
<p id="affiliatelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Game Link</label>
<input type="text" class="form-control" name="gamelink" id="gamelink">
<p id="gamelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<button type="submit" class="btn btn-default" onclick="submitData()"><i class="fa fa-check"></i>Submit</button>
<button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i>Reset</button>
</div>
</form>
Notice that I have a <p> tag just below every input field, whose ID value is constructed from the ID of its corresponding input field. For eg. the <p> tag below text field cmpname is given ID cmpnameError
Now the JavaScript code for displaying the error message below the text field is given below
function submitData() {
var elements = document.querySelectorAll('#companyDetails input, #companyDetails textarea');
for (var i = 0; i < elements.length; i++) {
if (elements[i].value == "") {
var errorElementId = "#" + elements[i].id + "Error";
// alert("Generated ID is " + errorElementId);
document.getElementById(errorElementId).style.display = '';
document.getElementById(errorElementId).innerHTML = "Please enter a value for this field";
return false;
}
}
document.forms['companyDetails'].submit();
return true;
}
My problem is that the proper error message is not getting displayed on the form when I click submit.
Can anybody please help me regarding this? Thank you very much in advance.
Here is the JSFiddle link- https://jsfiddle.net/v8ooy2e1/
The pound sign is used to select elements with ids using querySelectorAll, but it shouldn't be used with getElementById.
Remove the pound sign here:
var errorElementId = "#" + elements[i].id + "Error";
Should be:
var errorElementId = elements[i].id + "Error";
Working Fiddle
You know, assuming IE 10+, you could skip all this javascript fanciness and just use the "required" attribute:
<input type="text" class="form-control" id="cmpname" name="cmpname" required>
That'll invoke the browser supported form validation.
Why do you have:
var errorElementId = "#" + elements[i].id + "Error";
Leave out the "#" sign.
If you can use jQuery
var isValid = true;
$("#companyDetails").submit(function(event) {
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
})
if (!isValid) {
alert("nopes");
}
});
FIDDLE
I have a forgot password link. On clicking the link i want to display a div. Here is my demo code. There is something which i am missing.
JSP Code:
<form action="login" method="post">
<label>Username :</label>
<input type="text" value="" name="email">
<label>Password :</label>
<input type="password" value="" name="password">
<input class="submit" type="submit" value="Login" name="Login">
<div id="link" class= "link">Forgot Password?</div>
</form>
<div id="forget-details" class = "forget-details">
<h1>Forgot Your Password</h1>
<p>Enter your registered email address and we will send you a link to reset your password.</p>
<input type="text" value="" name="email" placeholder = "Enter your registered email"/>
CSS:
form div.link{
color: #44869b;
cursor: pointer;
font-family: DIN,Helvetica,Arial,sans-serif;
font-size: 12px;
margin-top: 105px;
text-transform: inherit;
}
.forget-details {
background-color: #333;
float: right;
margin: 7px 0;
padding: 11px;
width: 97%;
display:none;
}
Jquery:
$(document).ready(function(){
$(".link").click(function(){
$(".forget_details").show();
});
});
You have class="forget-details" (hypen) but then select $(".forget_details") (underscore)
Either Change your class name to forget_details or make this change
$(".forget-details").show();