I have two radio buttons , two textboxes and a button.
When i click on 1st button then only one text box should appear , when i click on second button , two textboxes should appear.
but i want to do it with visibility:hidden|visible property as I want button position to be fixed below two text boxes.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" ng-show="option ==='two'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 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 ==='two' || option === 'one'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
Thank you.
Try ng-style directive:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<script>
var app = angular.module("TestApp", []);
app.controller("myCtrl", function () {
});
</script>
<div ng-app="TestApp" ng-controller="myCtrl">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 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-style="{visibility: option == 'two' ? 'visible' : 'hidden'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
</body>
</html>
Please try by using a function rather than using the inline definition. Also I will prefer to use ng-if rather than ng-show because ng-if will block rendering the HTML template if the condition is wrong. Please try the below code snippet.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<script>
var app = angular.module("TestApp", []);
app.controller("myCtrl", function ($scope) {
$scope.setVisibility = function(val){
var resultVal = (val == 'one')? 'one' : 'other';
$scope.option = resultVal;
}
});
</script>
<div ng-app="TestApp" ng-controller="myCtrl">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="setVisibility('one')" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="setVisibility('two')">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" ng-if="option ==='other'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 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-if="option ==='other' || option === 'one'">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
</body>
</html>
I don't see you have initialized your angular app.
Try this one:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
angular.module("MyApp", []); //angular app
</script>
<div ng-app="MyApp">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 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-class="{'invisible':option =='one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
</div>
You can try this with ng-class
CSS
<style>
.visibleOff{visibility: hidden;}
</style>
HTML
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="basic_info_radio_toggle">
<label class="one">
<input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'">
<span>One</span></label>
<label class="two">
<input type="radio" name="registration_options" ng-click="option='two'">
<span>Two</span></label>
</div>
</div>
</div>
<div class="form-group" >
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 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-class="{'visibleOff': option == 'one'}">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<span>Link</span>
<input class="form-control" placeholder="http://" type="text">
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0">
<button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button>
</div>
</div>
Related
I've made a each loop that loops through all divs calles opening_class then searches all inputs and saves the value in global openings array.
But.. the openings variable stays empty..
Javascript
var openings = [];
$('.opening_class').each(function () {
var id = $(this).attr('id');
var inputs = [];
$('.opening_class input').each(function (i) {
inputs.push($(this).val());
});
openings[id] = inputs;
});
alert(JSON.stringify(openings));
The inputs has input, but it is not setting it into the global openings array..
If anyone could help that would be awesome
Html
<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
<div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
</div>
</div>
</div>
</div>
You have a couple of issues in the code.
needs to be an object, not an array
var openings = {};
With the following code you are selecting all of the opening class elements and grabbing all the inputs. You are NOT grabbing the inputs inside of the class you read the id for
$('.opening_class input').each(function (i) { // here you are
You should be using this and find
$(this).find('input').each(function (i) { // here you are
You can also improve your code to use jQuery's map()
var openings = {};
$('.opening_class').each(function() {
var elem = $(this)
var id = elem.attr('id');
var inputs = elem.find('input').map(function(i) {
return this.value
}).get();
openings[id] = inputs;
});
console.log(JSON.stringify(openings));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row justify-content-between justify-content-center align-content-center opening_class" id="openingstijden">
<div class="col-3 p-2 text-center font-weight-bold">Maandag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_ma_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Dinsdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_di_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Woensdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_wo_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Donderdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_do_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Vrijdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_vr_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zaterdag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_za_2" placeholder="Tot" required="">
</div>
</div>
<div class="col-3 p-2 text-center font-weight-bold">Zondag:</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_1" placeholder="Van" required="">
</div>
</div>
<div class="form-group col-4 p-0 m-0">
<div class="input-group">
<input type="text" class="form-control" id="openingstijden_zo_2" placeholder="Tot" required="">
</div>
</div>
</div>
</div>
JS Array cannot contain keys like arrays in php.
You need use
var openings = {};
Insteadof
var openings = [];
Quite new to angular JS and need some help. How do I use ng-if to display or hide different input fields? I'm currently using ng-show but it doesn't completely remove the DOM, therefore making it difficult during validation. I want the input fields displaying within a specific div to become mandatory ONLY when selected.
When I click Select Fund, I want the showme2 div to display and the fields to become mandatory. When I click Select Product, I want the showme1 div to display and the fields to become mandatory. See my current code below:
<div ng-show="showme1">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme2=true; showme1=false"><a>(or Select Fund)</a><br /></div>
</div>
</div>
<div ng-show="showme2">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2</label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme1=true; showme2=false" align="center"><a>(or Select Product)</a></div>
</div>
</div>
Reference this stackoverflow answer to understand how ng-if is used.
You can use ng-if to achieve if(){..} else{..} in Angular.js.
<div ng-if="data.id == 5">
<!-- If block -->
</div>
<div ng-if="data.id != 5">
<!-- Your Else Block -->
</div>
Additionally, I've modified your code snippet in a CodePen to use ng-if, see here. https://codepen.io/silicaRich/pen/PjwwPv
JS
var TestApp = angular.module("TestApp", []);
HTML
<html>
<head>
</head>
<body ng-app='TestApp'>
<!-- Will display if showme == true -->
<div ng-show="showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName1" required="required" placeholder="Product 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Product details // showme1</h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="productName" class="form-control" id="productName2" required="required" placeholder="Product 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" align="center" ng-click="showme=false;"><a>(or Select Fund) // showme2</a><br /></div>
</div>
</div>
<!-- Will display if showme == false -->
<div ng-show="!showme">
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product1"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName1" required="required" placeholder="Fund 1">
</div>
</div>
<div class="form-group">
<h3 class="col-xs-12 col-sm-3">Add Fund details // showme2 </h3>
<label class="col-xs-12 col-sm-3 control-label" for="Product2"></label>
<div class="col-xs-12 col-sm-6">
<input type="text" name="fundName" class="form-control" id="fundName2" required="required" placeholder="Fund 2">
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-3 control-label"></label>
<div class="col-xs-12 col-sm-6" ng-click="showme=true;" align="center"><a>(or Select Product) // showme1</a></div>
</div>
</div>
</body>
</html>
Hope this helps.
I want to take input values from HTML input and then I want to show the value by clicking result button.
Here is my code:
HTML:
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<button class="mortgage-button" id="mortgage-calculate" onClick="result()">CALCULATE</button>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript:
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("#purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
Actually what I want:
I want to take inputs from HTML input, then I want to calculate those results and finally clicking the result/calculate button I want to reveal the calculation.
Here is the jsfiddle
Corrected your code
HTML
<form class="form-inline">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Purchase Price</label>
</div>
<div class="col-md-7 col-sm-7">
<div class="select-wrapper">
<input type="text" id="purchase-price">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">Down Payment</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="down-payment">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="moartgage-term">Mortgage Term</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="mortgage-term">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="interest-rate">Interest Rate</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="interest-rate">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="purchase-price">Property Tax</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="property-tax">
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-sm-5">
<label for="down-payment">P.Insurance</label>
</div>
<div class="col-md-7 col-sm-7">
<input type="text" id="p-insurance">
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="col-md-5 col-sm-5">
<input class="mortgage-button" type="button" value="CALCULATE" id="mortgage-calculate" onClick="result()"/>
</div>
</div>
</div>
<!-- end of row -->
</form>
JavaScript
var paid_in_percent;
function setValue(){
paid_in_percent = document.getElementById("purchase-price").value;
}
function result(){
setValue();
alert(paid_in_percent);
}
JSFIDDLE Here
Changes : 1] Removed # from getElementById function. 2] Changed
button element to input tag with type button. This prevents form
submission when clicked on it.
Learning Angular by redoing an app I've built. I am trying to post some data from a collection of text boxes to my production api. When I click the submit button, I get no response. No flicker, no error message, nothing. I'm curious if I don't have my Angular wired up properly. If anyone could help me figure this one out, I'd greatly appreciate it.
MainController.js
(function () {
var app = angular.module("app", [])
app.controller('MainController', function($scope, $http) {
var onUpdatesComplete = function (response) {
$scope.updates = response.data;
};
$http.get("productionApiAddress")
.then(onUpdatesComplete);
$scope.demoInquiry = function(){
var data = $.param({
json: JSON.stringify({
firstName : $scope.firstName,
lastName : $scope.lastName,
companyName : $scope.companyName,
email : $scope.email,
phone : $scope.phone
})
});
$http.post("http://productionApiAddress", data).success(function() {
$.('#demoSuccessResult').removeClass('hidden');
})
};
});
}());
index.html
<html ng-app="app">
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/MainController.js"></script>
...
<body ng-controller="MainController">
...
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>First Name*</label>
<input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Last Name*</label>
<input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Company Name*</label>
<input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Your Work Email*</label>
<input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<label>Office Phone Number*</label>
<input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control"
style="background-color: #053A54; color: #ffffff;"
value="Submit For Trial"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12">
<p>* - required</p>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 hidden">
<span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
</div>
</div>
Please see below. You don't have to use jquery to show/hide dive elements ng-show hide will do this same work for you.
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope, $http) {
$scope.demoInquiry = function() {
var data = {
firstName: $scope.firstName,
lastName: $scope.lastName,
companyName: $scope.companyName,
email: $scope.email,
phone: $scope.phone
};
console.log(data);
$http.post("http://productionApiAddress", data).success(function() {
$scope.postSucess = true
}).error(function() {
$scope.postError = true;
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>First Name*</label>
<input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Last Name*</label>
<input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Company Name*</label>
<input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Your Work Email*</label>
<input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<label>Office Phone Number*</label>
<input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control" style="background-color: #053A54; color: #ffffff;" value="Submit For Trial" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12">
<p>* - required</p>
</div>
</div>
<div class="row" ng-show="postSucess">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
<span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
</div>
</div>
<div class="row" ng-show="postError">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
<span id="demoErrorResult" style="color: red;">Wooowa can't post </span>
</div>
</div>
</div>
</body>
I want to change the value of inputs of a modal when you click submit to a panel. So, if a user write the input, the value that he write replace the content of the panel below. JSFiddle:
Main structure of the modal:
<div id="dialog" title="Task detail">
<div class="modal-body">
<div class="row-fluid" style="padding-bottom: 0px;">
<form id="taskForm" class="form-horizontal" role="form">
<input type="hidden" name="id" value="2">
<div class="form-group">
<label for="inputName" class="col-xs-3 col-sm-3 col-md-1 control-label">Name</label>
<div class="col-xs-5 col-sm-5 col-md-10">
<input id="inputName" name="name" type="text" class="form-control" placeholder="Name" value="">
</div>
</div>
<div class="form-group">
<label for="inputURI" class="col-xs-3 col-sm-3 col-md-1 control-label">URI</label>
<div class="col-xs-2 col-sm-8 col-md-10">
<input id="inputURI" name="uri" type="text" class="form-control" placeholder="URI" value="">
</div>
</div>
<div class="form-group">
<label for="inputPlanning" class="col-xs-3 col-sm-3 col-md-1 control-label">Planning</label>
<div class="col-xs-5 col-sm-5 col-md-10">
<input id="inputPlanning" name="planning" type="text" class="form-control" placeholder="Planning" value="">
</div>
</div>
<div class="form-group">
<label for="inputOrder" class="col-xs-3 col-sm-3 col-md-1 control-label">Order</label>
<div class="col-xs-2 col-sm-2 col-md-10">
<input id="inputOrder" name="numOrder" type="text" class="form-control" placeholder="Order">
</div>
</div>
<div class="form-group">
<label id="chkActive" for="chkActive" class="col-xs-3 col-sm-3 col-md-1 control-label">Active</label>
<div class="col-xs-5 col-sm-5 col-md-10">
<div class="miniswitchmodal" style="float: left;">
<input type="checkbox">
<label><i class="glyphicon glyphicon-off"></i></label>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnSave" type="button" class="btn btn-success modalbtn">Save changes</button>
<button id="btnClose" type="button" class="btn btn-default modalbtn" data-dismiss="modal">Close</button>
</div> </form></div></div></div>
Main structure of the panel:
<div class="col-xs-6 col-sm-4 col-md-3">
<div id="7" class="panel panel-off2">
<div class="panel-heading">
<div class="row">
<div class="ptitle">Task 7</div>
<div class="optiongroup"> <span class="glyphicon glyphicon-edit yellow"></span>
<div class="miniswitch">
<input type="checkbox" data-id="7">
<label><i class="glyphicon glyphicon-off"></i></label>
</div>
</div></div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12"><strong>Planning:</strong><span> 0/10 * * * * ?</span></div>
</div>
<div class="row">
<div class="col-xs-12">
<strong>URI:</strong><span> /cron/test</span>
</div>
</div>
</div>
</div>
</div>