export default {
data() {
return {
usrName: null,
pass1: null,
pass2: null,
regState: {stateCode:-1},
}
},
methods: {
register: function () {
this.axios.post("/login/", { baseURL: 'http://127.0.0.1:3000', usrName: this.usrName, passWord: this.pass1 }).then((response)=>{
console.log(response.data)
this.$store.state.sysDecision.usrDecision = 2
})
}
}
}
}
</script>
<template>
<XAIHeader :registerActive="true"></XAIHeader>
<div class="container">
<form class="w-50 mx-auto pt-5" style="padding-bottom: 400px;">
<h5 class="mb-3">register</h5>
<div>
<label class="form-label">user name</label>
<input v-model="usrName" type="text" class="form-control" required>
</div>
<div>
<label class="form-label">pass word </label>
<input v-model="pass1" type="current-password" class="form-control" required>
</div>
<div>
<label class="form-label">repeat pass word</label>
<input v-model="pass2" type="new-password" class="form-control" required>
</div>
<div class="mt-3">
<button #click="register" class="btn btn-primary" type="submit">register</button>
</div>
</form>
{{ this.$store.state.sysDecision.usrDecision}}
</div>
</template>
I try to send a post request with axios, the backend webserver respond json response correctly. But after receiving the data, but the data in vue reset to the initial value quickly and even the data in vuex is reset to the default initial value. How can I keep the previous data after post the form?
I solve this problem by replacing the <form></form> with <div></div>. It seems if use <form></form> tag, the page reloading is inevitable.
#submit.prevent="register"
try this maybe work.
<template>
<XAIHeader :registerActive="true"></XAIHeader>
<div class="container">
<form #submit.prevent="register" class="w-50 mx-auto pt-5" style="padding-bottom: 400px;">
<h5 class="mb-3">register</h5>
<div>
<label class="form-label">user name</label>
<input v-model="usrName" type="text" class="form-control" required>
</div>
<div>
<label class="form-label">pass word </label>
<input v-model="pass1" type="current-password" class="form-control" required>
</div>
<div>
<label class="form-label">repeat pass word</label>
<input v-model="pass2" type="new-password" class="form-control" required>
</div>
<div class="mt-3">
<button class="btn btn-primary" type="submit">register</button>
</div>
</form>
{{ this.$store.state.sysDecision.usrDecision}}
</div>
</template>
reference here
https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
After submit response the form data you need to make your v-model data to null, then your form will be reset.
this.usrName = null
Related
I have the following HTML code:
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
With the following JavaScript code, to validate the user input. If there are any invalid fields, it should the user stop submitting his request:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
// putting alert here does not work..?
// something like alert('successfully validated your request!')
}, false)
})
})()
The problem is: I want to alert the user, if the submission was successfully, with the alert() function. But I can't figure out where to put the alert function. I marked the code where I tried putting the alert function into, but it's always triggering even when it's not even validated. Does somebody know what am I doing wrong here? Thank you very much.
I have a form that posts using Ajax, I also want to set an HTML5 required attribute on some input fields, but this stops working as expected with Ajax.
So I did the following:
$("body").on("click",".register-button",function(e){
e.preventDefault();
if($('#registerform')[0].checkValidity()){
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
}else{
}
});
This way the form is not posted when empty, but I also don't get any notifications that fields are empty like I would get when only using HTML to post.
I also tried logging the validity like so:
$("body").on("click",".register-button",function(e){
e.preventDefault();
$check = $('#registerform')[0].checkValidity();
console.log($check);
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
});
Which shows false in my console when empty. So the code works, why are the HTML5 notifications not shown? I remember doing something similar in the past and I didn't have to add any custom error messages then, it just worked.
This is my HTML markup:
<form id="registerform" class="register-form" method="post">
<div class="row">
<div class="col-md-6">
<input type="text" name="voornaam" placeholder="Voornaam" required>
</div>
<div class="col-md-6">
<input type="text" name="achternaam" placeholder="Achternaam" required>
</div>
<div class="col-md-12">
<input type="text" name="bedrijf" placeholder="Bedrijfsnaam (optioneel)">
</div>
<div class="col-md-6">
<input type="text" name="telefoon" placeholder="Telefoonnummer" required>
</div>
<div class="col-md-6">
<input type="text" name="email" placeholder="E-mail" required>
</div>
<div class="col-md-3">
<input type="text" name="huisnummer" id="billing_streetnumber" placeholder="Huisnummer" required>
</div>
<div class="col-md-3">
<input type="text" name="tussenvoegsel" placeholder="Tussenvoegsel" required>
</div>
<div class="col-md-6">
<input type="text" name="postcode" id="billing_postcode" placeholder="Postcode" required>
</div>
<div id="postcoderesult" class="col-lg-12">
<div class="row">
<div class="col-md-6">
<input type="text" name="straat" placeholder="Straatnaam" readonly required>
</div>
<div class="col-md-6">
<input type="text" name="woonplaats" placeholder="Woonplaats" readonly required>
</div>
</div>
</div>
<div class="col-md-6">
<input type="password" name="password" placeholder="Wachtwoord (minimaal 6 tekens)" required>
</div>
<div class="col-md-6">
<input type="password" name="confirmpassword"placeholder="Herhaal wachtwoord" required>
</div>
<div id="registerresult">
</div>
</div>
<button type="button" name="submit" class="register-button">Account aanmaken</button>
</form>
What am I missing?
I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">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">Operator</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">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}
I have an array that is shown with ng-repeat, also have a form to add data to this array. but I don't want to use button for submit this form, so I used ng-blur in each input and called a function that is adding data to my array, but there is a problem. when I use tab button to go to next input, data is added, but I am typing in second input of an empty form again
you can see my sample here : link
HTML CODE
<form ng-submit="addJobRecord()" id="job_records" class="ui-state-default info_box">
<a class="sortable-handler">
<i class="fa fa-arrows"></i>
</a>
<h4>old form</h4>
<div ng-repeat="x in job_records" class="info_box_body">
<div>
<div class="col-sm-6 pull-right">
<label>name: </label>
<input class="form-control" id="job_record_name" type="text" name="job_record_name" value="{{x.name}}" />
</div>
<div class="col-sm-6 pull-right">
<label>title: </label>
<input class="form-control" id="job_record_title" type="text" name="job_record_title" value="{{x.title}}" />
</div>
</div>
<div>
<div class="col-sm-6 pull-right">
<label>group: </label>
<input class="form-control" id="job_record_group" type="text" name="job_record_group" value="{{x.group}}" />
</div>
<div class="col-sm-6 pull-right">
<label>situation: </label>
<input class="form-control" id="job_record_situation" type="text" name="job_record_situation" value="{{x.situation}}" />
</div>
</div>
<div class="clearfix"></div>
<hr>
</div>
<div class="info_box_body" name="helpForm">
<h4>empty form</h4>
<div>
<div class="col-sm-6 pull-right">
<label>name: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_name" ng-model="JobRecordform.newJobName" placeholder="name" />
</div>
<div class="col-sm-6 pull-right">
<label>title: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_title" ng-model="JobRecordform.newJobTitle" placeholder="title" />
</div>
</div>
<div>
<div class="col-sm-6 pull-right">
<label>group: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_group" ng-model="JobRecordform.newJobGroup" placeholder="group" />
</div>
<div class="col-sm-6 pull-right">
<label>situation: </label>
<input ng-blur="addJobRecord()" class="form-control" type="text" id="new_job_record_situation" ng-model="JobRecordform.newJobSit" placeholder="situation" />
</div>
</div>
</div>
</form>
SCRIPT CODE
$scope.JobRecordform = {};
$scope.addJobRecord = function() {
//here $scope.user will have all the 3 properties
// alert(JSON.stringify($scope.form));
console.log($scope.JobRecordform);
$scope.job_records.push({
name: $scope.JobRecordform.newJobName,
title: $scope.JobRecordform.newJobTitle,
group: $scope.JobRecordform.newJobGroup,
situation: $scope.JobRecordform.newJobSit
});
$scope.JobRecordform = {};
};
$scope.job_records = [
{
name: "my job",
title: "my job title",
group: "my job group",
situation: "my job situation"
}
];
You just have to check if the $scope values are not null before pushing it to the array. I have updated your plunker. Please check
How can we empty a ajax loaded form using pure JavaScript or jQuery.
I have tried document.forms[0].reset(); and $('#new-staff-form')[0].reset(); both didn't work it returns undefined.
Update
<div class="box col-md-12 new-staff">
<form id="new-staff-form" method="post">
<div class="row">
<div class="col-md-6">
<label for="f_name">First Name</label>
<input type="text" name="f_name" placeholder="First name"/>
</div>
<div class="col-md-6">
<label for="l_name">Last Name</label>
<input type="text" name="l_name" placeholder="Last name"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="user_name">User name</label>
<input id="user_name" type="text" name="user_name" placeholder="User name"/>
</div>
<div class="col-md-6">
<button id="user-avail" class="btn btn-primary">Check available</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary pull-left">Save</button>
</div>
</div>
</form>
</div>
Javascript:
$('#new-item').click(function(){ // works fine until I load new html form using ajax with same ids and class
$('#new-staff-form')[0].reset();
$('.new-staff').slideToggle(); // show new form
});
$('.edit-item').click(function(){ // ajax call this loads everything correctly
var id = $(this).data('staf_id'); //item to delete
$.ajax({
url:url_view_staff+id,
type:'get'
}).done(function(data){
edit_item_id = id;
$('.new-staff').html(data).slideDown();
}).fail(function(data){
$('#errors').html(data.responseText);
$('.valid-error').slideDown();
});
});
JavaScript:
document.getElementById("myForm").reset();
Jquery :
$('#form_id')[0].reset();
Make sure your form id is valid.
FIDDLE
$('#configreset').click(function(){
$('#configform')[0].reset();
});