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.

Conditional unobtrusive validation

I have 5 or so fields that will be hidden or shown based on the value of a drop down list; however, if they are visible, I need them to be required.
Is there a way to dynamically turn on/off unobtrusive validation for these fields?
Here is some code:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 control-label">Routing Number</label>
<div class="col-md-8">
<input id="RoutingNumber" asp-for="org.RoutingNumber" class="form-control " autocomplete="off" />
<span asp-validation-for="org.RoutingNumber" class="text-danger"></span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-3 control-label">Account Holder Name</label>
<div class="col-md-9">
<input id="AccountHolderName" asp-for="org.AccountHolderName" class="form-control " autocomplete="off" />
<span asp-validation-for="org.AccountHolderName" class="text-danger"></span>
</div>
</div>
</div>
</div>
I would need these fields to be required, ONLY IF a separate drop down list had a certain value

JQuery: input change -> find parent -> find next input -> value returns undefined

I am trying to get the next closest input of same class or different class that is available in the next row div child it says undefined am unable to get it.
[Fiddle]
$(".std_amt").change(function() {
alert($(this).parent('.row').next(".row").children("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>

Try to use closest instead of parent like below
$(".std_amt").change(function() {
alert($(this).closest('.row').next(".row").find("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>

.parent('.row') looks at the direct parent, it does NOT climb the tree. You need to use closest('.row') to reference the row. And you should use find() and not children() since the input is not a direct child.
$(this).closest('.row').next(".row").find("input.std_amt")

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/

Is it possible to get values from my local machine to my form inputs tag?

I have this code:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Testing </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="interfaces" value="" required>
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Network: </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionIp" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Netmask : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="mascaraSub" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionGat" value="" required>
</div>
</div>
As you can see I have 4 inputs tag..
And I have this code as well:
with open("/etc/network/interfaces", "r") as file:
content = file.read()
print content
Where I'm getting the information I need from the following path : "/etc/network/interfaces".
Something like this:
Now, My question is: Is there a way to show the data I'm getting from my python or my local machine ("etc/network/interfaces") to my input tags?

There are two ways which you can use:
Make the python file generate the output html file, which you can use. HTML.py is a good option to start with it.
You can use XmlHttpRequest to read local files using javascript and populate the data automatically using JQuery.