I'm having trouble binding form data (which is complete) to my controller. Below is my code:
<form name="form_foto" novalidate>
<div class="form-group">
<label>URL de la foto: </label>
<!--
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
-->
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
</div>
<div class="form-group">
<label>Lugar: </label>
<input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
</div>
<div class="form-group">
<label>Año: </label>
<input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
</div>
<!--
<button class="btn btn-default">Guardar Foto</button>
-->
<button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
</form>
guardarFoto Function code:
$scope.guardarFoto = function(){
alert($scope.mifoto); //comes out undefined
$scope.misFotos.push($scope.mifoto);
delete $scope.mifoto;
}
Any help will be greatly appreciated. Thanks!
Just initialize $scope.mifoto = {}.
Check this live example:
angular.module('app', [])
.controller('ctrl', ['$scope',
function($scope) {
$scope.misFotos = [];
$scope.mifoto = {};
$scope.guardarFoto = function() {
alert($scope.mifoto); //comes out undefined
$scope.misFotos.push($scope.mifoto);
delete $scope.mifoto;
}
}
])
<!DOCTYPE html>
<html ng-app="app">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-controller="ctrl">
<form name="form_foto" novalidate>
<div class="form-group">
<label>URL de la foto:</label>
<!--
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
-->
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
</div>
<div class="form-group">
<label>Lugar:</label>
<input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
</div>
<div class="form-group">
<label>Año:</label>
<input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
</div>
<!--
<button class="btn btn-default">Guardar Foto</button>
-->
<button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
</form>
</body>
</html>
Initialize mifoto outside ur function.
$scope.mifoto = {};
Related
I'm still learning to programme.
How I can show and hide two not very different HTML forms with a button in Angular?
I have a code but it shows only two forms and doesn't hide them.
I want to display these two forms on one row. How I can do this?
Please help me.
My HTML code:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()" >Show Div</button>
<button class="btn btn-primary" ng-click="showDiv1=true; hideMe()" >Show Div1</button>
<div ng-show="showDiv">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запазване</button>
</form>
</div>
</div>
</div>
<div ng-show="showDiv1">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Отлагане</button>
</form>
</div>
</div>
</div>
</body>
</html>
Angular code. Maybe it is not very right i think, but you will help me.
Thanks again!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
});
You have to set variable to false(ng-show), and then when user click the button, set variable to true:
Leave ng-click attribute like this:
<button class="btn btn-primary" ng-click="hideDiv()" >Show Div</button>
<button class="btn btn-primary" ng-click="hideDiv1()" >Show Div1</button>
Then:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.showDiv = false;
$scope.showDiv1 = false;
$scope.hideDiv = function(){
if ($scope.showDiv) {
$scope.showDiv = false;
} else {
$scope.showDiv = true;
}
}
$scope.hideDiv1 = function(){
if ($scope.showDiv1) {
$scope.showDiv1 = false;
} else {
$scope.showDiv1 = true;
}
}
});
Here is a demo that may help you get started. Go over the docs for ng-show and ng-click
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
$scope.showHello = true;
$scope.showBye = false;
$scope.toggleBye = () => {
$scope.showBye = !$scope.showBye;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="HelloController">
<h2 ng-show="showHello">Hello</h2>
<h2 ng-show="showBye">Bye</h2>
<h2>Show always</h2>
<button ng-click="toggleBye()">toggle bye</button>
</div>
</body>
Suppose I have a form with some input values(name, mobile_number, age and gender).
After fill up the form while I clicked submit button, I want to print the form values.
I have already tried with jQuery but not get the exact result.
Here is my result
But I want to print the form data like this
Name : Raff
Mobile Number : 016*******
Age : **
Gender : Male
Here is my form
<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Name: </b>
<input type="text" id="name" class="form-control" placeholder="" name="name" required/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Mobile Number: </b>
<input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Age: </b>
<input type="text" id="age" class="form-control" placeholder="" name="age" required/>
</div>
</div>
</div>
<div class= "col-sm-6">
<b>Gender: </b>
<select id="gender" class="form-control show-tick" name="gender" required>
<option value="">-- Please select --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Others</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="form-group">
<button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
</div>
</div>
</form>
jQuery
function PrintElem()
{
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
How to solve this ? Anybody help please.
You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.
Update your PrintElem function with this and check
function PrintElem()
{
var name = document.getElementById('name').value;
var mobile_number = document.getElementById('mobile_number').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Hope this works for you
<html>
<head>
<title>jQuery example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#InputText').keyup(function() {
$('#OutputText').val($(this).val());
$('#DIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="JQDiv">
<form id="JQForm" action="">
<p>
<label for="InputText">
Enter Name :
</label><br />
<input id="InputText" type="text" name="inputBox" />
</p>
<p>
<label for="OutputText">
Output in box
</label><br/>
<input id="OutputText" type="text" name="outputBox" readonly="readonly" />
</p>
<p>
Output in div
</p>
<div id="DIVTag"></div>
</form>
</div>
</body>
</html>
Similarly you can do it for other form fields.
Also use angularjs to achieve same functionalities you can
This is what you are looking for?
Let me know.
I have a function reset(username) that outputs whatever is entered into the input field of ng-model="username". Why is it not appearing in console though?
This is my function
$scope.reset = function (username) {
console.log(username);
};
and the way I submit the form
<form name="Form" ng-controller="ResetController" ng-submit="reset(username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
Controller as requested
app.controller("ResetController", function ($scope) {
$scope.username='';
$scope.reset = function (username) {
console.log('username = ', username);
};
});
I believe you do have the ng-app and everything else besides this form, however it is better handled by the DOM if you manipulate your inputs as properties of an object and not directly as $scope. properties. See answers to this here. And note in the code how I attached username to $scope.object.username
var app = angular.module('myApp',[])
app.controller('ResetController',['$scope',function($scope){
$scope.object = {};
$scope.reset = function(username){
console.log(username);
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="Form" ng-controller="ResetController" ng-submit="reset(object.username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="object.username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
</div>
I am trying to dynamically add a form input in AngularJS every time the add button is clicked. However, with the code I have, it the input elements don't display at all. I simply see the "Post" button. If I remove the ng-repeat="ingredient in ingredients", the form displays (as expected). What am I doing wrong here?
Here is the specific code in index.ejs:
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
Here is the corresponding js code:
app.controller('MainCtrl', [
'$scope',
'posts',
'auth',
function($scope, posts, auth){
$scope.ingredients = [];
$scope.add = function() {
var newItemNo = $scope.ingredients.length+1;
$scope.ingredients.push({'id':'choice'+newItemNo});
};
}]);
That's because your button is in the ng-repeated element. ng-repeat repeats the HTML inside the element it is assigned to. Since you have no items in ingredients, nothing is rendered - including your button
Just move your button out of <div class="form-inline">.
Your add button is inside the ng-repeat, so it's never shown, so you can never populate the array, so it can't ever show. Does that make sense?
Try
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
I'm trying to create a three page wizard in angular JS, with the final part taking payment details.
However, looking through the Stripe docs I notice that there are no name attributes on any of the form elements related to Stripe.
At the moment I'm using buttons to link to the next step in the wizard, and only have a single form, which is submitted together. The three page wizard is based on this tutorial:
https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router
as you can see i'm using:
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-danger">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
to navigate to the next form page.
My question is - how can i submit both the objects bound to the model (formData), and the Stripe data from within the same form. Is this possible?
If so - how can i do this and still keep the wizard functionality?
Below is my controller:
angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', function($scope, Appointment) {
// we will store all of our form data in this object
$scope.formData = {};
$scope.formData.appintment_date = "";
$scope.opened = false;
/*$scope.momentDate = moment($scope.formData.date);*/
$scope.time1 = new Date();
$scope.showMeridian = true;
//Datepicker
$scope.dateOptions = {
'year-format': "'yy'",
'show-weeks' : false,
'show-time':true
};
// function to process the form
$scope.processForm = function() {
console.log($scope.formData);
var date = moment($scope.formData.date).format("dddd, MMMM Do YYYY, h:mm:ss a");
/*console.log(date);*/
var app = new Appointment($scope.formData);
//console.log(app);
app.$save();
};
}]);
home.html
<div class="page-header text-center">
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
<a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
form-interests.html
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" ng-model="formData.email" required>
</div>
<div class="form-group">
<label for="email">Address</label>
<input type="text" class="form-control" name="address" ng-model="formData.address_1" placeholder="e.g. Unit and Street"required>
<input type="text" class="form-control" name="address" ng-model="formData.city" placeholder="City e.g. Toronto">
<input type="text" class="form-control" name="address" ng-model="formData.postcode" placeholder="Postal Code" required>
</div>
<div class="form-group">
<label for="email">Phone Number</label>
<input type="text" class="form-control" name="address" ng-model="formData.phone" placeholder="(416) - 222 5555"required>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-danger">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
form-payment.html - note the lack of name attributes.
<!-- form-payment.html -->
<span class="payment-errors"></span>
<div class="form-group">
<label for="card_number">Card Number</label>
<input type="text" class="form-control" size="20" data-stripe="number"/>
</div>
<div class="form-row">
<label for="CVC"> CVC</label>
<input type="text" class="form-control" size="4" data-stripe="cvc"/>
</div>
<div class="form-row">
<label for="exp_month"> Expiration (Month)</label>
<input type="text" class="form-control" size="2" data-stripe="exp-month"/>
<label for="exp_month"> Expiration (Year)</label>
<input type="text" class="form-control" size="4" data-stripe="exp-year"/>
</div>
<div class="text-center">
<span class="glyphicon glyphicon-heart"></span>
<h3>Thanks For Your Money!</h3>
<button type="submit" id="submitButton" class="btn">Submit</button>
</div>