html-form.html
เพิ่ม <script src="myscript2.js"></script>
รูป 24
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Form</title>
<meta charset="utf-8">
<meta name="Keywords" content="HTML,CSS,JavaScript">
<meta name="Description" content="This is desciption">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
//<script src="myscript.js"></script>
<script src="myscript2.js"></script>
</head>
<body>
<h1>HTML Form</h1>
<hr>
<form method="post" action="action_page.php?aa=sss">
First name:<br>
<input type="text" name="firstname" value="Petcharaporn.p">
<br>
Last name:<br>
<input type="text" name="lastname" value="Petchkeaw">
<br><br>
<input type="radio" name="sex" value="male" >Male
<br>
<input type="radio" name="sex" value="female" checked>Female
<br><br>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br>
<input type="checkbox" id="have-car" name="vehicle2" value="Car"> I have a car
<br><br>
<button type="button" id= "btn-add1mc"> Add one more car </button><br><br>
<div class="car-brand-container">
<select class="car-brand" name="cars[]">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<button type="button" class="cb-del">delete</button><br>
</div>
<br><br>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<br><br>
<input type="submit">
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<button type="submit">Send</button>
</form>
</body>
</html>
กดป่ม Add more car จะเพิ่ม chekbox volvo ไปเรื่อย ๆ
---------------------------
myscript2.js
กดเพิ่ม
กด delete ลบทิ้ง
รูป 25-29-31
$(function(){ //Document Ready
$('h1').html('Test <em>html()</em> method');
$('h1').append(' => '); //ค่อข้างหลัง
$('h1').prepend(' <= '); //ต่อขางหน้า
$('h1').after(' ### '); //อยู่ข้างนอก h1
window.selectCar = $('.car-brand-container').html();
$('#btn-add1mc').click(function(){
$('.car-brand-container').append(window.selectCar);
});
$(document).on('click','.cb-del',function(){
$(this).prev().remove();
$(this).next().remove();
$(this).remove();
});
});