We Keep Coding

How to clear input fields after adding a new element?

I have an array with the students.
I have the implementation of the addition of students.
Question: how to clean up after pressing the field? Fields must be cleaned so that when you try to enter new values ​​were not set to the old values.
Tried everything, nothing works. Neither the <form> -> <button type = "reset">, or the selectors ...
What can be done to solve this problem?
index.html
......
<!-- add new student -->
<br>
<input v-model="students.name" placeholder="surname">
<select v-model="students.group">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input v-model="students.year" placeholder="Bitrh year">
<input type="checkbox" v-model="students.done">
<label>done</label>
<input v-model.number="students.mark" type="number" placeholder="mark">
<button type="reset" #click="addStudent()">add to array</button>
</div>
<!-- /add new student -->
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="/index.js"></script>
index.js
let students = [
{
id: '1',
name: "Test",
group: "1",
year: "1985",
done: true,
mark: 4,
},
]
var app = new Vue ({
el: '#app',
data: {
students: [],
search: '',
stud: students.slice(),
},
methods: {
deleteStudent(studId) {
this.stud = this.stud.filter(elem => {
return elem.id != studId;
});
},
addStudent() {
const id = this.stud.length + 1;
this.stud.push({ id, ...this.students });
}
}
})

I don't know vue, but you can always select all inputs and set it's value on '' :
document.querySelectorAll('input').forEach(input => input.value='')
in best case apply it to container so sth like that:
document.querySelector('.formClassName').querySelectorAll('input').forEach(input => input.value='')

Just use following:
deleteStudent(studId) {
this.stud.splice(students.id, 1)
}
You can splice something based on it's id the 1 after the comma is that it deletes 1 stud-data from your id.

When you want to use a v-model on your form and let the user enter some data, you should pass an initial object to your inputs. And when the user submits the form, you'll push that data to your array, following to reset your initial object.
So this implementation will help you:
<!-- add new student -->
<br>
<input v-model="initialState.name" placeholder="surname">
<select v-model="initialState.group">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input v-model="initialState.year" placeholder="Bitrh year">
<input type="checkbox" v-model="initialState.done">
<label>done</label>
<input v-model.number="initialState.mark" type="number" placeholder="mark">
<button type="reset" #click="addStudent()">add to array</button>
</div>
<!-- /add new student -->
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="/index.js"></script>
var app = new Vue ({
el: '#app',
data: {
students: [],
initialState: {
id: '',
name: '',
group: '',
year: '',
done: true,
mark: 0
},
search: '',
},
methods: {
deleteStudent(studId) {
this.students = this.students.filter(elem => {
return elem.id != studId;
});
},
addStudent() {
const id = this.students.length + 1;
this.students.push({ id, this.initialState });
this.initialState = JSON.parse(JSON.stringify({
id: '',
name: '',
group: '',
year: '',
done: true,
mark: 0
}));
}
}
})

How to remove unwanted option value from dropdown?

example 1
<select id="BillTypeId" name="BillTypeId" required="" class="form-control">
<option value=""></option>
<option value="9" tax-groupid="1" data-price="1500.00" data-isfixed="False">LAUNDRY</option>
<option value="1064" tax-groupid="1" data-price="0.00" data-isfixed="False">DEBIT</option>
<option value="1065" tax-groupid="1" data-price="0.00" data-isfixed="False">CREDIT</option>
</select>
Let's suppose I have a dropdown with dynamic option values.
I have a function to retrieve these value from controller.
$.ajax({
url: '/cash/bill/PostingBillTypeCombo',
dataType: 'html',
data: {
name: "BillTypeId",
required: true,
currencyId: selectedCurrencyId
},
method: 'POST',
success: function (data) {
debugger;
if (data.op == "DEBIT" || data.op== "CREDIT")
{
$('#PostingBillTypeComboContainer').html("");
$('#PostingBillTypeComboContainer').html(data);
}
},
});
In my dropdown it has 3 values -credit , debit and laundry.
Within the function (data) I use the data.op to check whether its debit or credit if (data.op == "DEBIT" || data.op== "CREDIT")
(check example 1) if it contain those names remove the rest of the option values eg:LAUNDRY and only show the debit and credit values in the dropdown.
I'm new to this please help me sorry for my poor English

You can do something like this :
if (data.op == "DEBIT") {
$("#BillTypeId option:not(:contains('DEBIT'))").hide();
} else if (data.op == "CREDIT") {
$("#BillTypeId option:not(:contains('CREDIT'))").hide();
}
$("#BillTypeId option:not(:contains('DEBIT'))").hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<select id="BillTypeId">
<option value=""></option>
<option value="9">LAUNDRY</option>
<option value="1064">DEBIT</option>
<option value="1065">CREDIT</option>
</select>

