getting undefined data when submitting HTML form - html

https://pasteboard.co/IVAyRyij.png
I'm trying to send form data to PHP but I just get undefined as form data. Please help.
My HTML:
<div class="account-wall">
<img class="profile-img" src="img/male.png" alt="">
<form class="form-signin" role="form" ng-submit="login('Restraunt')">
<input type="text" class="form-control" ng-model="user" placeholder="User Name" required >
<input type="password" class="form-control" ng-model="pass" placeholder="Password" required>
<button type="submit" class="btn btn-lg btn-primary btn-block">Sign in</button>
<label class="checkbox pull-left">
<input type="checkbox" value="remember-me">Remember me
</label>
Need help? <span class="clearfix"></span>
</form>
</div>
My ui-view:
.state("app.admin", {
url: "/admin",
views: {
sub: {
templateUrl: "templates/admin.html"
}
}
})
My Controllers:
$scope.login=function (type2) {
$http2.post($rootScope.url+"login.php",{
type:type2,
user:$scope.user,
pass:$scope.pass
}).then(function (resp)

Related

Html Form not passing image file name to laravel controller

Laravel Blade Form not passing image . it comes out null but other types are passed.
this is the form;
<div class="modal-body">
<form method="POST" action="{{route('slide.store')}}" enctype="multipart/form-data">
#csrf
<div class="form-group">
<label for="name">Title</label>
<input type="text" class="form-control" placeholder="Enter Slide Title" name="name">
</div>
<div class="form-group">
<label for="name">Description</label>
<input type="text" class="form-control" placeholder="Enter Slide Description" name="description">
</div>
<div class="form-group">
<label for="name" >Image</label>
<input type="file" name="image">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="submit">Save</button>
</div>
</form>
</div>
this is the controller store function;
public function store(Request $request)
{
return $request->all();
$product = New Slide($request->except(['image']));
$product->save();
//store image
if($request->hasFile('image') && $request->file('image')->isValid()){
$product->addMediaFromRequest('image')->toMediaCollection('images/slides');
}
return redirect("slide/index/{$product->id}")->with('success', 'New Slide Added.');
}
and this is the route;
Route::resource('slide', 'SlideController');
I have included the enctype="multipart/form-data" already. I cant see what am doing wrong. Any help will be appreciated.

Disable form to edit, enable if click button

I have the following problem, I made the form:
<button class="btn btn-success">Edit form</button><div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="true">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "true">
</div>
<input type="hidden" value="" name="password_confirm">
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
By default, the fields are to have disabled status so that they can not be edited, now I would like the form to be available for editing after clicking the Edit form button and the hidden field as text. Unfortunately, for now, I have no idea how to go about it :(
Give this a try:
<button class="btn btn-success" (click)="onTogglenotEditMode()">Edit form</button>
<div class="container" style="width:300px;">
<form method="POST" role="form" #formName = "ngForm" >
<div class="form-group">
<label form="username">Username: </label>
<input type="text" name="username" value="" class="form-control" [disabled]="notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input type="text" name="password" value="" class="form-control" [disabled] = "notEditMode">
</div>
<div class="form-group">
<label form="password">Password: </label>
<input *ngIf="!notEditMode" type="text" value="" name="password_confirm">
</div>
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
And in the Component:
import { Component } from '#angular/core';
#Component({...})
export class AppComponent {
notEditMode = true;
onTogglenotEditMode() {
this.notEditMode = !this.notEditMode;
}
}
Here's a Working Sample StackBlitz for your ref.

When sending the form, why is the value undefined?

I have a form
<form>
<div class="form-group">
<input class="form-control" ([ngModel])="login" placeholder="Login" required>
</div>
<div class="form-group">
<input type="password" class="form-control" ([ngModel])="password" placeholder="Password">
</div>
<div class="form-group">
<button (click)="logUpUser()" class="btn btn-primary">Sign Up</button>
</div>
</form>
and I want to send the value from HTML form to the typescript method
export class LogUpFormComponent implements OnInit {
login: string;
password: string;
constructor() { }
logUpUser() {
console.log(this.login);
}
}
but in the method logUpUser() I get the value of undefined. What am i doing wrong?
The correct HTML-Code has to look like this:
<form>
<div class="form-group">
<input class="form-control" [(ngModel)]="login" placeholder="Login" required>
</div>
<div class="form-group">
<input type="password" class="form-control" [(ngModel)]="password" placeholder="Password">
</div>
<div class="form-group">
<button (click)="logUpUser()" class="btn btn-primary">Sign Up</button>
</div>
</form>
And in your ts-File try this:
login: string = '';
password: string = '';

Cannot read property 'form' of undefined angular 5

I have the following html form in angular
<form (ngSubmit)="signin()" #signinform="ngForm">
<div class="form-group row">
<label for="signinemail" class="col-sm-2 col-form-label">Email:</label>
<div class="col-sm-10">
<input type="email"
class="form-control"
id="signinemail"
name="signinemail"
ngModel
placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="signinpassword" class="col-sm-2 col-form-label">Password:</label>
<div class="col-sm-10">
<input type="password"
class="form-control"
id="signinpassword"
name="signinpassword"
ngModel
placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input ml-0"
type="checkbox"
id="gridCheck"
name="remembercheckbox"
ngModel>
<label class="form-check-label" for="gridCheck">
Remember Me
</label>
</div>
<small class="form-text text-muted">Forget Password?</small>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Sign In</button>
<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
</div>
</form>
and the following typescript for the form:
import {NgForm} from "#angular/forms";
#ViewChild('signinform') signinform: NgForm;
signin() {
let payload = {
email: this.signinform.form.value.signinemail,
password: this.signinform.form.value.signinpassword,
localstorage: this.signinform.form.value.remembercheckbox
};
this.userservice.gettoken(payload);
this.signedin = true;
}
I have compared this to other forms I have built and yet there is no difference. What could be causing this?
the form element is on the dom when I call. The submit button is within the form. The #ViewChild element syntax is correct and properly imported. I truly don't understand and I am ready to punch a baby.
The code looks fine...You could just try not using view child, and instead do:
<form (ngSubmit)="signin(signinform)" #signinform="ngForm">
signin(form: NgForm) {
console.log(form);
}
I'd definitely try that console though, to make sure the form is being submitted properly.

How refresh part of page after submit?

I develop function for create user, when I create user all the page refresh,but i want just the tables refrech automatically, just the table refresh and not all the page, how to correct my problem ?
function JSalert() {
swal({
title: "opération effectuée avec succès",
text: "",
icon: "success",
confirmButtonColor: "#C13232"
});
$(document).ready(function() {
$("button").click(function() {
location.reload(true);
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body" ng-style="{'height': '500px','width':'643px'}">
<form name="myForm1" id="myForm">
<div class="form-group">
<label name="refe" class="col-form-label">Email:</label><span style="color: red;">*</span>
<input type="text" class="form-control" name="refee" ng-model="registration.Email" required>
</div>
<div class="form-group">
<label id="tire7" class="col-form-label">Adress:</label><span style="color: red">*</span>
<input type="text" class="form-control" name="titree" ng-model="registration.Adress" required>
</div>
<div class="form-group">
<label id="tire75" class="col-form-label">Mobile:</label><span style="color: red">*</span>
<input type="text" class="form-control" name="titree" ng-model="registration.Mobile" required>
</div>
<div class="form-group">
<label id="site" class="col-form-label">Site:</label><span style="color: red">*</span>
<input type="text" class="form-control" name="titre12" ng-model="registration.Site" required>
</div>
</form>
</div>
<button type="button" class="btn btn-primary" id="btnsave" data-dismiss="modal" onclick="JSalert()" ng-click="signUp()" style="margin-left: 350px" disabled>Done
</button>
For refreshing only particular table without reloading page, call the service(for the data that you are displaying in the table) once again after success signup.