I have the following form:
<form method="post" role="form" name="newCategoryForm" ng-submit="submitForm()" enctype="multipart/form-data" novalidate>
<div class="row">
<div class="row">
<div class="col s12">
<div input-field>
<input type="text" name="cat-name" id="cat-name"
ng-model="category.catname" required>
<label>Nombre</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div input-field>
<textarea class="materialize-textarea" name="cat-description" id="cat-description" length="144"
ng-model="category.catdescription" ng-maxlength="144" required></textarea>
<label>Descripción</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h6>Imagen de Fondo</h6>
<div class="file-field input-field">
<div class="btn pink darken-2 waves-effect waves-light">
<span>Archivo</span>
<input type="file" name="cat-bgimg" id="cat-bgimg"
file-model="variable" ng-model="category.catimg">
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" readonly>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-large pink darken-2 waves-effect waves-light center-button" ng-disabled="newCategoryForm.$invalid">Crear Categoría</button>
</form>
And in my controller I have this:
angular.module('sccateringApp')
.controller('newCategoryController', function (httpcalls, $scope) {
var request = httpcalls;
$scope.submitForm = function(){
$scope.catinfo = $scope.category;
console.log($scope.catinfo);
console.log(this.category);
console.log(newCategoryForm.category);
}
});
As you can see, the controller logs undefined for all three ways I'm trying to print out the contents of the form:
I'm very new to Angular and I'm very inexperienced. I'm using the documentation as a reference: https://docs.angularjs.org/api/ng/directive/ngSubmit
Any idea what I might be doing wrong?
Related
I am dynamically generating modals with form that look like described at the bottom. I searched and found How to handle multiple forms in one page but I unfortunately can't find out how I can handle posting one of the form if exactly that one has been clicked/submitted. Any help will be greatly appreciated.
<td class="actions">
<a href="#modalForm-1" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
<td class="actions">
<a href="#modalForm-2" class="modal-with-form on-default cancel-row">
<i class="fas fa-edit"></i>
</a>
<div id="modalForm-1" class="modal-block modal-block-primary mfp-hide">
<form method="post" action="/insurances/update">
<section class="card">
<header class="card-header">
<h2 class="card-title">Modification - Interhyp</h2>
</header>
<div class="card-body">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" value="Interhyp" name="name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="msisdn">MSISDN</label>
<input type="text" class="form-control" id="msisdn" value="1234567" name="msisdn">
</div>
<div class="form-group col-md-6">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="inter-daolwin#gmail.com"
name="email_address">
</div>
</div>
</div>
<footer class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="hidden" name="search_uuid" value="287b5e62-a434-4e67-9ce0-f24466876114">
<button type="submit" class="btn btn-primary modal-confirm">Submit</button>
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</section>
</form>
</div>
</td>
The other modals bear the ids "modalForm-3", "modalForm-4" and so on and can randomly be clicked/submitted.
D.
I have this url page that reloads once the send key is submitted. I need to add an ajax call to call one line of text which is the following
Your feedback is greatly appreciated..
I have placed that line in a div with id="fd-bk"
<form method="POST" th:action="#{/__${page}__}" th:object="${client}" class="contact-form" onsubmit="return validateForm()">
<div class="row">
<div class="col span-1-of-1">
<div id="fd-bk" class="alert alert-info" th:if="${emailSent}">
Your feedback is greatly appreciated.
</div>
</div>
</div>
<div class="row"></div>
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your Name" th:field="*{name}"
required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email-cnt-rfl">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email-cnt-rfl" placeholder="Your Email"
th:field="*{email}" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" size="20"
required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop us a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your Message" th:field="*{message}"
required></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-1-of-3">
<input type="submit" value="Send It!"
onclick="scrollSmoothToBottom()">
</div>
</div>
</form>
include this makeCall() in the
<form>
<div class="col span-1-of-3">
<input type="submit" value="Send It!"
onclick="scrollSmoothToBottom()">
</div>
</form>
function makeCall() {
const form = document.querySelector('#form');
form.addEventListener('submit', e => {
const message = document.querySelector('.hidden.alert-info');
message.classList.remove('hidden');
});
}
I have a ejs(html) file, and There is a div class called "card".
What I want to do is that, if I click the button("Click me") then,
card-header(header1) has to be changed(before --> after) with colored back-ground.
However when I clicked the button, only the back-ground color was changed (excluding the header). need your help.
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.setAttribute("value", "After");
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
Update the innerHTML
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.innerHTML = "After";
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
I have a two pages sign-in and sign-up in my navbar(header) angular2 project. In my sign-up page I have a link which should have to redirect to sign-in page when we clicked it. I am unable to process it.Can anyone guide me how to do it. thanks in advance
Here are the both codes i have tried with router aswell.
sign-in.component.html
<div class="modal-content" style="padding: 10px;" id="login">
<div class="modal-body text-left">
<div class="login">
<h2>Login</h2>
<hr>
<div class="row socialButtons">
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
<i class="fa fa-linkedin visible-xs"></i>
<span class="hidden-xs">Linkedin</span>
</a>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
<i class="fa fa-google-plus visible-xs"></i>
<span class="hidden-xs">Google</span>
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<form class="loginForm" action="" autocomplete="off" method="POST">
<div class="form-group">
<label class="control-label" for="signupName">Email</label>
<input type="text" class="form-control" name="username" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signinPassword">Password</label>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
<button class="btn btn-lg btn-info btn-block btnlog" type="submit">Login</button>
<hr>
</form>
</div>
</div>
<div class="row row-sm-offset-3">
<div class="col-xs-12 col-sm-12 col-md-6">
<p class="forgotPwd">
Forgot password?
</p>
</div>
</div>
</div>
</div>
</div>
sign-up.component.html
<div class="modal-content" style="padding: 20px;">
<div class="modal-body text-left">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="panel panel-primary">
<div class="panel-body">
<form method="POST" action="#" role="form">
<div class="form-group">
<h2>Create account</h2>
<hr>
</div>
<div class="form-group">
<label class="control-label" for="signupName">Your name</label>
<input id="signupName" type="text" maxlength="50" class="form-control" placeholder="Your name">
</div>
<div class="form-group">
<label class="control-label" for="signupEmail">Email</label>
<input id="signupEmail" type="email" maxlength="50" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="signupPassword">Password</label>
<input id="signupPassword" type="password" minlength="6" maxlength="25" class="form-control" length="40" placeholder="Password">
</div>
<div class="form-group">
<label class="control-label" for="signupPasswordagain">Confirm Password</label>
<input id="signupPasswordagain" type="password" minlength="6" maxlength="25" class="form-control" placeholder="Confirm Password">
</div>
<div class="form-group">
<button id="signupSubmit" type="submit" class="btn btn-info btn-block">Create your account</button>
</div>
<hr>
<p>Already have an account? Sign in</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
PS:- I should only do this in angular r javascriprt r bootstrap way thanks in advance
Edit :- Is there anyone can do this?
I solved my issue by adding in my signup component
<div *ngIf="hide"> //at the top
<div class="modal-content" id="register" style="padding: 20px;">
<div *ngIf="show"> //at the bottom
<app-sign-in></app-sign-in>
</div>
adding a click function to the button
<p>Already have an account? <button type="button" (click)="signin()">Sign In</button></p>
in the ts file making show = true and hide= false when required like below
export class SignUpComponent implements OnInit {
show = false;
hide = true;
signin(){
this.hide=false;
this.show=true;
}
}
I have this Bootstrap from model, and I do not know why the submit button does not sent the file, it sent nothing.
<form action="myPage.php" class="form-horizontal form-bordered">
<div class="form-body">
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"> </span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new"> CHOOSE FILE </span>
<span class="fileinput-exists"> CHANGE </span>
<input type="file" name="..."> </span>
DELETE
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6 col-md-offset-3">
Cancel
</div>
</div>
</div>
</form>
all links are available
Try this code :
<form action="myPage.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="exampleInputFile">CHOOSE FILE</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
you are using link ,You need submit button
<button type="submit" class="btn btn-default">Submit</button> and your form is messing ">"
<form action="myPage.php" class="form-horizontal form-bordered"