Group of elements coming up inline - Bootstrap 4 - javascript

The requirement is the label should be on top of the input element whereas the group of each label and input element should be inline with one another.
I am able to achieve the same with the below piece of code when label text is a bit long. When the text of the label is short, the input element is appearing inline with the label.
Probably what I am doing is wrong. Please let me know a better way to handle it through bootstrap.
Thanks in advance.
Code -
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>

Try usingd-flex and flex-column classes. Tried on some Bootstrap 4 playgrounds, worked as you need it to work.
You can read more about it here.
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A1</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A2</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
<div class="form-group col-md-4">
<div class="d-flex flex-column">
<label for="name" class="control-label">A3</label>
<input type="text" class="form-control" id="lineHeight">
</div>
</div>
</div>
</form>

In bootstrap 4 you can use d-inline-block class
<form class="form" id="taxCalcDetail">
<div class="form-inline">
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A1</label>
<input type="text" name="t1" class="form-control" id="t1">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A2</label>
<input type="text" name="t2" class="form-control" id="t2">
</div>
<div class="form-group col-lg-3 pb-3">
<label class="small pb-1 d-inline-block">A3</label>
<input type="text" name="t3" class="form-control" id="t3">
</div>
</div>

Related

change the style of only first element in an array of class elements using javascript

i have this html code that has a list. in my css listName is set to display='none'
when the dom page opens up i need the FIRST element of the class="listName" to show.. obviously this class in js is an array.. can you please show me
i need to make the page more user friendly. i need one li showing and if the user decides to book more shipments he can click on Add more shipments to show another li
the css file has this
.listHolder {
display: none;
}
here is the image of what it looks like now
<div class="container">
<div class="listHolder" th:each="freight, itemStat : *{freightsDto}">
<ul class="list">
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
</ul>
</div>
<div id="toggleBtn" class="row mtp">
<button id="addBtn" class="col-sm-12">
Add more shipments
</button>
</div>
</div>
You can get the list of elements with class "listName", and change the first element of that list.
Javascript
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
.listName {
display: none;
}
<html>
<body>
<div class="listHolder">
<ul class="list">
<li>
<span class="listName">Macbook</span>
</li>
<li>
<span class="listName">Amazon Firestick</span>
</li>
<li>
<span class="listName">Keyboard</span>
</li>
<li>
<span class="listName">Headphones</span>
</li>
<li>
<span class="listName">Airpods</span>
</li>
</ul>
</div>
</body>
</html>
I think you can do with JavaScript
<script type="text/javascript">
// create the function with JavaScript
function removerClass() {
// get all elements with listName class
let element = document.getElementsByClassName("listName");
// get the first element
element = element[0];
// remove the element's class
element.classList.remove("listName");
}
// call the function when the page is loaded
removerClass()
</script>
I hope it's usefull

Pass values of multiple inputs to other inputs

