loveyunk · December 14, 2019 05:33
diff --git a/form-vue-jquery-native.html b/form-vue-jquery-native.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Form</title>
  </head>
  <body>
    <div id="app">
      <form id="myForm">
        <div>
          <label for="username">Username: </label>
          <input type="text" id="username" name="username" v-model="username" />
        </div>
        <div>
          <label for="password">Passowrd: </label>
          <input type="password" name="password" id="password" v-model="password" />
        </div>
        <div>
          Sex:
          <label for="male">male</label>
          <input type="radio" v-model="sex" name="sex" id="male" value="male" />
          <label for="female">female</label>
          <input type="radio" v-model="sex" name="sex" id="female" value="female" />
        </div>
        <div>
          checked:
          <label for="checked">checked</label>
          <input type="checkbox" v-model="checked" name="checked" id="checked" />
        </div>
        <div>
          hobbies:
          <label for="music">music</label>
          <input type="checkbox" v-model="hobbies" name="hobbies" id="music" value="music" />
          <label for="book">book</label>
          <input type="checkbox" v-model="hobbies" name="hobbies" id="book" value="book" />
          <label for="game">game</label>
          <input type="checkbox" v-model="hobbies" name="hobbies" id="game" value="game" />
        </div>
        <div>
          profile:
          <textarea v-model="profile" name="profile" id="profile" cols="30" rows="10"></textarea>
        </div>
        <div>
          fruit:
          <select v-model="fruit" name="fruit" id="fruit">
            <option value="apple">apple</option>
            <option value="pear">pear</option>
            <option value="banana">banana</option>
          </select>
        </div>
        <div>
          selected:
          <select name="select" id="select" multiple v-model="select">
            <option value="AA">AA</option>
            <option value="BB">BB</option>
            <option value="CC">CC</option>
            <option value="DD">DD</option>
            <option value="EE">EE</option>
          </select>
        </div>
        <div>
          <button type="button" @click="submit" id="submit_btn">Submit</button>
        </div>
      </form>
    </div>

    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            username: '',
            password: '',
            sex: '',
            hobbies: [],
            checked: false,
            profile: '',
            fruit: '',
            select: []
          };
        },
        methods: {
          submit() {
            console.log('Username: ', this.username);
            console.log('Password: ', this.password);
            console.log('Sex: ', this.sex);
            console.log('Checked: ', this.checked);
            console.log('Hobbies: ', this.hobbies);
            console.log('Profile: ', this.profile);
            console.log('Fruit: ', this.fruit);
            console.log('Select: ', this.select);
            console.log('-----------------------------------');
          }
        }
      });

      const submitBtn = document.getElementById('submit_btn');
      const myForm = document.getElementById('myForm');

      submitBtn.addEventListener('click', function() {
        const elements = myForm.elements;
        console.log('Username: ', elements['username'].value);
        console.log('Password: ', elements['password'].value);
        console.log('Sex: ', elements['sex'].value);
        console.log('Checked: ', elements['checked'].checked);
        const hobbies = [];
        elements['hobbies'].forEach(function(v, i) {
          if (v.checked) {
            hobbies.push(v.value);
          }
        });
        console.log('Hobbies: ', hobbies);
        console.log('Profile: ', elements['profile'].value);
        console.log('Fruit: ', elements['fruit'].value);
        const selected = [];
        Array.from(elements['select']).forEach(function(v) {
          if (v.selected) {
            selected.push(v.value);
          }
        });
        console.log('Select: ', selected);
      });

      $('#submit_btn').on('click', function() {
        console.log('-----------------------------------');
        console.log('Username: ', $('input[type=text][name=username]').val());
        console.log('Password: ', $('input[type=password][name=password]').val());
        console.log('Sex: ', $('input[type=radio][name=sex]:checked').val());
        console.log('Checked: ', $('input[type=checkbox][name=checked]').prop('checked'));
        const hobbies = [];
        $('input[type=checkbox][name=hobbies]:checked').each(function(i, e) {
          hobbies.push($(e).val());
        });
        console.log('Hobbies: ', hobbies);
        console.log('Profile: ', $('textarea[name=profile]').val());
        console.log('Fruit: ', $('select[name=fruit]').val());
        console.log('Select: ', $('select[name=select]').val());
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Form</title>
	</head>
	<body>
	<div id="app">
	<form id="myForm">
	<div>
	<label for="username">Username: </label>
	<input type="text" id="username" name="username" v-model="username" />
	</div>
	<div>
	<label for="password">Passowrd: </label>
	<input type="password" name="password" id="password" v-model="password" />
	</div>
	<div>
	Sex:
	<label for="male">male</label>
	<input type="radio" v-model="sex" name="sex" id="male" value="male" />
	<label for="female">female</label>
	<input type="radio" v-model="sex" name="sex" id="female" value="female" />
	</div>
	<div>
	checked:
	<label for="checked">checked</label>
	<input type="checkbox" v-model="checked" name="checked" id="checked" />
	</div>
	<div>
	hobbies:
	<label for="music">music</label>
	<input type="checkbox" v-model="hobbies" name="hobbies" id="music" value="music" />
	<label for="book">book</label>
	<input type="checkbox" v-model="hobbies" name="hobbies" id="book" value="book" />
	<label for="game">game</label>
	<input type="checkbox" v-model="hobbies" name="hobbies" id="game" value="game" />
	</div>
	<div>
	profile:
	<textarea v-model="profile" name="profile" id="profile" cols="30" rows="10"></textarea>
	</div>
	<div>
	fruit:
	<select v-model="fruit" name="fruit" id="fruit">
	<option value="apple">apple</option>
	<option value="pear">pear</option>
	<option value="banana">banana</option>
	</select>
	</div>
	<div>
	selected:
	<select name="select" id="select" multiple v-model="select">
	<option value="AA">AA</option>
	<option value="BB">BB</option>
	<option value="CC">CC</option>
	<option value="DD">DD</option>
	<option value="EE">EE</option>
	</select>
	</div>
	<div>
	<button type="button" @click="submit" id="submit_btn">Submit</button>
	</div>
	</form>
	</div>

	<script src="./node_modules/jquery/dist/jquery.js"></script>
	<script src="./node_modules/vue/dist/vue.js"></script>
	<script>
	const vm = new Vue({
	el: '#app',
	data() {
	return {
	username: '',
	password: '',
	sex: '',
	hobbies: [],
	checked: false,
	profile: '',
	fruit: '',
	select: []
	};
	},
	methods: {
	submit() {
	console.log('Username: ', this.username);
	console.log('Password: ', this.password);
	console.log('Sex: ', this.sex);
	console.log('Checked: ', this.checked);
	console.log('Hobbies: ', this.hobbies);
	console.log('Profile: ', this.profile);
	console.log('Fruit: ', this.fruit);
	console.log('Select: ', this.select);
	console.log('-----------------------------------');
	}
	}
	});

	const submitBtn = document.getElementById('submit_btn');
	const myForm = document.getElementById('myForm');

	submitBtn.addEventListener('click', function() {
	const elements = myForm.elements;
	console.log('Username: ', elements['username'].value);
	console.log('Password: ', elements['password'].value);
	console.log('Sex: ', elements['sex'].value);
	console.log('Checked: ', elements['checked'].checked);
	const hobbies = [];
	elements['hobbies'].forEach(function(v, i) {
	if (v.checked) {
	hobbies.push(v.value);
	}
	});
	console.log('Hobbies: ', hobbies);
	console.log('Profile: ', elements['profile'].value);
	console.log('Fruit: ', elements['fruit'].value);
	const selected = [];
	Array.from(elements['select']).forEach(function(v) {
	if (v.selected) {
	selected.push(v.value);
	}
	});
	console.log('Select: ', selected);
	});

	$('#submit_btn').on('click', function() {
	console.log('-----------------------------------');
	console.log('Username: ', $('input[type=text][name=username]').val());
	console.log('Password: ', $('input[type=password][name=password]').val());
	console.log('Sex: ', $('input[type=radio][name=sex]:checked').val());
	console.log('Checked: ', $('input[type=checkbox][name=checked]').prop('checked'));
	const hobbies = [];
	$('input[type=checkbox][name=hobbies]:checked').each(function(i, e) {
	hobbies.push($(e).val());
	});
	console.log('Hobbies: ', hobbies);
	console.log('Profile: ', $('textarea[name=profile]').val());
	console.log('Fruit: ', $('select[name=fruit]').val());
	console.log('Select: ', $('select[name=select]').val());
	});
	</script>
	</body>
	</html>