Input.
<html>
<head>
<title>Input</title>
<script type="text/javascript" src="lib/vue.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<!-- Just an image -->
<div id="app">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="picture/icons.png" width="30" height="30" alt="" />
Muhamad Rizal
</a>
<form class="form-inline">
<input
class="form-control mr-sm-2"
type="text"
placeholder="Search"
aria-label="Search"
v-model="title"
name="title"
/>
{{title}}
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
Search
</button>
</form>
</nav>
<div style="width: 17rem;">
<img src="picture/sweater1.png" class="card-img-top" alt="..." />
<div class="card-body">
<b>Please Correct The Following error(s):</b>
<ul>
<li v-for="error in errors">{{error}}</li>
</ul>
<h5 class="card-title">Input</h5>
<form
ref="formSweat"
@submit.prevent="submitForm($event)"
action=""
method="post"
id="myForm"
>
<label>Name Sweater:</label>
<input type="text" v-model="nmswt" name="nmswt" ref="nmswt" /><br><br>
<label>Size:</label><br>
<input type="text" v-model="size" name="size" ref="size" /><br><br>
<label>Price:</label><br>
<input
type="number"
v-model.number="price"
name="price"
ref="price"
/><br><br>
<label>Categories:</label>
<select v-model="categories">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<br />
<label>Image:</label>
<input type="file" name="cover" ref="cover" />
<br /><br /><br />
<input type="submit" value="Submit" />
</form>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
keyword: "Hello maderpaker",
nmswt: "",
title: "",
size: "",
price: 0,
categories: [],
options: [
{ text: "Cardigan", value: "01" },
{ text: "Acrylic", value: "02" },
{ text: "Lolita", value: "03" }
],
errors: []
},
methods: {
submitForm(event) {
//kode validasi
// if (this.title.length < 3) {
// this.errors.push("Title minimal 3 karakter!");
// this.$refs.title.select();
// }
if (this.nmswt.length < 3) {
this.errors.push("Name Sweater minimal 3 karakter!");
this.$refs.nmswt.select();
}
if (this.size.length < 1) {
this.errors.push("size minimal 1 karakter!");
this.$refs.size.select();
}
if (this.price < 0) {
this.errors.push("Price tidak boleh angka minus");
this.$refs.price.select();
}
if (this.categories.length === 0) {
this.errors.push("Minimal 1 categories");
this.$refs.categories.focus();
}
//kode status informasi
if (this.errors.length === 0) {
// persiapkan data
let formData = new FormData();
let cover = this.$refs.cover.files[0];
formData.append("title", this.title);
formData.append("size", this.size);
formData.append("nmswt", this.nmswt);
formData.append("price", this.price);
formData.append("categories", this.categories);
formData.append("cover", cover);
// kirim data ke server
let xhttp = new XMLHttpRequest(); // create objek XMLHttp
// definisikan fungsi ketika terjadi perubahan state
xhttp.onreadystatechange = function() {
// state ini menunjukkan data terkirim dan diterima server dengan baik
if (this.readyState == 4 && this.status == 200) {
// respon text dari server
console.log(this.responseText);
}
};
// sesuaikan dengan lokasi file proses.php
xhttp.open(
"POST",
"http://localhost/vue/proses.php",
true
);
// kirim objek formData
xhttp.send(formData);
}
}
}
});
</script>
</body>
</html>
Gambar Diatas Sebelum di Submit
Gambar Diatas Sesudah di Submit
Komentar
Posting Komentar