I have this code for passing values from multiple inputs to other inputs and it's working well. The problem is that I'm saving the value of one input inside an object, but if I do this process, I'll have to add 8 values inside the object and inside conditions statements.
I found this answer
How can I add it to my code and make it works?
How I can get the values of the 8 inputs and pass it to other 8 inputs.
This is my JS code:
var data = {
first_name: $('#first_name'),
}
if ($('#checkbox').is(':checked')) {
$('#check_name').val(data.first_name.val());
}
$('#checkbox').change(function() {
if ($('#checkbox').is(':checked')) {
$('#check_firstname').val(data.first_name.val());
} else {
$('#check_name').val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is my view
//These are which I'm getting the values
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked" id="first_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
</form>
<!--These are the inputs which I'm passing the values-->
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check" id="check_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
</form>
try this:
$(".mt-4.mb-4.ml-4:eq(0) .row").each(function(i,r){
$(".mt-4.mb-4.ml-4:eq(1) .row:eq("+$(r).index()+") input").val(function(I){return $(r).find(".col:eq("+$(this).parent().index()+")>input").val();});
});
this works with this html structure.
How about if you do this:
$('.checked').keyup(function () {
if (this.id === 'first_name' && ...some other condition...) {
$('#check_name').val(this.value);
}
});
Changed keydown to keyup because on keydown if you type fast it might happen to skip some data
Basically Yoannes's approach is a good idea. I kept the keyup()-bit! However, it gets a bit tedious with all of the name and attribute comparing business.
Basically, jQuery offers a builtin method index(). This method returns the relative position of a matched element within its parent container. This would have worked if all of your input elements were in a common parent <div>. As this is not the case we will have to dig a little deeper:
My approach creates two jquery selections of input elements. One for each of your <form>s: src and trg. I then attach the keyup-event to all input elements of the first form. The attached function gets the current value of the input and finds the relative position of the element in the array of matched DOM-elements of src. The function then sets the value of the idx-th element of the jquery-trg-collection to txt. And that is all: jquery - write less, do more!
And, yes, it can also be done with the .on('input' ...) binding, like this:
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
var srca=$('form.mt-4.mb-4.ml-4:eq(0) input').on('input',function(){
trg.eq($.inArray(this,srca)).val($(this).val());
}).get()
var src=$('form.mt-4.mb-4.ml-4:eq(0) input'), srca=src.get();
var trg=$('form.mt-4.mb-4.ml-4:eq(1) input');
src.keyup(function(){
var idx=$.inArray(this,srca);
var txt=$(this).val();
trg.eq(idx).val(txt);
})
form {font-family:verdana;font-size:8pt}
div.col {display:inline-block}
h6 {font-size:6pt;margin:0px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>1First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked" id="first_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control checked">
</div>
</div>
</form>
<!--These are the inputs which I'm passing the values-->
<form class="mt-4 mb-4 ml-4 ">
<div class="row">
<div class="col">
<label for=""><h6>2First name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check" id="check_name">
</div>
<div class="col">
<label for=""><h6>Last name <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Street Address <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Street Address 2</h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>Country <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>City <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for=""><h6>State/Province <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
<div class="col">
<label for=""><h6>Phone <span class="text-danger">*</span></h6></label>
<input type="text" class="form-control check">
</div>
</div>
</form>

HTML Bootstrap Well issue when using html template

I am trying to import a HTML template into my index.html. The template will be placed into the wrapper div however, the wrapper div will no longer be inside of the "well" which was created in the parent div.
I need to have the template imported and be inside of the "well" instead of outside.
Thanks for the help.
index.html:
<div class="row">
<div id="parent" class=" well col-m-12">
<h4>Experiment parameters</h4>
<p>Full of input boxes which update both views above</p>
<div id="wrapper" class="col-md-2">
</div>
</div>
Template:
<template class="section-template">
<!--need to change this name-->
<section id="input" class="wrapper style1 fullscreen intro">
<div>
<form class="form-horizontal">
<div class="form-group">
<label for="inputKi" class="col-sm-3 control-label">|Ki|</label>
<div class="col-sm-6">
<input type="text" class="input-sm form-control" id="inputKi">
</div>
<label for="inputKi" class="col-sm-1 control-label">A</label>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputKf" class="col-sm-3 control-label">|Kf|</label>
<div class="col-sm-6">
<input type="text" class="input-sm form-control" id="inputKf">
</div>
<label for="inputKf" class="col-sm-1 control-label">A</label>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputE" class="col-sm-3 control-label">E</label>
<div class="col-sm-6">
<input type="text" class="input-sm form-control" id="inputE">
</div>
<label for="inputE" class="col-sm-1 control-label">meV</label>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputQ" class="col-sm-3 control-label">|Q|</label>
<div class="col-sm-6">
<input type="text" class=" input-sm form-control" id="inputQ">
</div>
<label for="inputE" class="col-sm-1 control-label">A</label>
</div>
</form>
</div>
</section>
</template>
This is what it looks like:

Not trigger form validation on button click

I have a form which consists of two buttons. None of them have the "submit" declaration in type.
My issue is that the form validation is triggered during both button button clicks where as I want the validation only to happen on one particular button click.
Can this be achieved?
Below is my code.
<form class="form-horizontal" ng-controller="checkoutCtrl" name="ordersubmitform">
<div class="panel panel-default" ng-init="init()">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">PERSONAL INFO</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.name" name="username" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">E-Mail</label>
<div class="col-lg-9">
<input type="email" ng-model="customer.email" name="email" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile Number</label>
<div class="col-lg-9">
<input ng-model="customer.contact" type="text" name="mobile" class="form-control" pattern=".{9,}" required title="9 characters minimum" />
</div>
</div>
<legend class="text-semibold">ADDRESS</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Organisation Name</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.organisation" name="org" class="form-control" pattern=".{0}|.{5,}" title="Either 0 OR (5 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Floor</label>
<div class="col-lg-9">
<input ng-model="customer.floor" type="text" name="floor" class="form-control" pattern=".{0}|.{1,}" title="Either 0 OR (1 chars minimum)" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 1</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetNumber" name="line1" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Line 2</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.streetAddress" name="line2" class="form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Postcode</label>
<div class="col-lg-9">
<input type="text" ng-model="customer.postal" name="postal" class="form-control" value="<?php echo $this->session->userdata('postalcode');?>" required/>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend class="text-semibold">ITEMS</legend>
<div class="container" ng-repeat="item in items">
<div class="row">
<div class="col-md-1 col-xs-3 col-sm-2">
<a href="#" class="thumbnail">
<img ng-src="{{ item.thumbnail }}">
</a>
</div>
<div style="font-size:15px;" class="col-md-6"><span style="color:coral;">{{ item.qty }} x </span>{{ item.title }}</div>
<div style="font-size:13px;" class="col-md-6">{{ item.description }}</div>
<div class="col-md-6" style="padding-top:5px; font-size: 15px;">$ {{ item.line_total }}</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="text-semibold">CHECK OUT</legend>
</fieldset>
<div class="form-group">
<label class="col-lg-3 control-label">Vouchercode</label>
<div class="col-lg-6">
<input type="text" ng-model="voucher" name="voucher" class="form-control" />
</div>
<div class="col-lg-3">
<button id="voucherbtn" ng-click="verifyVoucher()" class="btn btn-primary">Apply</button>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Special Notes</label>
<div class="col-lg-9">
<textarea rows="5" cols="5" class="form-control" name="instructions" placeholder="Enter any special instructions here"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Total</label>
<div class="col-lg-9">NZ {{total | currency}}</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button style="width: 100%; font-weight: bold; font-size: 15px;" ng-click="finalizeOrder()" class="btn btn-primary">Place Order</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Add type to the button:
<button>I submit by default</button>
<button type="button">I don't submit</button>
<button type="submit">I do</button>

Angular JS : show div based on radio button selection

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="show_other=true">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="display=false">
<span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
clicking on company radio button only link will be opened and clicking on other radio button button text box and link , both should be opened. and clicking on none. both of them should hide.
Any help would be great.
Thank You.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo">
<input type="radio" name="registration_options" checked="checked" ng-click="option='company'" ng-init="option='company'">
<span>Company ABC</span></label>
<label class="other" >
<input type="radio" name="registration_options" ng-click="option='other'">
<span>Other</span></label>
<label class="none" >
<input type="radio" name="registration_options" ng-click="option='none'">
<span>None</span></label>
</div>
<div class="form-group" ng-show="option ==='other'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-show="option ==='other' || option === 'company'">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>
Following changes are done.
1) Clicked item is saved in 'option' variable.
2) Show the form field based on data in 'option' variable.
It is seems confusing because you want to start with the URL box shown so you need to use a mix of ng-show and ng-hide then override them on click.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="">
<div class="radio_toggle">
<label class="hubilo"><input type="radio" name="registration_options" checked="checked" ng-click="show_url=false;show_other=false"><span>Company ABC</span></label>
<label class="other"><input type="radio" name="registration_options" ng-click="show_other=true;show_url=false"><span>Other</span></label>
<label class="none"><input type="radio" name="registration_options" ng-click="show_other=false;show_url=true"><span>None</span></label>
</div>
<div class="form-group" ng-show="show_other">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<form role="form">
<div class="form-group set_margin_0 set_padding_0">
<label>Button</label>
<input class="form-control" placeholder="Enter Button Name" type="text">
</div>
</form>
</div>
</div>
<div class="form-group" ng-hide="show_url">
<label class="col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
</div>

Categories