I have a mystery trouble: when I clicking to the button or press enter, nothing is happen.
Row = ReactBootstrap.Row
Col = ReactBootstrap.Col
Input = ReactBootstrap.Input
Button = ReactBootstrap.Button
#NewSession = React.createClass
handleSubmit: (e) ->
alert 'f'
e.preventDefault()
Dispatcher.query('sessions', {}, 'POST')
render: ->
<form onSubmit={#handleSubmit} noValidate>
<Row>
<Col md={6} mdOffset={3} className='text-center'>
<Input type='text' placeholder='Your username' ref='login' />
<Input type='text' placeholder='Your password' ref='password' />
<Button bsStyle='success'>Sign in</Button>
</Col>
</Row>
</form>
What is the reason of this strange behavior? Why handleSubmit doesn't work?
UPDATED
If I place onClick={#handleSubmit} handler on button, clicking is works
react-bootstrap Button components default to type="button", so you need to add type="submit" to create a submit button.
<Button type='submit' bsStyle='success'>Sign in</Button>
You don't have any submit event... You need to declare a type=submit inside the render method. Then you can use your onSubmit event handler function. Example below:
<form onSubmit={this.handleSubmit.bind(this)}>
<div className="form-group col-sm-7">
<input type="text" className="form-control" ref="inputmessage" id="inputDefault" />
</div>
<div className="form-group col-sm-5">
<button type="submit" className="btn btn-block btn-primary">Send Message </button>
</div>
</form>
Related
I am trying to add a modal to my page but it only stays open for a second and then closes again.
Here is my code:
Home.js
import './Home.css';
import React, {useState} from 'react';
import Modal from "./components/Modal";
function Home() {
const [openModal, setOpenModal] = useState(false);
return (
<div>
{console.log(openModal)}
<div className="App">
<header className="App-header">
<h1 className="App-name">iScore</h1>
</header>
</div>
<div className="Auth-form-container">
<form className="Auth-form">
<div className="Auth-form-content">
<h3 className="Auth-form-title">Sign In</h3>
<div className="form-group-both">
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="email"
className="form-control mt-1"
placeholder="Enter email"
/>
</div>
</div>
<div className="form-group-pass">
<div className="form-group mt-3">
<label>Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password"
/>
</div>
</div>
<div className="popup">
<button className="submit"
>
Submit
</button>
</div>
{openModal && <Modal setOpenModals={setOpenModal}/>}
<p className="forgot-password text-right mt-2">
Forgot password?
</p>
<p>
Need an account?
</p>
<button className="sign-up" onClick={() => {
setOpenModal(true);
}}>Register
</button>
</div>
</form>
</div>
</div>
);
}
export default Home;
Modal.js
import "./Modal.css";
import {useState} from "react";
function Modal({ setOpenModals }) {
const handleChange = (event) => {
console.log("Checked: ", event.target.checked)
setAgreement(event.target.checked);
}
return(
<div className="modalBackground">
<div className="modalContainer">
<article>
<button className="Close" onClick={() => setOpenModals(false)}> × </button>
{/*<form>*/}
<div className="Auth-form-content">
<h3 className="Auth-form-title">Register</h3>
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="email"
className="form-control mt-1"
placeholder="Enter email"
/>
</div>
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="name"
className="form-control mt-1"
placeholder="Enter first name"
/>
</div>
<div className="form-group mt-3">
<label>Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password"
/>
</div>
<div className="form-group mt-3">
<label>Confirm Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password again"
/>
</div>
<div>
<input type="checkbox" name="terms" value="yes" onChange={handleChange}/>
<label htmlFor="terms"> I agree to the terms and conditions</label>
</div>
</div>
{/*</form>*/}
</article>
<footer>
<button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button>
<button onClick={() => setOpenModals(false)} >Close</button>
</footer>
</div>
</div>
)
}
export default Modal
It seems that as soon as I press Register I can see in the console that openModal is set to True, but then immediately gets set back to false.
I am at a bit of a loss as to what to changes to try and make this work. From my perspective it should be doing it correctly.
Am I missing something here?
The issue is that in Modal.js in <button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button> you use undeclared
agreement variable that cause Modal.js throw an error and do not render. You need pass agreement as prop or add a new state const [agreement, setAgreement] = useState(false) or remove disabled={!agreement} from a button in Modal.js
Edited
You have a form tag in Home.js and when you click Register button it opens the Modal AND submits a form. By default, a button has an innate type property of submit. When clicked, or activated inside a form, it will cause that form to submit (and trigger a corresponding submit event). This submit event cause Modal to close. Add type="button" to the Register button in Home.js.
at:
<button disabled={!agreement} onClick={() =>
{handleSubmit();setOpenModals(false)}}>Register</button>
You are calling setOpenModals false right after handleSubmit() which is causing immediate close of modal.
You need to close the modal in handleSubmit() function.
i'm trying to use login and register in one page in react tsx and this is my code but when i click to show login it's show for like 1 second and then return to signup i don't know why the state change
import React, { ReactElement, Fragment, useState } from 'react'
interface Props { }
function Home({ }: Props): ReactElement {
const [login, setlogin] = useState(false);
return (
<Fragment>
<div className="welcomdiv">
<h1 id="weltxt">Welocme to your Todo List</h1>
<h3 id="strtxt">Let's Start By Making a Account</h3>
</div>
{login ?
<form className="form-signin">
<input type="email" id="inputEmail" className="form-control" placeholder="Email address" required />
<input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
:
<form className="form-signup">
<input type="text" name="username" className="form-control" placeholder="Username" required />
<input type="email" name="email" className="form-control" placeholder="Email address" required />
<input type="password" name="password" className="form-control" placeholder="Password" required />
<input type="password" name="password2" className="form-control" placeholder="Confirm Password" required />
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
</form>}
<p id="logintxt">Alrady have an Account , Want to <a href="" onClick={() => setlogin(true)}>Login</a></p>
</Fragment>
)
}
export default Home;
This is because button with the type, submit, will actually try to trigger the form's default submit action.
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
If you do not wish that to happen, you can simply switch the type to button, and manually bind the onClick event to your custom click handler method.
type="button"
You may read more about the submit behaviour over here.
In addition, it will be more specific if you type your functional component as React.FC<Props>, instead of ReactElement.
I have a form that has an input field that has autofocus with a reset button. When resetting the form, I would like the input set to focus again. Does anyone have a solution?
<form>
<input type="text" name="focus" required class="search-box" autofocus="autofocus"
placeholder="search items" />
<button type="submit" class="btn btn-primary filtersearch"
data-id="<?php echo $_POST['search']; ?>"><span class="glyphicon glyphicon-filter"></span>
Filter items</button>
</form>
A) Use a reset button instead of an anchor element to retain the form-reset behavior of the browser.
B) Bind a reset event handler to the form and focus the field that has an autofocus attribute. Example: (without jQuery)
var form = document.querySelector('form');
form.addEventListener('reset', function(event) {
var autofocusField = form.querySelector('[autofocus]');
if(autofocusField instanceof HTMLInputElement) {
autofocusField.focus();
}
});
<form>
<input type="text" name="focus" required class="search-box" autofocus="autofocus"
placeholder="search items" />
<button class="close-icon" type="reset">Reset</button>
<button type="submit" class="btn btn-primary filtersearch">Filter items</button>
</form>
I would like to press the Enter Key and send a message. I try this:
But there is an error.
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
And I want to manage my function:
handleSendMessage = e => {}
I already try OnKeyPressed but I can't call my functions there.
Thank you.
I prefer a solution without jquery
You would add a keyPress event on the input text input and then detect for an enter key press using e.which ===13
onKeyPress = (e) => {
if(e.which === 13) {
this.handleSendMessage();
}
}
render() {
return (
<div style={styles}>
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} onKeyPress={this.onKeyPress} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
</div>
);
}
You can use a form for it and change your button type to submit
<form onSubmit={this.handleSendMessage}>
<input type="text" className="form-control input-sm chat_input"
placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm"/>
</span>
</form>
while i am pressing enter key its calls function which automatically refreshing the page. the function i wrote for cancel button
<form name="myForm">
<div >
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div >
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<div >
<button type="Cancel" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</div>
</form>
after filling any of textfield press enters its calls the clearDetails function
$scope.addDetails = function() {
var postObj = new Object();
// add details stuff here
}
$scope.clearDetails = function() {
//refresh the page stuff here
//here i am redirecting to the same page
}
Change the type of the cancel button to reset:
<form name="myForm">
<div>
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div>
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<button type="reset" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</form>
On many browser enter consider as submit form or associate with first button click .. just a suggestion move submit button up and cancel button down in html it might solve the problem.
make sure there must be space between two attributes of submit button. You wrote the code as
<button **type="submit"ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>
it must be
<button **type="submit" ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>