import React from 'react'
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
export default function Header(){
return(<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">To DO</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<form onSubmit={handleLogin} >
<input type="text" placeholder="username" name="username"></input>
<input type="password" placeholder="password" name="password"></input>
<button className="btn1" type="submit" >Login</button>
</form>
<h5 id="head"> not a user !? signup here </h5>
<form >
<input type="text" placeholder="username" name="username"></input>
<input type="password" placeholder="password" name="password"></input>
<button className="btn1" type ="submit" href="register" >signup</button>
</form>
</Nav>
</Container>
</Navbar>
</>)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<br><br>
<h4>ตัวอย่างฟอร์มชำระเงิน ถ้าเลือกรูปแบบการชำระเงินเป็นโอนเงิน จะแสดงลิสธนาคารให้เลือก</h4>
html + javascript : Show input field only if a specific option is selected
</div>
<div class="col-sm-3">
<form method="get">
<div class="form-group row">
<label for="cashmethod">เลือกวิธีชำระเงิน</label>
<select onchange="yesnoCheck(this);" class="form-control" name="cashmethod" required>
<option value="">-วิธีชำระเงิน-</option>
<option value="เงินสด">เงินสด</option>
<option value="โอนเงิน">โอนเงิน</option>
</select>
</div>
<div class="form-group row" id="ifcash" style="display: none;">
<label for="bank">เลือกธนาคารที่โอนเงิน</label>
<select name="bank" class="form-control">
<option value="">เลือกธนาคารที่โอนเงิน</option>
<option value="1">bank1</option>
<option value="2">bank2</option>
<option value="3">bank3</option>
</select>
</div>
<div class="form-group row">
<label for="amount">จำนวนเงิน</label>
<input type="number" name="amount" required min="0" class="form-control">
</div>
<div class="form-group row">
<button type="submit" class="btn btn-primary">SAVE</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function yesnoCheck(that) {
if (that.value == "โอนเงิน") {
document.getElementById("ifcash").style.display = "block";
} else {
document.getElementById("ifcash").style.display = "none";
}
}
</script>
</body>
</html>
Cr.https://stackoverflow.com/questions/29321494/show-input-field-only-if-a-specific-option-is-selected
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Helmet } from "react-helmet";
import BgImage from "./BgImage";
import toast, { Toaster } from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import { postLogin } from "../../store/asyncMethods/authMethods";
const Signup = () => {
const [state, setState] = useState({
email: "",
password: "",
});
const { loading, loginErrors, user } = useSelector(
(state) => state.AuthReducer
);
const dispatch = useDispatch();
const HandleInput = (e) => {
setState({
...state,
[e.target.name]: e.target.value,
});
};
const Submit = async (e) => {
e.preventDefault();
dispatch(postLogin(state));
};
const navigate = useNavigate();
useEffect(() => {
if (loginErrors.length > 0) {
toast.error(loginErrors);
}
if (user) {
navigate("/");
}
}, [loginErrors, user]);
return (
<>
<Helmet>
<title>Login</title>
</Helmet>
<div className="row mt-80">
<div className="col-8">
<BgImage />
<Toaster
position="top-right"
reverseOrder={false}
toastOptions={{
style: {
fontSize: "14px",
},
}}
/>
</div>
<div className="col-4">
<div className="account">
<div className="account__section">
<form onSubmit={Submit}>
<div className="group">
<h3 className="form-heading">Login</h3>
</div>
<div className="group">
<input
type="email"
name="email"
className="group__control"
placeholder="Enter Email"
value={state.email}
onChange={HandleInput}
/>
</div>
<div className="group">
<input
type="password"
name="password"
className="group__control"
placeholder="Enter Password"
value={state.password}
onChange={HandleInput}
/>
</div>
<div className="group">
<input
type="submit"
className="btn btn-default btn-block"
value={loading ? "Login..." : "Login"}
/>
</div>
</form>
</div>
</div>
</div>
</div>
</>
);
};
export default Signup;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
</head>
<body>
<style type="text/css">
#text {
height: 25px;
border-radius: 5px;
padding: 4px;
border: solid thin #aaa;
width: 100%;
}
#button {
padding: 10px;
width: 100px;
color: white;
background-color: lightblue;
border: none;
}
#box {
background-color: grey;
margin: auto;
width: 300px;
padding: 20px;
}
</style>
<div id="box">
<form method="post">
<div style="font-size: 20px;margin: 10px;color: white;">Login</div>
<input id="text" type="text" name="user_name"><br><br>
<input id="text" type="password" name="password"><br><br>
<input id="button" type="submit" value="Login"><br><br>
<a href="signup.php">click to register</a><br><br>
</form>
</div>
</body>
</html>