Let's do it with CSS:
.debit-credit option:not(.debit-credit) {
display: none;
}
Let's apply this on the structure:
<select id="BillTypeId" name="BillTypeId" required="" class="form-control">
<option class="debit-credit" value=""></option>
<option value="9" tax-groupid="1" data-price="1500.00" data-isfixed="False">LAUNDRY</option>
<option class="debit-credit" value="1064" tax-groupid="1" data-price="0.00" data-isfixed="False">DEBIT</option>
<option class="debit-credit" value="1065" tax-groupid="1" data-price="0.00" data-isfixed="False">CREDIT</option>
</select>
Then you add debit-credit class to BillTypeId if you want to hide LAUNDRY and remove that class if you want to show it:
$.ajax({
url: '/cash/bill/PostingBillTypeCombo',
dataType: 'html',
data: {
name: "BillTypeId",
required: true,
currencyId: selectedCurrencyId
},
method: 'POST',
success: function (data) {
debugger;
if (data.op == "DEBIT" || data.op== "CREDIT")
{
$('#PostingBillTypeComboContainer').html("");
$('#PostingBillTypeComboContainer').html(data);
$('#BillTypeId').addClass("debit-credit");
} else {
$('#BillTypeId').removeClass("debit-credit");
}
},
});
Here's a proof of concept: https://jsfiddle.net/hz6vqnbj/

$("#BillTypeId option[value=1064]").hide();
if you know which one to hide then use this code to hide the corresponding option by passing its value.

clone form include dependent fields by vuejs

I have a form in which there should be submitting a price for various health care services. Treatments are already categorized. Now, I want to first select a treatment group from a selector and then select the treatment list for that category in the next selector. When I have just one form on the page, I have no problem. But I need to clone this form and the user can simultaneously record the price of some treatments. In this case, all the second selectors are set according to the last selector for the categories. While having to match their category's selector. I searched for the solution very well and did not get it. My code in vuejs is as follows. Please guide me. Thank you in advance.
<template>
<div>
<div id="treatment_information">
<div class="col-md-3">
<select id="category_name" class="form-control show-tick"
v-on:change="getTreatmentList($event)"
name="treatment_rates[]category_id" v-model="treatment_rate.category_id"
>
<option value="0"> -- select category --</option>
<option class="form-control main"
v-for="item in vue_categories" :id="item.id+1000" :value="item.id"
:name="item.name">
{{ item.name }}
</option>
</select>
</div>
<div class="col-md-3">
<select id="treatment_id" class="form-control show-tick"
name="treatment_rates[]treatment_id" v-model="treatment_rate.treatment_id"
>
<option value="0"> -- select treatment --</option>
<option class="form-control main"
v-for="item in vue_treatments" :value="item.id">
{{ item.value }}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
vue_temp: [],
vue_categories: [],
vue_treatments: [],
vue_category: '',
//for clone form
treatment_rate: {
category_id: 0,
treatment_id: 0,
hospital_id: 0,
dollar: 'دلار',
rial: 'ریال'
},
treatment_rates: [],
};
},
mounted() {
console.log('Component mounted.');
this.getList();
},
methods: {
getList() {
var self = this;
axios.get('/vueDashboard/get/categories').then(function (response) {
self.vue_temp = response.data;
const len = self.vue_temp.length;
self.vue_temp.forEach(function (item) {
if (self.vue_right.length > 0) {
while (self.vue_right[self.vue_right.length - 1] < item['rgt']) {
self.vue_right.pop();
if (self.vue_right.length == 0)
break;
}
}
self.vue_categories.push({
'id': item['id'],
'name': '---'.repeat(self.vue_right.length) + ' ' + item['name']
});
self.vue_right.push(item['rgt'])
var str = "---";
});
}).catch(function (error) {
console.log(error);
});
axios.get('/vueDashboard/get/treatments?category=' + JSON.stringify(self.treatment_rates)).then(function (response) {
console.log(response.data);
self.vue_treatments = response.data;
}).catch(function (error) {
console.log(error);
});
},
addForm(event) {
var self = this;
self.vue_increment_id[self.vue_counter++]=self.vue_counter;
console.log(self.vue_increment_id);
self.treatment_rates.push(Vue.util.extend({}, self.treatment_rate));
},
}
}
</script>

Add working hours of a Organization

