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.
Related
I am a bit stuck here, it does not work when inside of a modal but works if it is outside.
Here is my modal
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">PLACE A VOUCHER ORDER</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="orders container">
<h6>Please Complete the fields</h6>
<form novalidate="novalidate" #orderForm="ngForm" (ngSubmit)="submit()">
<div class="form-group">
<label>SENDER NAME</label>
<input type="text" class="form-control" name="senderName" #title="ngModel" [(ngModel)]="model.senderName" placeholder="Enter sender name" required />
</div>
<div class="form-group">
<label>SENDER EMAIL</label>
<input type="text" class="form-control" name="senderEmail" #title="ngModel" [(ngModel)]="model.senderEmail" placeholder="Enter sender email" required />
</div>
<div class="form-group">
<label>RECIPIENT NAME</label>
<input type="text" class="form-control" name="recipientName" #title="ngModel" [(ngModel)]="model.recipientName" placeholder="Enter recipient name" required />
</div>
<div class="form-group">
<label>RECIPIENT EMAIL</label>
<input type="text" class="form-control" name="recipientEmail" #title="ngModel" [(ngModel)]="model.recipientEmail" placeholder="Enter recipient email" required />
</div>
<div class="form-group">
<label>VOUCHER</label>
<select name="voucher" class="form-control" #title="ngModel" [(ngModel)]="model.voucher" required>
<option value="500">500 USD</option>
<option value="1000">1000 USD</option>
<option value="2500">2500 USD</option>
<option value="5000">5000 USD</option>
</select>
</div>
<div class="form-group">
<label>DEDICATION</label>
<textarea type="text" class="form-control" name="dedication" #body="ngModel" [(ngModel)]="model.dedication" placeholder="Enter text" required></textarea>
</div>
<button [disabled]="orderForm.invalid" class="btn btn-block btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Cross click')">Cancel</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
Here is the submit() on the ts file. The button is initially disabled when all the fields have not yet filled and in there is also my httppost method from the service ts.
submit(): void {
if(this.orderForm.invalid){
return;
}
this.orderService.createOrder(this.model).subscribe(response => {
alert('order successfully created!');
console.log('Got response from API:', response);
}, error => {
});
}
When I click submit nothing happens at all. It should show an alert when it is successfully submitted.
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)
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.
The problem is that when i click on the button nothing happens at all which it should be at least to me.
I don't need a direct answer. Just a hint, or a pointer of what can be going on.
Here is part of the code for the modal form
<div class="modal-body">
<form Method="POST" id="Signin-Form" role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_uname" id="txt" type="text" class="form-control input-lg" placeholder="Enter User Name" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input name="txt_umail" id="email" type="text" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass" id="pass1" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input name="txt_upass2" id="pass2" type="password" class="form-control input-lg" placeholder="Confirm Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" />
</div>
</div>
<button type="submit" class="btn btn-success btn-block btn-lg"><i class="glyphicon glyphicon-open-file">CREATE ACCOUNT!</i></button>
</form>
You need to add action attribute to the form to be able to send the form-data when the form is submitted.
Sample code below
<form action="submittedpage.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
After you click submit button, the form data is sent for processing to a PHP file named "submittedpage.php". The form data is sent with the HTTP POST method.
To display the submitted data you could simply echo all the variables. The "submittedpage.php" see the code below:
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
You can see this link for more info in form handling.
https://www.w3schools.com/php/php_forms.asp
Hope this helps.
I'm looking for an answer for this already two days. I hope you help me.
So I have my index html code:
<div class="container-fluid" ng-controller="citizensController as citizensCtrl">
<h1>Moradores</h1>
<hr>
<uib-tabset active="activeForm">
<!-- INICIO TAB 1 -->
<uib-tab index="0" heading="Novo">
<div class="animated fadeIn" data-ng-include='"templates/pages/citizens/form.html"'></div>
</uib-tab>
<!-- INICIO TAB NOVO -->
<uib-tab index="1" heading="Relatório" ng-click="citizensCtrl.reportTab()">
<div id="grid-citizens" ui-grid="citizensCtrl.gridOptions" class="grid" ng-if=" citizensCtrl.gridOptions.data"></div>
</uib-tab>
<!-- INICIO TAB 3 -->
<uib-tab index="2" heading="Visão">
Some Tab Content
</uib-tab>
</uib-tabset>
</div>
and this is the form html code:
<form name="citizenForm" ng-submit="citizensCtrl.createCitizen(citizenForm)" class="css-form" novalidate>
<div class="form-group">
<label for="citizen_name">Nome *</label>
<input type="text" class="form-control" id="citizen_name" placeholder="Nome" ng-model="citizensCtrl.citizen.name" required>
</div>
<div class="form-group">
<label for="citizen_birthday">Nascimento *</label>
<uib-datepicker ng-model="citizensCtrl.citizen.birthday" class="well well-sm" datepicker-options="citizensCtrl.dateOptions" required></uib-datepicker>
</div>
<div class="form-group">
<label for="citizen_cell_phone">Celular *</label>
<input type="text" class="form-control" id="citizen_cell_phone" placeholder="Celular" ng-model="citizensCtrl.citizen.cell_phone" mask='(99) 9?9999-9999' mask-restrict="reject" mask-clean="true" required>
</div>
<div class="form-group">
<label for="citizen_phone">Telefone *</label>
<input type="text" class="form-control" id="citizen_phone" placeholder="Telefone" ng-model="citizensCtrl.citizen.phone" mask='(99) 9999-9999' mask-restrict="reject" mask-clean="true" required>
</div>
<hr>
<h4>Endereço</h4>
<div class="form-group">
<label for="citizen_address_district">Bairro *</label>
<select id="citizen_address_district" ng-model="citizensCtrl.citizen.address.district" class="form-control"
ng-options="district as district.name for district in citizensCtrl.districts" ng-change="citizensCtrl.getAddresses()" required>
<option value=""> Bairro</option>
</select>
</div>
<div class="form-group">
<label for="citizen_address_public_place">Rua *</label>
<input type="text" ng-model="citizensCtrl.citizen.address.public_place" id="citizen_address_public_place"
uib-typeahead="address as address.public_place for address in citizensCtrl.addresses | filter:{public_place: citizensCtrl.citizen.address.public_place} | limitTo:5"
typeahead-min-length="6" typeahead-select-on-exact="true"
typeahead-on-select="citizensCtrl.getZipCodes()"
typeahead-loading="loadingLocations"
ng-disabled="!citizensCtrl.citizen.address.district.id"
typeahead-no-results="noResults" class="form-control" required>
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> Endereço não encontrado
</div>
</div>
<div class="form-group">
<label for="citizen_address_zip_code">CEP *</label>
<select id="citizen_address_zip_code" ng-model="citizensCtrl.citizen.address.zip_code"
ng-disabled="!citizensCtrl.citizen.address.public_place.id" class="form-control"
ng-options="zip_code as zip_code.number for zip_code in citizensCtrl.zip_codes" required>
<option value="">CEP</option>
</select>
</div>
<div class="form-group">
<label for="citizen_address_number">Numero *</label>
<input type="text" class="form-control" id="citizen_address_number" placeholder="Numero" ng-model="citizensCtrl.citizen.address.number" mask='99999999' mask-restrict="reject" mask-validate="false" required>
</div>
<div class="form-group">
<label for="citizen_address_complement">Complemento</label>
<input type="text" class="form-control" id="citizen_address_complement" placeholder="Complemento" ng-model="citizensCtrl.citizen.address.complement">
</div>
<input type="submit" class="btn btn-primary" value="Criar" />
<input type="reset" class="btn btn-default" ng-click="citizensCtrl.defineCitizen(); citizenForm.$setPristine()" value="Limpar Formulário" />
</form>
and this is the function triggered in my AngularJs controller for that:
self.createCitizen = function(form){
if(form.$valid){
$http.post(apiUrl + endpoint, angular.extend({},self.citizen)).then(function(response){
alertsService.add('success', 'Morador criado com sucesso!');
form.$setPristine();
self.defineCitizen();
}, function(error){
alertsService.add('danger', 'Oops.. Alguma coisa deu errado. Contate o administrador.');
});
}else{
alertsService.add('danger', 'Você precisa preencher todos os campos obrigatórios.');
}
};
Well, my problem occurs when I submit the formulary with some error like required items.
Then the css changes to show what is missing.
In this moment if I change the tab and go back to the formulary tab again the inputs should lose the css with errors, but my formulary is keeping dirty or something like that.
My solution was to set a ng-if in form looking to guide users are. If you leave the tab "Create tab" form is deleted because of ng-if. So when I go back to the "create" tab again, it is rebuilt.