We Keep Coding

Ajax and php mysql auto calculate for invoice submision and print

I am creating a quotation invoice using ajax, php and mysql
I am stuck on making inputs to make calculations and submission of the form and be able to print invoice or save to pdf format
Note
the other thing is when I add a new line, it refreshes the above items inputs and deletes the select item..
$(document).on('click', '.addNewLine', function() {
var html = '<div class="space-15"></div><div class="row sline">\n' +
' <div class="col-md-5"><div class="displayItemDropdown"></div></div>\n' +
' <div class="col-md-1"><input type="text" name="Quantity[]" id="Quantity" data-srno="1" class="form-control" placeholder="Qty" required /></div>\n' +
' <div class="col-md-2"><input type="text" name="price[]" id="Price" data-srno="1" class="form-control" placeholder="Price" required /></div>\n' +
' <div class="col-md-3"><input type="text" name="total[]" id="Total" data-srno="1" class="form-control" placeholder="Total" disabled /></div>\n' +
' <div class="col-md-1"><input type="button" name="removeLine" class="removeLine btn btn-danger btn-xs" value="X"></div>\n' +
' </div>';
$(".div_field").append(html);
$(".div_field").on('click', '.removeLine', function() {
$(this).closest('.sline').remove();
});
displayItem(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="post" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
Customer Name *
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div id="displayCustomerDropdown" class=""></div>
<i class="fa fa-plus"></i> Add customer
<div class="row">
<div id="ans">
</div>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"></div>
</div>
<div class="space-15"></div>
<div class="ibox-content">
<div class="space-15"></div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
Date *
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div class="form-group" id="data_1">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" name="adjustmentDate" value="2022-02-28" required>
</div>
</div>
<!-- /.form group -->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
Quotation #
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div id="orderNumber"></div>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
Reference #
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<input type="text" class="form-control" placeholder="Reference number" name="referenceNumber">
</div>
</div>
<div class="space-20"></div>
<div class="row">
<div class="row">
<div class="col-md-5"><label>Item Details</label></div>
<div class="col-md-1"><label>Qty</label></div>
<div class="col-md-2"><label>Price</label></div>
<div class="col-md-3"><label>Total</label></div>
<div class="col-md-1"></div>
</div>
<div class="div_field">
<div class="row sline">
<div class="col-md-5">
<div class="displayItemDropdown"></div>
</div>
<div class="col-md-1"><input type="text" name="Quantity[]" value="0" id="Quantity" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Qty" required /></div>
<div class="col-md-2"><input type="text" name="price[]" value="0" id="Price" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Price" required /></div>
<div class="col-md-3"><input type="text" name="total[]" value="0" id="Total" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Total" disabled /></div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="space-15"></div>
<button type="button" class="addNewLine btn btn-warning btn-xs"><i class="fa fa-plus"></i> Add new line</button>
<i class="fa fa-plus"></i> New Item
<hr />
<div class="space-20"></div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label>Customer Notes</label>
<textarea title="Customer Notes" placeholder="Enter any notes to be displayed on this transaction" name="comments" class="form-control"></textarea>
<div class="space-20"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-muted">
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Sub Total</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="subtotal" value="0" id="subtotal" onFocus="startCalc();" onBlur="stopCalc();" class="form-control text-right" disabled>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Discount (%)</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="discount" placeholder="Discount" class="form-control">
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>VAT</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<select name="tax" data-placeholder="Choose Item..." class="form-control select2 chosen-select" tabindex="2" autofocus required>
<?php
$vat=vat();
while ($tax=mysqli_fetch_array($vat)) {
?>
<option value="<?php echo $tax['tax_rate'];?>">
<?php echo $tax['taxName'];?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Total</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="total" class="form-control text-right" disabled>
</div>
</div>
<div class="space-15"></div>
</div>
</div>
<div class="space-20"></div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>Terms & Conditions</label>
<textarea title="Terms & Conditions" placeholder="Enter your business terms and condition to used this transaction" name="paymentTerms" class="form-control"></textarea>
</div>
</div>
<hr />
<button type="submit" name="AddItem" class="btn btn-primary">Complete Quotation</button>
<button type="reset" class="btn btn-white" data-dismiss="modal">Cancel</button>
</div>
</form>

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

Group of elements coming up inline - Bootstrap 4

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>

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>