Develop Reference

cannot get data from a div

I have problem with getting data from a div tag. This is my div
<div id="log">
<div class="form-group" style="border-bottom:1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label"> Log Name <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="text" class="form-control text banner_value" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> Start Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> End Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Filter Condition <sup style="color:red">(*)</sup></label>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split"> <lable> split </lable><br>
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split"> <lable> split </lable><br>
</div>
</div>
</div>
</div>
and here it's on browser :
after i click Add :
I'm using document.getElementById("log").textContent to get data that i filled to this div, but it didn't work. How can I get my data ??? Please help. Thanks for reading my question.

function getValues() {
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
}
<div id="log">
<div class="form-group" style="border-bottom: 1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label">
Log Name <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input
type="text"
class="form-control text banner_value"
id="banner_value"
/>
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
Start Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
End Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
Filter Condition <sup style="color: red;">(*)</sup></label
>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split" />
<lable> split </lable><br />
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split" />
<lable> split </lable><br />
</div>
</div>
</div>
</div>
<button onclick="getValues()">click me</button>
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
you can use this JS code after click a button

if you want to get data from input tag
function myFunction() {
console.log(document.getElementById("myText").value)
}
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="myText" value="">
<button onclick="myFunction()">Try it</button>
</body>
</html>

I think what you want to get is the whole information. In that case you need to use the
form
tag instead of div. Div doesn't have a meaning related to data. It is just a container displayed as block.

If You want to get the value of input fields, try to put this in your html:
<script>
const logYourLog = (e) => {
console.log('Here is your value', document.getElementById("banner_value").value);
}
</script>

If you want to get data from the form, and you are using jquery. There is function called serialize() already in there. But, if you are in plain javascript, I guess you should use library for easy purpose. You can also make your own function.
serialize library but I have not tested it. Just check if you get what you need.
You must be able to do sthg like this after you add that library:
var allData = serialize(document.getElementById("log"));
Note:- if allData is not stored, try changing div to form, that should do work.

How to apply validation if input fields are empty?

I am applying validations to all the input where values are left blank. Whenever any input is blank and user will click on save button them we add class has-error and display message in small tag.
I have written following html.
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....
In jquery I am doing following validation on save button click
if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
if(academicyearname == "")
{
$("#academicyearname").closest(".form-group").addClass( "has-error");
$("#year_nameHelp").removeClass('hide');
$("#academicyearname").focus();
}
else if(startson == "")
{
$("#startson").closest(".form-group").addClass( "has-error");
$("#start_dateHelp").removeClass('hide');
}
else if(endson == "")
{
$("#endson").closest(".form-group").addClass( "has-error");
$("#end_dateHelp").removeClass('hide');
}
....
The part
if((":input").val().trim() =="")
{
$(this).closest(".form-group").addClass( "has-error");
$("small").removeClass('hide');
return;
}
is not working accordingly. I mean it should be able to dynamically detect which inputs are empty and then add error class to the corresponding input where value is "".

You can use jquery validator js's blank element plugin and you can use it as follows:
$( "input:blank" ).css( "background-color", "#bbbbff" );
Have a look at below:
https://jqueryvalidation.org/blank-selector/
It also can be applied at id and class level.

Try using
var result = $("input:text").val().trim();
if(result == ""){
//do something
}

var vendorError = false;
$(".vendorForm input").each(function () {
if ($(this).val() == '') {
jAlert('Required', 'empty');
vendorError = true;
var div = document.getElementById($(this).attr('id'));
// show meg logic
if (div.style.display !== "block") {
div.style.display = "block";
}
return false;
}
})
if (vendorError) {
return false;
}
HTML file
<div id="vendorForm" class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">
Academic Year is Required
</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="startson" value="" class="form-control block-keypress" type="text"
onclick="css()">
<small id="start_dateHelp" class="text-danger hide">
Start Date is Required
</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input id="endson" value="" class="form-control block-keypress" type="text" onclick="css()">
<small id="end_dateHelp" class="text-danger hide">
End Date is Required
</small>
</div>
</div>
</div>
...
....

