I am trying use the hook for the login and that is done by LoginTry function What i have did is inside the LoginTry function i am calling the redux toolkit hook whose purpose to life is to query the url to the backend and give me back the response and it is giving me error that it can be used inside the component function body only but i cant find another way how on click signin button i invoke the hook to perform the login attempt.
import React,{useState,useEffect} from 'react'
import { useLoginQuery } from '../../actions/userAction'
const Login = () => {
const [loginEmail, setLoginEmail] = useState("");
const [loginPassword, setLoginPassword] = useState("");
const [user, setUser] = useState({
name: "",
email: "",
password: "",
});
const LoginTry=() =>{
const cred = {
email:loginEmail,
password:loginPassword,
}
const responseInfo = useLoginQuery(cred)
console.log(responseInfo)
console.log("The login Email is "+loginEmail+"The login passowrd is"+loginPassword)
}
return (
<>
<div className="block p-6 rounded-lg shadow-lg bg-white max-w-sm my-2 mx-auto">
<form>
<div className="form-group mb-6">
<label className="form-label inline-block mb-2 text-gray-700">Email address</label>
<input type="email" className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputEmail2"
aria-describedby="emailHelp" placeholder="Enter email"
onChange={(e)=>{
setLoginEmail(e.target.value)
}} />
</div>
<div className="form-group mb-6">
<label className="form-label inline-block mb-2 text-gray-700">Password</label>
<input type="password" className="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInputPassword2"
placeholder="Password" onChange={(e)=>{setLoginPassword(e.target.value)}}/>
</div>
<div className="flex justify-between items-center mb-6">
<div className="form-group form-check">
<input type="checkbox"
className="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
id="exampleCheck2" />
<label className="form-check-label inline-block text-gray-800" >Remember me</label>
</div>
<a href="#!"
className="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Forgot
password?</a>
</div>
<button className="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out" onClick={LoginTry} type="button">Sign in</button>
<p className="text-gray-800 mt-6 text-center">Not a member? <a href="#!"
className="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Register</a>
</p>
</form>
</div>
</>
)
}
export default Login
Related
I have a react app and implementing reCaptcha on the login/signup page initially, signup is not loading after I click on create account button the login hide and signup show and vice-versa.
I added individual reCaptcha for each forms (Login and Signup) If I enable login page the reCaptcha will load for login but for not signup and if I do the same for signup, reCaptcha will not load for login.
I am using this npm package for reCaptcha: https://www.npmjs.com/package/react-google-recaptcha
below is my component:
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import ReCAPTCHA from "react-google-recaptcha";
import CheckLogin from "./CheckLogin";
function LoginSignup() {
const reCaptchaKey = process.env.REACT_APP_SITE_KEY;
const loginEndpoint = process.env.REACT_APP_API_LOGIN_ENDPOINT;
const [isLoginVerfied, setIsLoginVerified] = useState(false);
const [isSignupVerfied, setIsSignupVerified] = useState(false);
const [signupEmail, setSignupEmail] = useState('');
const [signupPassword, setSignupPassword] = useState('');
const [signupPasswordConfirm, setSignupPasswordConfirm] = useState('');
const [signupName, setSignupName] = useState('');
const [loginEmail, setLoginEmail] = useState('');
const [loginPassword, setLoginPassword] = useState('');
const [captchaValue, setCaptchaValue] = useState('');
const [spinner, setSpinner] = useState(false);
const [loginStatus, setLoginStatus] = useState(false);
const [isLoginBlock, setIsLoginBlock] = useState(true);
const navigate = useNavigate();
const toggleLoginSignup = () => {
if (isLoginBlock === true) setIsLoginBlock(false);
else setIsLoginBlock(true);
}
const handleLoginSubmit = async (e) => {
setSpinner(true)
e.preventDefault();
try {
await fetch(loginEndpoint, {
method: "POST",
headers: new Headers({
'Content-type': 'application/json',
'recaptcha': captchaValue,
}),
body: JSON.stringify({
username: loginEmail,
userpassword: loginPassword
}),
}).then(async function (data) {
let resJson = await data.text();
localStorage.setItem('login', JSON.stringify({
loginStatus: true,
token: resJson
}))
setLoginStatus(true);
setSpinner(false)
navigate("/dashboard");
});
}
catch (err) {
console.error(err);
setSpinner(false)
}
}
const recaptchaLogin = (value) => {
setCaptchaValue(value)
setIsLoginVerified(true);
}
const recaptchaSignup = (value) => {
setIsSignupVerified(true);
}
return (
<div className="login-page-container">
<CheckLogin />
{isLoginBlock ?
<div className="login-block flex flex-col items-center justify-center">
<div className="w-full max-w-4xl p-4 bg-white border border-gray-200 rounded-lg shadow-md sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
<form className="space-y-6" onSubmit={handleLoginSubmit} method="post">
<h5 className="text-xl font-medium text-gray-900 dark:text-white">Welcom to loign.</h5>
<div>
<label htmlFor="email_login" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white input_label">Your email</label>
<input type="email" name="email_login"
value={loginEmail}
onChange={(e) => setLoginEmail(e.target.value)}
id="email_login" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white input-style" placeholder="email#company.com" required />
</div>
<div>
<label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white input_label">Your password</label>
<input type="password" name="password_login"
value={loginPassword}
onChange={(e) => setLoginPassword(e.target.value)}
id="password_login" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white input-style" required />
</div>
<div className="flex items-start">
<div className="flex items-start">
<div className="flex items-center h-5">
<input id="remember" type="checkbox" value="" className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800" required />
</div>
<label htmlFor="remember" className="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<p className="ml-auto text-sm text-blue-700 hover:underline dark:text-blue-500">Lost Password?</p>
</div>
<ReCAPTCHA
sitekey={reCaptchaKey}
onChange={recaptchaLogin}
id='login-recaptcha-container'
/>
<div className="flex flex-col items-center">
<button type="submit" className="w-full text-white bg-hightlight-700 hover:bg-hightlight-800 focus:ring-4 focus:outline-none focus:ring-hightlight-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-hightlight-600 dark:hover:bg-hightlight-700 dark:focus:ring-hightlight-800 control_button_sign_in_up" disabled={!isLoginVerfied}>
{spinner ?
<svg role="status" className="inline mr-3 w-4 h-4 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB" />
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor" />
</svg> : ''}Login to your account</button>
</div>
<div className="text-sm font-medium text-gray-500 dark:text-gray-300">
Not registered? <span onClick={toggleLoginSignup} className="text-blue-700 hover:underline dark:text-blue-500 clickLink">Create account</span>
</div>
</form>
</div>
</div >
:
<div className="flex flex-col items-center justify-center mx-3 my-3">
<div className="w-full max-w-4xl p-4 bg-white border border-gray-200 rounded-lg shadow-md sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
<form className="space-y-6" onSubmit={handleLoginSubmit} method="post">
<h5 id="label_sign-up_header" className="text-center">Registrierung</h5>
<h5 className="text-xl font-medium text-gray-900 dark:text-white text-center" id="label_sign-up_description">Welcome to sign up.</h5>
<div>
<label htmlFor="first_name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white input_label">Name
</label>
<input type="text" name="first_name"
value={signupName} onChange={(e) => setSignupName(e.target.value)}
id="first_name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white input-style" required />
</div>
<div>
<label htmlFor="signup_email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white input_label">Email</label>
<input type="email" name="signup_email" value={signupEmail} onChange={(e) => setSignupEmail(e.target.value)} id="signup_email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white input-style" required />
</div>
<div>
<label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white input_label">Password</label>
<input type="password" name="signup_password" value={signupPassword} onChange={(e) => setSignupPassword(e.target.value)} id="signup_password" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white input-style" required />
</div>
<div>
<label htmlFor="password" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white input_label">rePassword
</label>
<input type="password" name="repeat_password"
value={signupPasswordConfirm} onChange={(e) => setSignupPasswordConfirm(e.target.value)}
id="repeat_password" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white input-style" required />
</div>
<ReCAPTCHA
sitekey={reCaptchaKey}
onChange={recaptchaSignup}
id='signup-recaptcha-container'
/>
<div className="flex flex-col items-center">
<button type="submit" className=" text-white bg-hightlight-700 hover:bg-hightlight-800 focus:ring-4 focus:outline-none focus:ring-hightlight-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-hightlight-600 dark:hover:bg-hightlight-700 dark:focus:ring-hightlight-800 text-center control_button_sign_in_up" disabled={!isSignupVerfied}>Register</button>
</div>
</form>
</div>
</div>
}
</div >
);
}
export default LoginSignup;
I have 2 dynamic inputs academic and teaching exp but only academic works
and when I try to add a new field to teachingExp it returns typeError: teachingExp.map is not a
function
i have used the same code for both dynamic inputs but one works and other does not
both these input divs are inside a form
outside component return
const [academic, setAcademic] = useState([
{
degree: "",
branch: "",
university: "",
completionYear: "",
grade: "",
},
]);
const [teachingExp, setTeachingExp] = useState([
{
university: "",
designation: "",
period: "",
},
]);
const handleAcademicChange = (index, e) => {
let data = [...academic];
data[index][e.target.id] = e.target.value;
setAcademic(data);
};
const handleTeachingExpChange = (index, e) => {
let data = [...teachingExp];
data[index][e.target.name] = e.target.value;
setTeachingExp(data);
};
const addAcademic = () => {
let newAcademic = {
degree: "",
branch: "",
university: "",
completionYear: "",
grade: "",
};
setAcademic([...academic, newAcademic]);
};
const addTeachingExp = () => {
let newTeachingExp = {
university: "",
designation: "",
period: "",
};
setTeachingExp(...teachingExp, newTeachingExp);
};
const removeAcademic = (index) => {
let data = [...academic];
data.splice(index, 1);
setAcademic(data);
};
const removeTeachingExp = (index) => {
let data = [...teachingExp];
data.splice(index, 1);
setTeachingExp(data);
};
inside return
<div className="flex justify-center w-full m-auto my-6 p-4 font-sans ">
<div className="flex flex-col p-3">
<h3 className="text-center p-3 text-3xl font-medium text-gray-700 mb-5 ">
Academic Qualifications
</h3>
{academic.map((input, index) => {
return (
<div
key={index}
className="w-56 mb-4 relative group grid place-content-center place-items-center m-auto lg:grid-flow-col gap-4 "
>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">Degree/Title</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
id="degree"
autoComplete="true"
placeholder="Enter degree"
value={input.degree}
onChange={(e) => handleAcademicChange(index, e)}
/>
</div>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">
Branch/Specialization
</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
id="branch"
autoComplete="true"
placeholder="Enter branch"
value={input.branch}
onChange={(e) => handleAcademicChange(index, e)}
/>
</div>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">
University/College
</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
id="university"
autoComplete="true"
placeholder="Enter university"
value={input.university}
onChange={(e) => handleAcademicChange(index, e)}
/>
</div>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">
Completion year
</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
id="completedYear"
autoComplete="true"
placeholder="Enter completion year"
value={input.completedYear}
onChange={(e) => handleAcademicChange(index, e)}
/>
</div>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">Grade/Marks</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
id="grade"
autoComplete="true"
placeholder="Enter grade"
value={input.grade}
onChange={(e) => handleAcademicChange(index, e)}
/>
</div>
{academic.length > 1 ? (
<TrashIcon
className="h-8 mt-5 mx-4 text-red-600"
onClick={() => removeAcademic(index)}
/>
) : (
""
)}
</div>
);
})}
<PlusCircleIcon
className="h-12 p-2 mx-4 text-[#020493] mt-1"
onClick={addAcademic}
/>
</div>
</div>
<div className="flex justify-center w-full m-auto my-6 p-4 font-sans ">
<div className="flex flex-col p-3">
<h3 className="text-center p-3 text-3xl font-medium text-gray-700 mb-5 ">
Teaching Experience
</h3>
{teachingExp.map((input, index) => (
<div
key={index}
className="w-56 mb-4 relative group grid place-content-center place-items-center m-auto lg:grid-flow-col gap-4 "
>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">
University/College
</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
name="university"
autoComplete="true"
placeholder="Enter university"
value={input.university}
onChange={(e) => handleTeachingExpChange(index, e)}
/>
</div>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">Designation</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
name="designation"
autoComplete="true"
placeholder="Enter designation"
value={input.designation}
onChange={(e) => handleTeachingExpChange(index, e)}
/>
</div>
<div className="w-56 lg:w-40 p-2 xl:w-56">
<label className="text-sm font-light">Period</label>
<input
className="form-control
block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none "
type="text"
required
name="period"
autoComplete="true"
placeholder="Enter period"
value={input.period}
onChange={(e) => handleTeachingExpChange(index, e)}
/>
</div>
{teachingExp.length > 1 ? (
<TrashIcon
className="h-8 mt-5 mx-4 text-red-600"
onClick={() => removeTeachingExp(index)}
/>
) : (
""
)}
</div>
))}
<PlusCircleIcon
className="h-12 p-2 mx-4 text-[#020493] mt-1"
onClick={addTeachingExp}
/>
</div>
</div>
You are not properly updating state when adding new. Rewrite to this:
const addTeachingExp = () => {
let newTeachingExp = {
university: "",
designation: "",
period: "",
};
setTeachingExp([...teachingExp, newTeachingExp]); // HERE YOU FORGOT TO SPREAD IT INTO NEW ARRAY
};
Teaching experience is an array by updating state you missed to put it inside an array
Replace that one via
setTeachingExp(...teachingExp, newTeachingExp);
By this
setTeachingExp([...teachingExp, newTeachingExp]);
I have a that contains some input fields like so:
<div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow"
<div class="flex flex-row space-x-4 pb-5">
<div class="relative z-0 w-full mb-5">
<input type="text" id="f_name" name="f_name" placeholder="Enter Name here"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
</div>
<div class="flex z-0 w-full justify-end">
<input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
</div>
</div>
And in jQuery I am duplicating the above div (on button click) and just appending to the main html body which would be displayed just below the original #datarow div. Heres the full snippet as how I have in my program.
$("#btn_addsector").click(function () {
var div = document.getElementById("datarow"),
clone = div.cloneNode(true);
//neither of the lines work
$(clone).find("#f_name").text = "Tisha";
$("#maincontent").append(clone);
$(clone).find("#f_name").text = "Tisha";
$(clone).find("#f_name").text("Tisha");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent" >
<button id="btn_addsector"
class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
Add Sector
</button>
<div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">
<div class="flex flex-row space-x-4 pb-5">
<div class="relative z-0 w-full mb-5">
<input type="text" id="f_name" name="f_name" placeholder="Enter Name here" value="Hannah"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
</div>
<div class="flex z-0 w-full justify-end">
<input type="text" id="f_dest" name="f_dest" placeholder="Enter Destination here" value="Smallville"
required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none" />
<label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
</div>
</div>
</div>
</div>
I can get the cloned div to appended properly but it does not alter the text of the input field.
There is multiple problem with your code:
1: You can't have multiple elements with the same ID, use class for this. So I've removed the id="f_name" and added it to the class selector class="the previous classes f_name"
2: To set the value of an input, you have to use .val() and not .text()
$(clone).find(".f_name").val("Tisha");
Demo
$("#btn_addsector").click(function() {
var div = document.getElementById("datarow"),
clone = div.cloneNode(true);
//neither of the lines work
$(clone).find(".f_name").val("Tisha");
$("#maincontent").append(clone);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontent">
<button id="btn_addsector" class="bg-transparent hover:bg-secondary-dark text-secondary-dark font-semibold hover:text-white py-2 px-4 border border-secondary-dark hover:border-transparent rounded">
Add Sector
</button>
<div class="px-4 py-6 mb-4 border rounded-lg border-gray-400" id="datarow">
<div class="flex flex-row space-x-4 pb-5">
<div class="relative z-0 w-full mb-5">
<input type="text" name="f_name" placeholder="Enter Name here" value="Hannah" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_name" />
<label for="f_name" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Name</label>
</div>
<div class="flex z-0 w-full justify-end">
<input type="text" name="f_dest" placeholder="Enter Destination here" value="Smallville" required class="pt-3 pb-2 block w-full px-4 mt-0 rounded bg-white border-0 border-b appearance-none f_dest" />
<label for="f_dest" class="absolute duration-300 pl-2 text-lg top-3 z-1 origin-0 text-gray-500">Destination</label>
</div>
</div>
</div>
</div>
I need to pass the input values to a modal, but i can't do it with x-ref. Is this the right way to do it?
<div x-data="orderSearch()" class="container mt-2 mx-auto" x-ref="root">
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 mt-2 mb-3">
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200 bg-green-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-green-800" x-data="{ qty: '', val: '', total: ''}" x-effect="total = qty * val">
Definir estratégia de COMPRA:
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorcompra" type="text" placeholder="Valor" autofocus x-model.number="qty" x-ref="valorcompra" #keydown.enter="fetchOrder('buy',$refs.quantidadecompra.value,$refs.valorcompra.value)">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadecompra" type="text" placeholder="Quantidade" x-model.number="val" x-ref="quantidadecompra" #keydown.enter="fetchOrder('buy',$refs.quantidadecompra.value,$refs.valorcompra.value)">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="totalcompra" type="text" placeholder="Total" x-model.number="total" x-ref="totalcompra" #keydown.enter="fetchOrder('buy',$refs.quantidadevenda.value,$refs.valorcompra.value)" x-bind:disabled="true">
</div>
</div>
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200 bg-red-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-red-800" x-data="{ qty: '', val: '', total: ''}" x-effect="total = qty * val">
Definir estratégia de VENDA:
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus x-model.number="qty" x-ref="valorvenda" #keydown.enter="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadevenda" type="text" placeholder="Quantidade" x-model.number="val" x-ref="quantidadevenda" #keydown.enter="modal=true">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="totalvenda" type="text" placeholder="Total" x-model.number="total" x-ref="totalvenda" #keydown.enter="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)" x-bind:disabled="true">
</div>
</div>
</div>
<!-- Dialog (full screen) -->
<div class="absolute top-0 left-0 flex items-center justify-center w-full h-full" style="background-color: rgba(0,0,0,.5);" x-show="modal">
<!-- A basic modal dialog with title, body and one button to close -->
<div class="h-auto p-4 mx-2 text-left bg-white rounded shadow-xl md:max-w-xl md:p-6 lg:p-8 md:mx-0">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Confirmação!
</h3>
<div class="mt-2">
<p class="text-sm leading-5 text-gray-500" x-text="'Deseja cadastrar a ordem de venda?'">
</p>
</div>
</div>
<!-- One big close button. --->
<div class="mt-4 flex justify-between">
<div class="cancela px-4 bg-red-400 p-3 rounded-lg text-white hover:bg-red-600" #click="modal=false">Cancelar</div>
<div class="ok px-4 bg-green-400 p-3 rounded-lg text-white hover:bg-green-600" #click="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">Confirmar</div>
</div>
</div>
</div>
<!-- fim modal div -->
</div>
Must be read input values here:
<div class="ok px-4 bg-green-400 p-3 rounded-lg text-white hover:bg-green-600" #click="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">Confirmar</div>
I tried to find this answer for two days but i cant.
Can you help me?
i tried a $store solution and it1s done:
<script>
const element = document.querySelector("#valorvenda")
element.addEventListener('change', (event) => {
const quantidadevenda = document.querySelector("#quantidadevenda").value
Alpine.store('venda', {
valorcompra: document.querySelector("#valorcompra").value,
quantidadecompra:quantidadevenda,
valorvenda: event.target.value,
quantidadevenda: quantidadevenda,
})
console.log(Alpine.store('fields').valorvenda);
})
</script>
It's like a state management and works fine!
Thanks all.
I built a sign up page for my web app using react, here is the code:
import React, { useCallback, useState } from "react";
import { withRouter } from "react-router";
import app from "../base";
const SignUp = ({ history }) => {
const handleSignUp = useCallback(
async (event) => {
event.preventDefault();
const { email, password } = event.target.elements;
try {
await app
.auth()
.createUserWithEmailAndPassword(email.value, password.value);
history.push("/");
} catch (error) {
alert(error);
}
},
[history]
);
const [firstName, setFirstname] = useState('');
const handleFirstNameInput = e => {
setFirstname(e.target.current.value);
};
const logName = () => {
alert(firstName);
};
return (
<div className="flex h-screen">
<form
className="w-full max-w-lg m-auto border-solid border-4 border-gray-600 p-6 rounded-lg"
onSubmit={handleSignUp}
>
<div className="flex flex-wrap -mx-3">
{/* Div for first name field */}
<div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
htmlFor="grid-first-name"
>
First Name
</label>
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name"
type="text"
placeholder="Ramon"
onChange={handleFirstNameInput}
value={firstName}
/>
</div>
{/* Div for last name */}
<div className="w-full md:w-1/2 px-3">
<label
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
htmlFor="grid-last-name"
>
Last Name
</label>
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-last-name"
type="text"
placeholder="Wenzel"
/>
</div>
</div>
<div className="flex flex-wrap -mx-3 mb-6">
{/* Div for email */}
<div className="w-full px-3">
<label
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
htmlFor="grid-password"
>
Email
</label>
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-email"
type="email"
placeholder="123#example.com"
/>
</div>
{/* Div for password */}
<div className="w-full px-3">
<label
className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
htmlFor="grid-password"
>
Password
</label>
<input
className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-password"
type="password"
placeholder="******************"
/>
</div>
</div>
<div className="md:flex md:items-center">
{/* Submit Button */}
<button
className="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
type="submit"
onClick={logName}
>
Sign Up
</button>
</div>
</form>
</div>
);
};
export default withRouter(SignUp);
however I keep getting TypeError: Cannot read property 'value' of undefined.
Does anyone have any ideas pls help me with this!
Also, I'm trying to get the first name of user here and put it into my home.js(homepage), how to export the first name here and put it into another js file?
Change this
setFirstname(e.target.current.value)
to
setFirstname(e.target.value)
There is no current property on event.target.
You might have confused with event.currentTarget. But that's a bit different.
You could check the difference between event.currentTarget and event.target here -> https://joequery.me/code/event-target-vs-event-currenttarget-30-seconds/