If I select Sunday, Monday and working hours from 08.00 to 20.00 I need to send 1&08:00&20:00,2&08:00&20:00. How can I able to implement the same in vue javascript?
My current code is
<script>
submitBox = new Vue({
el: "#submitBox",
data: {
articles: [],
services: [],
username: '',
category: '',
subcategory: [],
image: '',
hours: '',
},
methods: {
onFileChange(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
handelSubmit: function(e) {
var vm = this;
data = {};
data['lat'] = this.$refs.myLatField.value;
data['lng'] = this.$refs.myLngField.value;
data['username'] = this.username;
data['category'] = this.category;
data['subcategory'] = this.subcategory;
data['image'] = this.image;
data['hours'] = this.hours;
$.ajax({
url: 'http://127.0.0.1:8000/api/add/post/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status) {
alert("Registration Success")
window.location.href = "https://localhost/n2s/registersuccess.html";
} else {
vm.response = e;
alert("Registration Failed")
}
}
});
return false;
}
},
});
</script>
My html form is
<div id="submitBox">
<form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
<input type="checkbox" value="1" v-model="hours">Sunday
<select>From
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select>
<select>To
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select><br>
<input type="checkbox" value="2" v-model="hours">Monday
<select>
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select>
<select>
<option value="">08.00</option>
<option value="">12.00</option>
<option value="">20.00</option>
<option value="">24.00</option>
</select><br>
</form>
</div>
I am able to pass all other values. So, I haven't included that in the form.
How can I able to select day and working hours and pass it accordingly. Please help me to solve the same

I am not familar with vue.js but you can try something like:
new Vue({
el: '#example-3',
data: {
day:[
{name:"Sunday",val:1},
{name:"Monday",val:2}
],
string:''
},
methods: {
generate: function (event) {
var arr = [];
this.day.map(function(v,i) {
console.log(v.selected == true,);
if(v.selected == true)
{
arr.push(v.val+'&'+v.from+'&'+v.to);
}
});
this.string = arr.join(',');
}
}
})
html:
<div id='example-3'>
<div v-for="value in day">
<input type="checkbox" id="sun" value="value.val" v-model="value.selected">
<label for="sun">{{value.name}}</label>
<select v-model="value.from">From
<option value="08.00">08.00</option>
<option value="12.00">12.00</option>
<option value="20.00">20.00</option>
<option value="24.00">24.00</option>
</select>
<select v-model="value.to">To
<option value="08.00">08.00</option>
<option value="12.00">12.00</option>
<option value="20.00">20.00</option>
<option value="24.00">24.00</option>
</select>
<br>
</div>
<button v-on:click="generate">generate</button>
<span>string: {{ string }}</span>
demo:https://jsfiddle.net/d8ak8ob6/1/

How to change the value of the drop-down on change event?

I have two drop-down lists which are from same table. One contains employee code and second one contains employee name. If I change the employee code then other drop-down should show the employee name relevant to code and if I change the employee name then it should show the code. I am able to successfully retrieve the values but I am unable to show value in the drop-down. Following is my code:
$("select#code").on("change", function () {
getNameFunc($(this).val())
});
$("select#empName").on("change", function () {
getCodeFunc($(this).val())
});
function getNameFunc(value) {
$.ajax({
url: '#Url.Action("getName", "Employees")',
data: { id: value },
cache: false,
type: "GET",
success: function (data) {
$("#empName").val(data.Name);
}
});
}
function getCodeFunc(value) {
$.ajax({
url: '#Url.Action("getCode", "Employees")',
data: { id: value },
cache: false,
type: "GET",
success: function (data) {
$("#code").val(data.Code);
}
});
}
My drop-down list:
#Html.DropDownList("EmpCode", null, htmlAttributes: new { id = "code" })
#Html.DropDownList("EmpName", null, htmlAttributes: new { id = "empName" })
In alert function, I am getting expected value but the problem is displaying it in to drop-down list.

Simple , Try it , Let me assume selects render as , this is dummy test , best approch you must save value = EmpID
Emp Name dropdown
<select id="name">
<option value="EmpID1"> Name 1 </option>
<option value="EmpID2"> Name 2 </option>
</select>
Emp Code dropdown
<select id="code">
<option value="EmpID1"> Code 1 </option>
<option value="EmpID2"> Code 2 </option>
</select>
Inside your ajax , if you want change/load name front the of the dropdown then
Value set by value
$('#name').val(data.EmpID1)
Similarly reverse
$('#code').val(data.EmpID1)
Value set by text / name
$('#name option:selected').text(data.Name)

Check this code. You might get help from this.
Note that I have not implemented ajax call in this code.
$("#emp_code").on("change",function(){
$("#emp_name").val($("#emp_code").val());
});
$("#emp_name").on("change",function(){
$("#emp_code").val($("#emp_name").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Emp Code:</label>
<select id="emp_code">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br/>
<label>Emp Name:</label>
<select id="emp_name">
<option value="1">ABC</option>
<option value="2">XYZ</option>
<option value="3">PQR</option>
<option value="4">JKL</option>
</select>