I am trying to get the value of an input element. The element is in a modal and the modal data is populated with different values depending on the button I click to open the modal.
var modalBody = document.getElementsByClassName("modal-body");
for(var i = 0; i < modalbody.length; i++) {
var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;
alert(mac);
}
error: TypeError:
modalBody.item(...).getElementsByTagName(...)[2].getElementById is not
a function
I also tried with document.getElementById("mac-name").value; but that returns blank
<form method="post">
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" required="" type="text">
</div>
</div>
</form>
Instead of using getElementsByClassName and then running the following on each element:
var mac = modalBody.item(i).getElementsByTagName('div')[2].getElementById("mac-name").value;
You can use instead use querySelectorAll and pass in .modal-body div #mac-name. This will select all elements with the id mac-name inside a div within an element with the class modal-body. You can use the results of this to then loop over each element and get each value:
var macs = document.querySelectorAll('.modal-body div #mac-name');
See example below:
var macs = document.querySelectorAll('.modal-body div #mac-name');
for (var i = 0; i < macs.length; i++) {
var mac = macs[i].value;
console.log(mac);
}
<form method="post">
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id1" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name1" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name1" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" value="Addr 1" required="" type="text">
</div>
</div>
<div class="modal-body">
<div class="form-group">
<label for="station-name" class="col-form-label">ID:</label>
<input class="form-control" id="station-id2" name="edit--id" required="" type="text" hidden="">
<input class="form-control" id="station-name2" name="edit--name" required="" type="text">
</div>
<div class="form-group">
<label for="profile-name" class="col-form-label">Profile:</label>
<select type="text" class="form-control" id="profile-name2" name="edit-profile" required="">
<option>name1</option>
<option>name2</option>
</select>
</div>
<div class="form-group">
<label for="mac-name" class="col-form-label">MAC Address:</label>
<input class="form-control" id="mac-name" name="edit-mac" value="Addr 2" required="" type="text">
</div>
</div>
</form>
Related
Basically, I have an select option
<div class="col-lg-6 pl-2">
<div class="form-input-div">
<select onchange="addForm()" class="form-control">
<option>Number of guest to join</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
What I want is to add a new form/input field based on the option. For example I will select 4 in the menu it will add 4 input fields and when I changed it to 2 It will delete the other two and so on..
Here is my UI with 2 static input fields.
The two static input fields element
<div class="row" id="guestDetails">
<div class="col-lg-6">
<h5>Guest Detail 1</h5>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control" placeholder="Enter Mailing Address"></textarea>
</div>
</div>
<div class="col-lg-6">
<h5>Guest Detail 2</h5>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
</div>
</div>
</div>
</div>
EDIT:
What i tried is this
<script>
function addForm(){
// alert ('hello')
var element = document.getElementById('guestDetails');
element.innerHTML += `<div class="col-lg-6">
<h5>Guest Detail 1</h5>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
</div>
</div>`;
}
</script>
But I dont know how to remove other rows for example I will change the value from 4 to 1
You can use for-loop and run that loop till value of select-box and inside this loop just append new divs .
Demo Code :
function addForm(values) {
var element = document.getElementById('guestDetails');
element.innerHTML = "" //empty
//loop till select values
for (var i = 1; i <= parseInt(values); i++) {
element.innerHTML += `<div class="col-lg-6">
<h5>Guest Detail ${i}</h5>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Name">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Phone">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder=" NRIC (Last 4 Digits)">
</div>
<div class="form-input-div">
<input type="text" class="form-control " placeholder="Enter Email">
</div>
<div class="form-input-div address-guest">
<textarea class="form-control " placeholder="Enter Mailing Address"></textarea>
</div>
</div>`;
}
}
<div class="col-lg-6 pl-2">
<div class="form-input-div">
<!--pass here value-->
<select onchange="addForm(this.value)" class="form-control">
<option>Number of guest to join</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
<div class="row" id="guestDetails">
</div>
You can use jQuery Toggle Function. Unless you can make your own toggle using pure javascript
function elementBlock(elmOne,elmTwo,elmThree) {
document.getElementById("one").style.display = elmOne
document.getElementById("two").style.display = elmTwo
document.getElementById("three").style.display = elmThree
}
function toogleDiv(val) {
if (val == 1) {
elementBlock('block','none','none')
}else if (val == 2) {
elementBlock('none','block','none')
}else if (val == 3) {
elementBlock('none','none','block')
}
}
document.getElementById("selectOpt").addEventListener('change', function(e) {
toogleDiv(e.target.value);
})
#one, #two, #three {
display: none;
}
<select class="form-control" id="selectOpt">
<option>Number of guest to join</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
First you have to Display None all of your form input
Then Based On you select value you have to change the display none to block
I just created it for three div You can include as many as div you want
This will most likely need to involve javascript, which I know almost nothing about so please bear with me.
I would like to have a regular form, say styled with bootstrap. But I don't want to display the all the fields at once when the page is loaded. Instead I would like to display the first field and continue to display the following fields as the previous fields are focused or have content in them.
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
In this example only "Name" would show up, when the page loads, then when it is focused then the "Email" field would show up.
Any ideas would be great, thanks!
Just hide all elements in the form except for the first one, listen for changes on the form and display the next element relating to the last changed element (the event.target).
Example (which is definitley improvable):
$(".form-group:not(:first-child)").hide();
$("form").on("change keypress paste", function (event) {
$(event.target).parent().next().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
You could use JQuery to remove a hidden class on input focus.
Run the code snippet or check out the CodePen Demo:
$(document).ready(function() {
$("input").focus(function() {
$(this).parent(".form-group").next().removeClass("hidden");
});
});
.hidden {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form action="" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group hidden">
<label for="email">Email</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group hidden">
<label for="website">Website</label>
<input type="text" name="website" class="form-control">
</div>
<div class="form-group hidden">
<label for="message">Message</label>
<textarea name="message" class="form-control" rows="5"></textarea>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>
To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});
I wanted to disable the div when i click the the checkbox. if the current address and permanent address are the same, the user just click the check box to disabled the field of the permanent address. Thanks!
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
Add the following JS to your code.
$(document).ready(function(){
$('input[type="checkbox"]').change(function(){
$('.permanentAdd').attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
</div>
<div rv-each-address="applicant:personal_information:addresses">
<div class="row">
<div class="col-md-8">
<div class="form-group ">
<label class="control-label"><strong rv-text="address:description">Permanent Address</strong></label>
<input class="form-control permanentAdd" rv-value="address:address"
name="model.cid" data-validate="required" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="city">City</label> <input
rv-value="address:city" rv-enabled="address:province" type="text" class="form-control typeahead" name="city"
id="city" data-validate="required"
placeholder="Current city" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="state">Province</label> <input
rv-value="address:province" rv-enabled="address:country" type="text" id="province" placeholder="Select Province"
name="province" class="form-control typeahead">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="country">Country</label>
<select name="gender" class="form-control" id="gender">
<option value="" disabled selected>Country</option>
<option>Philippines</option>
<option>Hong Kong</option>
<option>South Korea</option>
<option>Singapore</option>
<option>China</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <input class="form-control" rv-value="address:postalCode" name="postalCode"
id="postalCode" data-validate="required"
placeholder="Zip Code" />
</div>
</div>
</div>
</div>
You can try something like this
<input type="checkbox" id="check_box" onchange="set_status();">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="postalCode">Postal
Code</label> <div id="txt_field" name="txt_field"> </div>
<script type="text/javascript">
function set_status() {
var appendData = '';
var checkbox = document.getElementById("check_box");
if (checkbox.checked == true) {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" readonly="readonly" data-validate="required" placeholder="Zip Code" />';
}
else {
appendData = '<input class="form-control" rv-value="address:postalCode" name="postalCode" id="postalCode" data-validate="required" placeholder="Zip Code" />';
}
window.jQuery('#txt_field').html(appendData);
}
</script>
</div>
</div>
</div>
</div>
Here is the example how you do this thing easy. make sure you have only one checkbox in this window. else this not working, then you need to change something.
jQuery
$( "input[type=checkbox]" ).on( "click", function(){
var n = $("input[type=checkbox]:checked").length;
if(n){
$(".permanent-address").attr("disabled", 'disabled');
}else{
$(".permanent-address").removeAttr("disabled");
}
});
HTML
<div class="checkbox">
<label>
<input type="checkbox">Current and Permanent Address are the same.
</label>
</div>
<input class="form-control permanent-address" rv-value="address:address" name="model.cid" data-validate="required" />
Pure javascript anwser
function checkAddress(checkbox) {
var inputs = document.querySelectorAll('input:not([type=checkbox])');
var selects = document.querySelectorAll('select');
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = checkbox.checked;
}
for (var i = 0; i < selects.length; i++) {
selects[i].disabled = checkbox.checked;
}
}
HTML code
<input type="checkbox" onclick="checkAddress(this)">
https://jsfiddle.net/0ba4f7jd/
Simply create a function that gets called when the checkbox is checked, which disables the div and all child elements:
$('#checkbox').change(function(){
var div = $('#everything');
if (div.attr('class')!="disabled") {
div.addClass("disabled");
$("#everything *").attr("disabled", true);
}
else {
div.removeClass("disabled");
$('#everything *').attr('disabled',false);
}
});
DEMO
I am trying to create a simple angularjs form where i want to have nested object as ng-model
$scope.project = {
name:"Some Name",
location:{line1:"" , line2:"", city:"", zipcode:""}
}
http://plnkr.co/edit/RfN7qZBX3HlOtGhFOdFX?p=preview
now the problem is when i click on line2 , city,state etc focus goes back to line1
tried changing HTML and several other stuff but don't know what to do..
Tried removing bootstrap as well.
The issue is that you are misusing the <label> tag. Instead of this:
<label class="form-group">
Client Location
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</label>
Try this:
<div class="form-group">
<label>Client Location</label>
<div class="controls">
<input type="text" data-ng-model="project.location.line1" class="form-control" placeholder="Line 1">
<input type="text" data-ng-model="project.location.line2" class="form-control" placeholder="Line 2">
<input type="text" data-ng-model="project.location.city" class="form-control" placeholder="City">
<input type="text" data-ng-model="project.location.state" class="form-control" placeholder="State">
<input type="text" data-ng-model="project.location.zip" class="form-control" placeholder="Zip Code">
<input type="text" data-ng-model="project.location.country" class="form-control" placeholder="Country">
</div>
</div>
The first label should be changed as well. Instead of this:
<label class="form-group">Name
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</label>
Try this:
<div class="form-group">
<label>Name</label>
<div class="controls">
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</div>
</div>
Or this:
<div class="form-group">
<label>
Name
<input type="text" data-ng-model="project.name" class="form-control" placeholder="Name">
</label>
</div>