Thực hành HTML+CSS+JavaScript
Dynamically Change Form Action Using Javascript
HTML
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Change Form Action Using Javascript</title>
<!-- Include jQuery Library and File Here -->
<script type="text/javascript" src="js/form_action.js"></script>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="container">
<div class="main">
<h2>Dynamically Change Form Action Using Javascript</h2>
<form id="form_id" method="post" name="myform">
<label>Name :</label>
<input type="text" name="name" id="name"/>
<label>Email :</label>
<input type="text" name="email" id="email"/>
<label>Set Form Action :</label>
<select id="form_action" onChange="select_change()" >
<option value="">--- Set Form Action ---</option>
<option value="first.php">first.php</option>
<option value="second.php">second.php</option>
<option value="third.php">third.php</option>
</select>
<input type="button" value="Submit" onclick="myfunction()"/>
</form>
</div>
</div>
</body>
</html>
CSS
/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
.back{
font-size: 14px;
padding: 5px 15px;
text-decoration: none;
color: white;
background-color: rgb(34, 128, 172);
border-radius: 3px;
border: 1px solid rgb(9, 78, 133);
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:30px;
}
input[type=text],select{
width: 95%;
height: 25px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
select{
width: 100%;
height:40px;
font-family:cursive;
font-size: 20px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
margin-bottom:10px;
padding: 10px 0;
}
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
JavaScript
function select_change() {
var z = document.getElementById("form_action").selectedIndex;
var z1 = document.getElementsByTagName("option")[z].value;
alert("Form action changed to " + z1);
}
function myfunction() {
if (validation()) {
// Calling Validation function.
//select option value from select tag and storing it in a variable.
var x = document.getElementById("form_action").selectedIndex;
var action = document.getElementsByTagName("option")[x].value;
if (action !== "") {
document.getElementById("form_id").action = action;
document.getElementById("form_id").submit();
} else {
alert("Please set form action");
}
}
}
// Name and Email validation Function.
function validation() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if (name === '' || email === '') {
alert("Please fill all fields...!!!!!!");
return false;
} else if (!(email).match(emailReg)) {
alert("Invalid Email...!!!!!!");
return false;
} else {
return true;
}
}
Thực hành jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input type='radio' value='/dkm-cln' name='linkgroup' id="linkgroup_1" />
<label for='linkgroup_1'>Chọn thằng cln</label>
<input type='radio' value='/dkm-mmm' name='linkgroup' id="linkgroup_2"/>
<label for='linkgroup_1'>Chọn thằng mmm</label>
<hr /><span></span>
<script>
$(() => {
$('input[name=linkgroup]').on('change', (event) => {
$('span').text($(event.target).val());
})
})
</script>
</body>
</html>
