Good day everyone! When I enter the customer_address it updates the database even if I have not yet input the customer_first_name, customer_last_name and customer_contact_no. But if I don’t input the address he won’t update the row in the database. What do you think is the problem? How can I prevent the input from being empty.
//customer.js
identifyCustomerId : function(customer_id) {
for(var index = 0; index < this.customers.length; index++) {
if(customer_id == this.customers[index].customer_id) {
this.customer_first_name = this.customers[index].first_name;
this.customer_last_name = this.customers[index].last_name;
this.customer_contact_no = this.customers[index].contact_no;
this.customer_address = this.customers[index].address;
}
}
},
openToggleUpdateForm : function(customer_id) {
this.updateForm = true;
this.toggleButton = false;
this.customer_id = customer_id;
this.identifyCustomerId(customer_id);
},
userValidation : function() {
if(this.customer_first_name.trim() === "") {
this.first_name_error = true;
this.first_name_error_message = "This field is required!";
console.log(this.first_name_error);
}
else {
this.first_name_error = false;
this.first_name_error_message = "";
}
if(this.customer_last_name.trim() == "") {
this.last_name_error = true;
this.last_name_error_message = "This field is required!";
}
else {
this.last_name_error = false;
this.last_name_error_message = "";
}
if(this.customer_contact_no.trim() == "") {
this.contact_no_error = true;
this.contact_no_error_message = "This field is required!";
}
else {
this.contact_no_error = false;
this.contact_no_error_message = "";
}
if(this.customer_address.trim() == "") {
this.address_error = true;
this.address_error_message = "This field is required!";
}
else {
this.address_error = false;
this.address_error_message = "";
}
},
updateCustomer : function() {
this.userValidation();
console.log(this.customer_first_name);
axios.post(this.urlRoot + this.api + "update_customer.php", {
customer_id : this.customer_id,
first_name : this.customer_first_name,
last_name : this.customer_last_name,
contact_no : this.customer_contact_no,
address : this.customer_address
}).then(function (response) {
if(response.data.status == "NOT OK") {
vm.first_name_error = response.data.first_name_error;
vm.last_name_error = response.data.last_name_error;
vm.contact_no_error = response.data.contact_no_error;
vm.address_error = response.data.address_error;
} else{
console.log(response);
vm.retrieveCustomer();
}
});
}
//update_customer.php (api)
$customer = new Customer();
$data = json_decode(file_get_contents("php://input"),true);
$response = [];
$response['status'] = "OK";
if(empty($data['customer_id'])) {
$response['customer_id_error'] = true;
$response['status'] = "NOT OK";
}
if(empty($data['first_name'])) {
$response['first_name_error'] = true;
$response['status'] = "NOT OK";
echo $data['first_name'];
}
if(empty($data['last_name'])) {
$response['last_name_error'] = true;
$response['status'] = "NOT OK";
}
if(empty($data["contact_no"])) {
$response["contact_no_error"] = true;
$response["status"] = "NOT OK";
}
if(empty($data['address'])) {
$response['address_error'] = true;
$response['status'] = "NOT OK";
}
else{
$customer = new Customer();
$response['status'] = "OK";
echo json_encode($response);
$customer->customer_id = ucwords($data['customer_id']);
$customer->first_name = ucwords($data['first_name']);
$customer->last_name = ucwords($data['last_name']);
$customer->contact_no = $data['contact_no'];
$customer->address = ucwords($data['address']);
$customer->updateCustomer();
}
//customer_page.php ("update button on my table")
<button class="btn btn-secondary" @click="openToggleUpdateForm(customer.customer_id)">Update</button>
//customer_page.php ("update form")
<div class="add-content" v-if="updateForm">
<h1>Add Customer</h1>
<label>Firstname: </label>
<input type="text" name="first_name" :class="{ invalid : first_name_error }" v-model="customer_first_name" required><br>
<div class="text-danger">{{ first_name_error_message }}</div>
<label>Lastname: </label>
<input type="text" name="last_name" :class="{ invalid : last_name_error }" v-model="customer_last_name" required><br>
<div class="text-danger">{{ last_name_error_message }}</div>
<label>Contact no.: </label>
<input type="text" name="contact_no" :class="{ invalid : contact_no_error }" v-model="customer_contact_no" required><br>
<div class="text-danger">{{ contact_no_error_message }}</div>
<label>Address: </label>
<input type="text" name="address" :class="{ invalid : address_error }" v-model="customer_address" required><br>
<div class="text-danger">{{ address_error_message }}</div>
<div class="mt-4">
<button @click="updateCustomer()" class="btn btn-primary">Add</button>
</div>
</div>