function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
<button class="openButton" onclick={openForm} style={openButton}>AI Chat</button>
<button type="button" class="btn cancel" onclick={closeForm}>Close</button>
I am trying to open a form by onclick event in react, but it's not opening, I am new to react. here attaching what the code..this is working fine with. document.getElementById("myForm").style.display = "block"; As by default chat window is none ,we need to add STYLE display = block when using react,but am nit getting how to add.
const [open, setIsOpen] = useState(false);
const openForm = () =>
{
setIsOpen(true);
};
<Button variant="primary" onClick={openForm} style={openButton} >IRB Chat</Button>
<form open={open}>
<div class="chatPopup" id= "myForms" style={chatPopup}>
<div class="formContainer" style={formContainer}>
<span class="title1" style={title1}>IRB Chat</span>
<label for="msg"><b>Message</b></label>
<iframe customFrameSection style={customFrameSection} frameborder="1" id="AIChat" style={{border:'1px solid rgba(0,255,0,0.3)',width: "285px",height: "400px"}}></iframe>
<button type="button" class="btn cancel" onclick={closeForm} style={cancelButton}>Close</button>
</div>
</div>
</form>
CSS :-
const chatPopup = {
display: "none",
position: "fixed",
bottom: "75px",
right: "15px",
border: '3px solid #F1F1F1',
zIndex:9
};
To do this with React, the best way is using State.
If you do this with vanilla javascript, you don't need React.
example with React and useState:
const [open, setIsOpen] = React.useState(false);
const openForm = () => setIsOpen(true);
<button onClick={openForm}> click me! </button>
<Form open={open}/>
hope helpfull =)
const [open, setIsOpen] = useState(false);
const openForm = () => setIsOpen(true);
<button class="openButton" onClick={() => {openForm}} style={openButton}>Chat</button>
<div class="chatPopup" id="myForm" style={chatPopup}>
<Form open={open}/>
<div class="formContainer" style={formContainer}>
<span class="title1" style={title1}>Chat</span>
<label for="msg"><b>Message</b></label>
<iframe customFrameSection style={customFrameSection} frameborder="1" id="AIChat" style={{border:'1px solid rgba(0,255,0,0.3)',width: "285px",height: "400px"}}></iframe>
<button type="button" class="btn cancel" onclick={closeForm} style={cancelButton}>Close</button>
</div>
</div>
Related
I need to retrieve the input form data using the wrapper save button (Togglable component) and not a submit button inside a form component.
I have this form.
const BasicDataForm = () => {
return (
<form>
<div>
<label htmlFor="nameInput">Your Name: </label>
<input placeholder="Write your name here" type="text" id="nameInput" />
</div>
<div>
<label htmlFor="ageInput">Your Age: </label>
<input placeholder="Write your age here" type="number" id="ageInput" />
</div>
</form>
);
};
And the wrapper
const Togglable = ({ title, children }) => {
const [visible, setVisible] = useState(false);
const hideWhenVisible = { display: visible ? 'none' : '' };
const showWhenVisible = { display: visible ? '' : 'none' };
return (
<header>
<h2>{title}</h2>
<div style={hideWhenVisible}>
<button onClick={() => setVisible(true)}>Show</button>
</div>
<div style={showWhenVisible}>
<button>Save</button> {/* This button needs to retrieve all input form data from children */}
<button onClick={() => setVisible(false)}>Close</button>
{children}
</div>
</header>
);
};
And the main component
const App = () => {
return (
<>
<h1>Form Wrapper</h1>
<Togglable title="Basic Data Form">
<BasicDataForm />
</Togglable>
</>
);
};
I don't know if it's necessary to add a useState inside the form component. I also tried adding a new prop in the Togglable component that bind the onClick event of the save button to the onSubmit event of the form, but not work because there is no submit button inside form component.
The solution was much easier than I thought. You only need to wrap the entire children inside a <form> label and render only the content of the inputs. For every children a button will be added and you will manage the form outside the wrapper.
const Togglable = ({ title, children, handleSubmit }) => {
const [visible, setVisible] = useState(false);
const hideWhenVisible = { display: visible ? 'none' : '' };
const showWhenVisible = { display: visible ? '' : 'none' };
return (
<header>
<h2>{title}</h2>
<div style={hideWhenVisible}>
<button onClick={() => setVisible(true)}>Show</button>
</div>
<div style={showWhenVisible}>
<button onClick={() => setVisible(false)}>Close</button>
<form onSubmit={handleSubmit}>
{children}
<button type="submit">Save</button>
</form>
</div>
</header>
);
};
I have a multistep registration form. With the next button click it's displaying different sections by display block or none. Also setup yup for validation. I want to go to the next step if first steps all fields are valid. I am new in react. Please any help will be great. Thanks in advance.
Here is my some html snippet -
<form className="row g-3 form-container" onSubmit={handleSubmit}>
<div className="container-md general-information" style={{ display: page == "general" ? "block" : "none" }}>
<button type="submit" className="btn btn-primary" onClick={showUserPage}>Next</button>
</div>
<div className="container-md create-user" style={{ display: page == "user" ? "block" : "none" }}>
<div className="px-4 my-5">
<div className="col-12">
<button type="button" className="btn" onClick={showGeneralPage}>Previous</button>
<button type="button" className="btn btn-primary" onClick={showLicensePage}>Next</button>
</div>
</div>
</div>
<div className="container-md license-upload" style={{ display: page == "license" ? "block" : "none" }}>
<div className="px-4 my-5">
<div className="col-12">
<button type="button" className="btn" onClick={showUserPage}>Previous</button>
<button type="submit" className="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div className="container-md complete" style={{ display: page == "complete" ? "block" : "none" }}>
<h2>Registration Successful.</h2>
<p>Thank you</p>
</div>
</form>
here is the methods for page state change
const [page, setPage] = React.useState('general');
let showLicensePage = () => {
setPage('license');
};
let showGeneralPage = () => {
setPage('general');
};
let showUserPage = () => {
setPage('user');
};
how to receive form partial value in useform when next button click-
const { register, formState } = useForm(formOptions);
const { errors } = formState;
I want to show/hide the search bar on the top side of the screen.
I am trying to implement an operation where the search bar is shown when the search button is pressed and hides again when the close button of the search bar is pressed.
const showSearchBar = () => {
document.querySelector("#hearder_search_bar").style = {
top : 0
}
};
const hideSearchBar = () => {
document.querySelector("#hearder_search_bar").style = {
top : -71
}
};
return (
<>
<form id = "hearder_search_bar" action="#" className="header__search">
<input type="text" placeholder="Search"/>
<button
type="button"
class="search"
onClick={...}
>
</button>
<button
type="button"
className="close"
onClick={hideSearchBar}
>
</form>
<div className="header__action--search">
<button
className="header__action-btn"
type="button"
onClick={showSearchBar}>
</button>
</div>
</>
);
css
.header__search {
position: absolute;
left: 0;
top: -71px;
}
use react useState hook and let react handle the manipulation of the DOM.
const [shouldShowSearch, setShouldShowSearch] = useState(false);
const toggleShowSearch = () => setShouldShowSearch(prev => !prev);
const label = shouldShowSearch ? 'hide' : 'show';
const top = shouldShowSearch ? '70px' : '0';
//... code
<>
<form id="hearder_search_bar" action="#" className="header__search" style={{top}}>
// ... code
<button
type="button"
className={label}
onClick={toggleShowSearch}
>
</form>
// .. code
<button onclick={toggleShowSearch}>{label} search</button>
You can use conditionnal className
className={headerIsHidden ? 'header__search__hidden' : 'header__search__shown'
Hello there I'm new with Reactjs and just have a quick question.
I have a modal component that I want to show up when a function is called from another component.
The modal component
const Popup = (props) => {
const [open, setOpen] = React.useState(false);
const toggle = () => {
setOpen(!open);
};
return (
<div>
<Button onClick={toggle}>Click Me</Button>
<Modal className='successModal text-center' open={open} centered={true} size='lg'>
<ModalHeader>{props.title}</ModalHeader>
<ModalBody>
<div>
<img src={successIcon} alt='Success Icon' />
<div className='container my-4'>
<h4>{props.body}</h4>
</div>
</div>
<Button onClick={toggle}>Close</Button>
</ModalBody>
</Modal>
</div>
);
};
export default Popup;
This is the function that I need to show up the popup when it's called
const finishPayment = () => {
console.log('just checking if this function is called properly');
return (
<Popup
toggle={this.toggle}
title='Success'
body='Welcome, everything was fine.'
/>
);
};
Can someone help me how to figure out this?
I think I need to pass something as props, but not sure what.
Thanks!
Your buttons are using "onClick" events, therefore, you must pass a function as argument, but you are passing a constant. Convert your "toggle()" arrow function to function or implement another arrow function inside the "onClick" events, so as in the examples below:
With arrow function:
const Popup = (props) => {
const [open, setOpen] = React.useState(false);
const toggle = () => {
setOpen(!open);
};
return (
<div>
<Button onClick={() => toggle()}>Click Me</Button>
<Modal className='successModal text-center' open={open} centered={true} size='lg'>
<ModalHeader>{props.title}</ModalHeader>
<ModalBody>
<div>
<img src={successIcon} alt='Success Icon' />
<div className='container my-4'>
<h4>{props.body}</h4>
</div>
</div>
<Button onClick={() => toggle()}>Close</Button>
</ModalBody>
</Modal>
</div>
);
};
export default Popup;
With vanilla/traditional functions:
const Popup = (props) => {
const [open, setOpen] = React.useState(false);
function toggle() {
setOpen(!open);
};
return (
<div>
<Button onClick={toggle}>Click Me</Button>
<Modal className='successModal text-center' open={open} centered={true} size='lg'>
<ModalHeader>{props.title}</ModalHeader>
<ModalBody>
<div>
<img src={successIcon} alt='Success Icon' />
<div className='container my-4'>
<h4>{props.body}</h4>
</div>
</div>
<Button onClick={toggle}>Close</Button>
</ModalBody>
</Modal>
</div>
);
};
export default Popup;
hi guys i am new in react js Am trying to build a small modal application , in this application i want to popup when i click on trigeer buttton , i did but not working my method if anyone know please tell me how can i solve this problem
modal.js
This is my form where i want to popup when i click on trigger button
import React, { useState } from 'react';
import './Modal.css';
import Popup from 'reactjs-popup';
import Pop from './Pop';
const Modal = () => {
const [mail, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleChange = (e) => {
e.preventDefault();
if (password === "") {
return alert("please Enter Email and Password")
}
else {
return <Popup trigger={
<Pop />
}>
</Popup>
}
}
return (
<div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
value={mail}
onChange={(e) => setEmail(e.target.value)}
required />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required />
</div>
<button type="submit" class="btn btn-primary" onClick={handleChange}>Trigger</button>
</form>
</div>
)
}
export default Modal;
pop.js
import React from 'react'
const Popup = () => {
return (
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Submit
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer" style={{ display: 'flex', justifyContent: 'space-around' }}>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default Popup;
You can use react bootstrap modal component here.
import React, {useState, setShow } from 'react'
import {Modal} from 'react-bootstrap';
const myModal = () => {
//handeling the modal open & close
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
const handleClose = () => setShow(false);
return (
<>
//this the button that triggers the modal
<button onClick={handleShow}> Show Modal </button>
<Modal className="my-modal" show={show} onHide={handleClose}>
<Modal.Header closeButton className="mymodal-head">
<Modal.Title className="mymodal-title"><h4>The Modal</h4></Modal.Title>
</Modal.Header>
<Modal.Body className="mymodal-body">
//add your input fields and labels here
<input/>
</Modal.Body>
<Modal.Footer className="mymodal-footer">
//add your submit button here
<button> submit </button>
</Modal.Footer>
</Modal>
</>
)
}
Hope this helps! Feel free to ask me if you have any issues with the modal :)