I understood and somewhat same module i also designed. You can make the use of modal and give that id to in the js and on click button you can run the function in your js file. See my html page:
<div class="modal-body">
<div class="form-group">
<form id = "updateForm" onsubmit="return false" enctype="multipart/form-data">
<div class="left">
<div class="well img_height">
<img id="blah" src="admin_resources/images/user-icon.png"/>
</div>
<div>
<input type="file" name="myfile" onchange="readURL(this);" id="myfile"/>
</div>
</div>
<label for="emp_id">Employee Id:</label>
<input type="text" class="form-control" id="emp_id" name="employeeId" >
<p id="valid_msg_employee_id" class="error_message"></p>
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="firstName" name="firstName" >
<p id="valid_msg_fname" class="error_message"></p>
<label for="lname">Last Name:</label>
<input type="text"class="form-control" id="lastName" name="lastName">
<p id="valid_msg_lname" class="error_message"></p>
<label for="designation">Designation:</label> <br/>
<select name="designation" id="dropdown" class="form-control">
<option value="Select">Select Designation</option>
<option value="manager">Manager</option>
<option value="HR">HR</option>
<option value="Tech Lead">Tech Lead</option>
<option value="QA Lead">QA Lead</option>
<option value="Developer">Developer</option>
<option value="QA-Automation">QA-Automation</option>
<option value="QA-Manual">QA-Manual</option>
<option value="Software Trainee">Software Trainee</option>
<option value="Sr. Software Quality Engineer">Sr. Software Quality Engineer</option>
<option value="SQE">SQE</option>
<option value="Software Quality Engineer">Software Quality Engineer</option>
<option value="Associate Software Engineer">Associate Software Engineer</option>
<option value="QA Manager">QA Manager</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<label for="Doj">Joining Date:</label>
<input type="text" class="form-control" id="doj" name="yearOfJoining" >
<p id="valid_msg_year" class="error_message"></p>
<label for="status">Status:</label> <br/>
<select name="status" id="status" class="form-control">
<option value="active">Active</option>
<option value="inactive">inactive</option>
</select>
<p id="valid_msg_designation" class="error_message"></p>
<p id="valid_msg_year" class="error_message"></p>
<label for="email_id">Email-id:</label>
<input type="email" class="form-control" id="email" name="email">
<p id="valid_msg_email" class="error_message"></p>
<label for="quali">Contact:</label>
<input type="text" class="form-control" id="contact" name="mobileNo">
<p id="valid_msg_contact" class="error_message"></p>
<button type="submit" class="btn btn-default" onclick="updateEmployeeDetail();" data-dismiss="modal">Update</button>
<button type="button" class="btn btn-default" onclick = "deleteEmployee();" data-dismiss="modal">Delete</button>
</form>
</div>
</div>
and you can now add a class "erro_message which will be called on the modal:
the js file is this:
function employeeDetail() {
$("#submit_emp").click(function(event) {
var formValid = employeeDetail.formValidation();
if (formValid) {
var formvalue = new FormData($('#addForm')[0]);
$.ajax({
url: "intranet/addEmployee",
type: "POST",
data: formvalue,
contentType: false,
processData: false,
success: function(response) {
$('#your-modal').modal('toggle');
$("#header_success").empty();
$("#header_success").append("Response");
$("#message_success").empty();
$("#message_success").append(response.message);
$('#addForm').trigger("reset");
},
error: function(e) {
$('#your-modal').modal('toggle');
$("#message_success").empty();
$("#message_success").append(e.message);
}
});
} else {
return false;
}
});
You can add many validations on this input type and can append the messge ypuwant on that particular fied:
Hope this might help you.

This is super simplistic and does NOT do the "validation" by checking for example numeric values, etc. but you wanted/asked for the selector for empty text inputs so this gives that.
// put on some event, used change here:
$('input[type=text]').on('change', function() {
// just clear all
$(".form-group").removeClass("has-error");
$("small").addClass('hide');
// filter those empty ones
$('input[type=text]').filter(function() {
return $(this).val().trim() == "";
}).each(function() {
$(this).closest(".form-group").addClass("has-error");
$(this).parent().find("small").removeClass('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Academic Year *</label>
<div class="col-sm-7"><input type="text" id="academicyearname" maxlength="4" class="form-control only-numbers">
<small id="year_nameHelp" class="text-danger hide">Academic Year is Required</small>
</div>
</div>
<div class="form-group" id="dateStartsOn">
<label class="col-sm-3 control-label">Starts On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="startson" class="form-control block-keypress" type="text" >
<small id="start_dateHelp" class="text-danger hide">Start Date is Required</small>
</div>
</div>
</div>
<div class="form-group" id="dateEndsOn">
<label class="col-sm-3 control-label">Ends On *</label>
<div class="col-sm-7">
<div class="input-group date">
<span class="input-group-addon"> <i class="fa fa-calendar"></i> </span>
<input aria-required="true" id="endson" class="form-control block-keypress" type="text" >
<small id="end_dateHelp" class="text-danger hide">End Date is Required</small>
</div>
</div>
</div>

add label next to input text form

i just want make some added text next to my input.
im using code igniter, here is my view code.
<div class="form-group" >
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<span ><input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" value="<?=#$registration->tinggi_badan?>" > cm</span>
</div>
</div>
the top code result "cm" is below the input text.
it will be good if just using additional inline code.
the result i want is like this |---input text---|cm

Try using input-addon with input-group
<div class="form-group">
<label for="repbbpin" class="col-sm-2 text-left">Tinggi Badan :</label>
<div class="col-sm-5 text-left">
<div class="input-group">
<input type="text" class="form-control" onchange="update_data()" name="tinggi_badan" placeHolder="input text" ><span class="input-group-addon"> cm</span>
</div>
</div>
</div>
DEMO: https://jsfiddle.net/michaelyuen/crvzn2Lq/

Disable textbox inside an AngularJS Dynamic form

I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>

Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!

Load the values twice into two input fields onload

I am using local storage to save the username in the first-page.html and retrieving it into the second-page.html
But if I have two or more places in my second-page.html where I want the username to be retrieved, how can I achieve it using two different ids. Since the id once used cannot be used in another input field.
Can anyone please help.
Index.html:
<script>
function save(){
var fieldValue = document.getElementById('user').value;
localStorage.setItem('text', fieldValue);
}
</script>
<div class="form-group" id="login-fields">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"><span class="text--white glyphicon glyphicon-user"></span></i>
</span>
<input type="text" name="user" id="user" placeholder="Username" class="form-control" required/>
</div>
</div>
</div>
<input class="view sign-in-app" type="submit" value="Sign In" id="submit-login" onclick="save()" />
SecondPage.html
<script>
function load(){
var storedValue = localStorage.getItem('text');
if(storedValue){
document.getElementById('here').value = storedValue;
}
}
</script>
<body onload="load()">
<!-- first div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
<!-- second div -->
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group"> // change the id here
<input type="text" name="userName" id="here" class="form-control" placeholder="Username" required>
</div>
</div>
</div>
</body>

Just give each element different ids, really. No problem with that. And then when you set, set both:
if (storedValue) {
document.getElementById('here').value = storedValue;
document.getElementById('my-other-id').value = storedValue;
}