I want to hide the text field when I select from item2 from the list. Here is the relevant part of my code:
<div class="control-group">
<label class="control-label">Select Parent</label>
<div class="controls">
<select name="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1">
<option value="0" >Select Parent</option>
<?php
$admin_sql=mysql_query("select * from admin_detail where parent_id='0' and role='2'");
while($Fetch_Admin=mysql_fetch_array($admin_sql)) {
?>
<option value="<?php echo $Fetch_Admin['id']; ?>" onClick = "myFunction()" > <?php echo $Fetch_Admin['name'] ;?> </option>
<?php } ?>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" name="name" class="span6 m-wrap" placeholder="Name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label">Login ID</label>
<div class="controls">
<input type="text" name="login" class="span6 m-wrap" placeholder="Login ID" required/>
</div>
</div>
<div class="control-group">
<label class="control-label">Password</label>
<div class="controls">
<input type="password" name="password" class="span6 m-wrap" placeholder="Password" required/>
</div>
</div>
<div class="control-group" id="op1">
<label class="control-label" >Add Options</label>
<div class="controls">
<input type="text" name="option1" class="span6 m-wrap" placeholder="Option1" required/>
<input type="text" name="option2" class="span6 m-wrap" placeholder="Option2" required/>
<input type="text" name="option3" class="span6 m-wrap" placeholder="Option3" required/>
<input type="text" name="option4" class="span6 m-wrap" placeholder="Option4" required/>
<input type="text" name="option5" class="span6 m-wrap" placeholder="Option5" required/>
</div>
</div>
The associated javascript function is:
<script> function myFunction() {
document.getElementById("op1").style.visibility="hidden";
}
</script>
I have also tried the same thing by using a button. When I apply the onClick function to the button it work properly. Can some one show me where I am going wrong or which function should I use for the list.
You've placed your event handler in an onclick attribute of an <option> element. This probably isn't going to work as intended. Instead, add an onchange event handler to its parent <select> element as follows:
<select name="parent_id" ... onchange="document.getElementById('op1').style.visibility=(this.selectedIndex==2)?'hidden':'visible';">
document.getElementById("op1").style.display="none";
It should be:
document.getElementById("op1").style.display="none";
instead of:
document.getElementById("op1").style.visibility="hidden";
For a list like the one you have it is required to add the event handling on the select element.
<select name="parent_id" id="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1" onchange="myFunction()">
<option value="0" >Select Parent</option>
<option value="item2" > item2 </option>
</select>
Then your js code could be like,
function myFunction()
{
if(document.getElementById("parent_id").value=="item2"){
document.getElementById("op1").style.visibility="hidden";
}else{
document.getElementById("op1").style.visibility="visible";
}
}
Example,
http://jsfiddle.net/5E8AH/
Also, the difference between display:block and visibility:hidden is that the latter will hide the content but still take the space as if it were visible.
Use this one:
document.getElementById("id").style.display = "none";
or
document.getElementById("id").style.visibility = "hidden";
try this,
document.getElementById("op1").style.display="none";
Related
I have a form like below
<form>
<div class="6 op" style="display: none;">
<div class="form-group">Service</label>
<select class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect1" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
In the code above, required is in service and capacity. I want to know how to add required to notes field automatically only when I choose Hotspot option in service field.
Do you know how to do that ?
Thank you
You can add onchange event handler to select option and as a param pass the value of the selected option. In this case when the value is hotspot you can use setAttribute to add the attribute required to the textarea else set it to false or remove it using removeAttribute. Also id of dom elements need to be unique
let txtArea = document.getElementById('exampleFormControlTextarea1');
function changeService(val) {
if (val.toLowerCase() === 'hotspot') {
txtArea.setAttribute('required', true)
} else {
txtArea.setAttribute('required', false)
}
}
<form>
<div class="6 op" style="">
<div class="form-group"><label for='exampleFormControlSelect1'>Service</label>
<select onchange='changeService(this.value)' class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect2" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
Check this simple example below ,
using jquery , if someone select specific role , code toggle class and toggle REQUIRED properties on chosen element
$('select#role').change(function(){
let role = $(this).children("option:selected").val();
if (role == 0 ){
$('.detailed').removeClass("detailed");
$('#employee').prop('required',true);
}
else{
$('#staff').addClass("detailed");
$('#employee').prop('required',false);
}
}); // close $('select#role').change(function(){
let el = document.querySelector("#exampleFormControlSelect1");
el.addEventListener("change",(e)=>{
if(el.options[el.selectedIndex].value == "Hotspot" ) {
document.querySelector("#exampleFormControlTextarea1").setAttribute("required","");
} else {
document.querySelector("#exampleFormControlTextarea1").removeAttribute("required");
}
});
<form>
<div class="6 op" style="">
<div class="form-group">Service</label>
<select class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1" required>
<select class="form-control" id="exampleFormControlSelect1" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
First of all, remove the display:none property from first div. Then check the codes above.
$('#serviceToggle').on('change', function () {
var data = $(this).val();
if (data == 'hotspot') {
$('#notes').prop('required', true);
} else {
$('#notes').prop('required', false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label for="serviceToggle">Service</label>
<select class="form-control" id="serviceToggle" required>
<option></option>
<option value="fiber">Fiber</option>
<option value="hotspot">Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="example: 1">
<select class="form-control" id="exampleFormControlSelect1" required>
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea class="form-control" id="notes" rows="3"></textarea>
</div>
<input type="submit" value="Submit">
</form>
You can achieve this using jQuery. You need to set the field to required on the onChange event of dropdown.
// Perform some code on the change event of a dropdown
$("#exampleFormControlSelect1").change(function () {
var selected = $(this).children("option:selected").val();
// Get selected value and save it in selected variable
console.log(selected);
if(selected == "Fiber"){
//check the selected value and set the field to required
console.log('i am here');
// Set capacity input to required if value if Fiber
// $("#capacity").attr('required',true);
// Set Notes field to required if value if Fiber
$("#exampleFormControlTextarea1").attr('required',true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="6 op">
<div class="form-group">Service</label>
<select class="form-control" id="exampleFormControlSelect1" required>
<option></option>
<option>Fiber</option>
<option>Hotspot</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Capacity</label>
<input type="text" class="form-control" id="capacity" placeholder="example: 1">
<select class="form-control" id="exampleFormControlSelect1">
<option>Mbps</option>
<option>Gbps</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Notes</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<input type="submit">
</div>
</form>
In the above example, the Notes field will become required, if you select Fiber in Service Dropdown.
The show or hide not working. the div keeps on showing, even if i select an option which should hide it.
However if i console log, it gives me respective show/hide output.
The following are sample code:
$('#categoryt').change(function() {
selection = $(this).val();
console.log(selection);
if (selection == "2") {
console.log("show");
$('#Subjectd').show();
} else {
console.log("hide");
$('#Subjectd').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="insert.php">
<div class="form-group" id="formdiv">
<label for="Category">Category</label>
<select class="custom-select" id="categoryt">
<option selected>Choose Role</option>
<option value="1">Student</option>
<option value="2">Teacher</option>
<option value="3">Animation Designer</option>
<option value="4">Content Verifier</option>
<option value="5">Admin</option>
</select>
</div>
<div class="form-group" id="formdiv">
<label for="Name">Name</label>
<input type="text" id="Name" name="Name" placeholder="Name" class="form-control" />
</div>
<div class="form-group" id="formdiv" id="Schoold">
<label for="School">School</label>
<input type="text" id="School" name="School" placeholder="School" class="form-control" />
</div>
<div class="form-group" id="formdiv" id="Subjectd">
<label for="Subject">Subject</label>
<input type="text" id="Subject" name="Subject" placeholder="Subject" class="form-control" />
</div>
<div class="form-group" id="formdiv" id="Classd">
<label for="Class">Class</label>
<input type="text" id="Class" name="Class" placeholder="Class" class="form-control" />
</div>
You have two id's in your element
<div class="form-group" id = "formdiv" id = "Subjectd">
change to
<div class="form-group" id = "Subjectd">
Please remember that your element can only have one ID and that your ID must be unique in the entire page. Meaning you should never have two elements that share the same ID. Class, on the other hand, can be shared by multiple elements and you can have multiple classes on a single element.
i.e
<div class="form-group class_two class_three">
Im using bootstrap 4, html, css, js the lot when trying to do this.
I'm trying to show some text boxes depending on the choice of the select option.
So if I choose "adadelta" I'd like to have only 4 specific text boxes(number type) show and everything else remain hidden. Should mention that the below form in hosted in a popover window which works fine, as such I've only included the form itself.
I've tried various javascript examples for similar situations but its just not showing the text boxes even when I try document.getElementById etc.
Any suggestions would be much appreciated.
<form>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose">
<option selected>Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control" placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<label for="lr">Learning Rate:</label>
<input type="number" class="form-control" id="lr">
<label for="rho">Rho:</label>
<input type="number" class="form-control" id="rho">
<label for="epsilon">Epsilon:</label>
<input type="number" class="form-control" id="epsilon">
<label for="decay">Decay:</label>
<input type="number" class="form-control" id="decay">
<label for="b1">Beta #1:</label>
<input type="number" class="form-control" id="b1">
<label for="b2">Beta #2:</label>
<input type="number" class="form-control" id="b2">
<label for="sDecay">Schedule Decay:</label>
<input type="number" class="form-control" id="sDecay">
<label for="moment">Momentum:</label>
<input type="number" class="form-control" id="moment">
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit </button>
</form>
Try this
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var el = '<label for="lr">Learning Rate:</label>\
<input type="number" class="form-control" id="lr">\
\
<label for="rho">Rho:</label>\
<input type="number" class="form-control" id="rho">\
\
<label for="epsilon">Epsilon:</label>\
<input type="number" class="form-control" id="epsilon">\
\
<label for="decay">Decay:</label>\
<input type="number" class="form-control" id="decay">\
\
<label for="b1">Beta #1:</label>\
<input type="number" class="form-control" id="b1">\
\
<label for="b2">Beta #2:</label>\
<input type="number" class="form-control" id="b2">\
\
<label for="sDecay">Schedule Decay:</label>\
<input type="number" class="form-control" id="sDecay">\
\
<label for="moment">Momentum:</label>\
<input type="number" class="form-control" id="moment">';
function select() {
var optSel = $("#optChoose").val();
appendControls(optSel);
}
function appendControls(num) {
$('#elcontainer').empty();
if (num == "adadelta") {
$('#elcontainer').append(el);
}
}
</script>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type password:</p>
<div class="form-group">
<label for="epochEdit">Epochs:</label>
<input type="number" class="form-control" id="epochEdit">
<label for="batchEdit">Batch Size:</label>
<input type="number" class="form-control" id="batchEdit">
</div>
<div class="form-group">
<label for="optChoose">Optimizer:</label>
<select class="form-control" id="optChoose" onchange="select();">
<option value="">Open this menu</option>
<option value="sgd">sgd</option>
<option value="adadelta">adadelta</option>
<option value="rmsprop">rmsprop</option>
<option value="adam">adam</option>
<option value="adamax">adamax</option>
<option value="adagrad">adagrad</option>
<option value="nadam">nadam</option>
</select>
</div>
<div class="form-group">
<fieldset disabled>
<div class="form-group">
<label for="disabledNote">Note:</label>
<input type="text" id="disabledNote" class="form-control"
placeholder="Optimizers will use keras default values!">
</div>
</fieldset>
<div id="elcontainer"></div>
<label for="nesterov">Nesterov:</label>
<input type="checkbox" class="form-check-input" id="nesterov">
</div>
<button id="subSettings" class="bg-color-3 btn btn-info"> Submit</button>
</div>
</body>
I have a select dropdown of addresses on change of select dropdown I need to get option attributes and paste them in input fields.
Here is what I tried so far TryFiddle
I have data attributes as data-address, data-city, data-zipcode and data-country for each option, when I select any option I want that options data-attr to be pasted in respective input boxes;
here is my code
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
alert('change');
$("#bill_address").val($(this).attr('data-address'));
$("#bill_city").val($(this).attr('data-city'));
$("#bill_zipcode").val($(this).attr('data-zipcode'));
$("#bill_country").val($(this).attr('data-country'));
})
})
Html code
<div id="collapseOne" class="panel-collapse collapse in">
<form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
<div class="form-group">
<select name="" class="form-control" id="saved_billing_addresses">
<option value="">Select Address</option>
<option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
<option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
<option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
</select>
</div>
<div class="form-group">
<textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
</div>
<div class="form-group">
<input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
</div>
<div class="form-group">
<input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
</div>
<div class="form-group">
<input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
</div>
<div class="form-group" style="width:150px;float:left;">
<button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
</div>
</form>
</div>
</div>
I dont know whats going wrong it should work, please provide any suggestions
This is one of the rare places where jQuery doesn't do much for you, your best bet is to use the select box's native selectedIndex property and options collection:
// Get the selected HTMLOptionElement
var opt = this.options[this.selectedIndex];
E.g.: (updated fiddle)
$(document).ready(function() {
$('#saved_billing_addresses').on("change", function() {
var opt = this.options[this.selectedIndex];
if (opt) {
opt = $(opt);
$("#bill_address").val(opt.attr('data-address'));
$("#bill_city").val(opt.attr('data-city'));
$("#bill_zipcode").val(opt.attr('data-zipcode'));
$("#bill_country").val(opt.attr('data-country'));
}
})
});
Try it..
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
$("#bill_address").val($('option:selected', this).data('address'));
$("#bill_city").val($('option:selected', this).data('city'));
$("#bill_zipcode").val($('option:selected', this).data('zipcode'));
$("#bill_country").val($('option:selected', this).data('country'));
})
});
.hide-it{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<div id="collapseOne" class="panel-collapse collapse in">
<form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
<div class="form-group">
<select name="" class="form-control" id="saved_billing_addresses">
<option value="">Select Address</option>
<option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
<option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
<option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
</select>
</div>
<div class="form-group">
<textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
</div>
<div class="form-group">
<input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
</div>
<div class="form-group">
<input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
</div>
<div class="form-group">
<input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
</div>
<div class="form-group" style="width:150px;float:left;">
<button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
</div>
</form>
</div>
</div>
You have some typos:
$(this) within change event is not $(this).find(':selected')
.data('address') could be used for attr('data-address')
event handler within the same event handler is useless
whenever possible you can cache selected elements
My proposal is:
$(function () {
$('#saved_billing_addresses').on("change", function(e){
var jqSelectedOption = $(this).find(':selected');
$("#bill_address").val(jqSelectedOption.data('address'));
$("#bill_city").val(jqSelectedOption.data('city'));
$("#bill_zipcode").val(jqSelectedOption.data('zipcode'));
$("#bill_country").val(jqSelectedOption.data('country'));
});
});
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<div id="collapseOne" class="panel-collapse collapse in">
<form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
<div class="form-group">
<select name="" class="form-control" id="saved_billing_addresses">
<option value="">Select Address</option>
<option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
<option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
<option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
</select>
</div>
<div class="form-group">
<textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
</div>
<div class="form-group">
<input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
</div>
<div class="form-group">
<input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
</div>
<div class="form-group">
<input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
</div>
<div class="form-group" style="width:150px;float:left;">
<button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
</div>
</form>
</div>
This is what you need.
$('#saved_billing_addresses').on("change",function(event){
const $this = this.options[this.selectedIndex];
$("#bill_address").val($this.getAttribute('data-address'));
$("#bill_city").val($this.getAttribute('data-city'));
$("#bill_zipcode").val($this.getAttribute('data-zipcode'));
$("#bill_country").val($this.getAttribute('data-country'));
});
You can also use the find to get the data attributes
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
$("#bill_address").val($(this).find(':selected').data('address'));
$("#bill_city").val($(this).find(':selected').data('city'));
$("#bill_zipcode").val($(this).find(':selected').data('zipcode'));
$("#bill_country").val($(this).find(':selected').data('country'));
})
});
Why you added two on Change events functions,Please remove second one. Try this..
$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
$("#bill_address").val($(this).find('option:selected').attr('data-address'));
$("#bill_city").val($(this).find('option:selected').attr('data-city'));
$("#bill_zipcode").val($(this).find('option:selected').attr('data-zipcode'));
$("#bill_country").val($(this).find('option:selected').attr('data-country'));
})
});
I am trying to get this sketch to work. I need to program the red things in this sketch
I use angularJS and bootstrap. This is the code right now:
<div class="col-md-6">
<div class="form-group">
<label>text:</label>
<select name="" id="" ng-model="" ng-options="">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>text:</label>
<select name="" id="" ng-model="" ng-options="">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>text:</label>
<select name="" id="" ng-model="" ng-options="">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
</div>
I need to program a second column with textfields right next with a combobox above.
1 = combobox in angularjs
Kind regards and much thanks!
You're using col-md so I'm guessing you have bootstrap. You can nest another row in the column you already have so:
<div class="row">
<div class="col-md-6">
<!-- some inputs -->
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>